ТРИДЦАТЬ ВТОРОЙ УРОК

Формы

Сегодня займемся формами. Вообще-то я собиралась посвятить этот урок стилям или слоям, но вот мне пришло очередное письмо с требованием рассказать о формах. Меня просто завалили такими просьбами! Так что я подумала-подумала и решила, что за стили и слои меня никто убивать не будет, потому как внешне они не заметны, а вот формы - они внимание привлекают. И я просто опасаюсь за свою жизнь, если быстренько не отбодаюсь от этого урока. Так что цепляю рога.

Так что же это вообще за штука такая, формы? Вообще они бывают разными. Я бы даже сказала нескольких типов и можно идти к ним разными путями. Итак,

  • Если у вас при слове "формы" в мозгу возникает обнаженная толстушка, то вам не сюда надо! Вам нужно на порносайт, благо их в интернете как собак нерезнаных.
  • Если же это слово строит в вашем мозгу треугольник или там квадрат, то опять-таки вам не сюда, а на какой-нибудь математический сайт, а то и прямая дорога в университет, где о таких формах вам расскажут намного умнее, чем я тут вот корячусь.
  • Ну, а если при слове "формы" у вас представляются поля, в которые поситетели ваших сайтов могут вписать какую-то информацию, если при слове "формы" вы так и видите кнопочки, при щелчке по которым ваши посетители могут ответить на вопросы или заслать вам какую-то информацию, может даже и не очень приятную для вас (ведь кому приятна правда?), то вы пришли по правильному адресу. Так что располагайтесь поудобнее, я вас сейчас буду всему этому учить.

А теперь вопрос на засыпку. Какой тег нужен для формы? Чтобы было написано английскими буковками, а понятно было и по-русски? Ну? Кто тут самый умный? Ну, конечно же! Этот тег FORM, который, как и положено серьезному тегу имеет парный, закрывающийся тег /FORM. Вот между этими тегами мы и будем рисовать разные формочки.

На этом можно было бы и закончить этот урок, но так как мне все равно делать нечего, я просто расскажу что можно между этими тегами вписать. Надеюсь, вы тоже никуда не торопитесь, и у нас будет с вами возможность поболтать часок-другой, да и обменяться разными формами.

Для строительства форм могут использоваться три тега: textarea, SELECT и INPUT. Все они должны иметь обязательный атрибут NAME, определяющий характер информации. Рассмотрим все эти теги поближе.

Textarea

textarea - определяет поле, в которое посетитель может вводить какую-то информацию.

Чтобы построить такое поле, нужны два уже давным-давно известных нам атрибута Rows, который определяет высоту этого поля (говоря проще - число строк), а также атрибуть Cols, который отвечает за ширину этого поля (длину строки), ну и атрибут Name, о котором я упомянула чуть выше.

А вот и первая наша форма с использованием поля:

<FORM> <textarea name="comments" rows=5 cols=60> </textarea> </FORM>

И вот что у нас должно получиться:

Можно еще ввести какой-то текст по умолчанию, чтобы не голое поле было, а подсказка что там писать, ну типа этого:

<FORM> <textarea name="comments" rows=5 cols=60> Напишите тут какая я красивая </textarea> </FORM>

И будьте уверены, ваши посетители поймут намек и напишут что они думают по этому поводу:

Тэкс, с полями разобрались, идем дальше.

Select

SELECT - благодаря этому тегу можно выбрать какой-то один пунктик из нескольких. У этого тега имеются в наличии следующие атрибуты: Name - показывает какого типа информация
Size - высота окошка. Если этот атрибут не указан, либо размер его равен единице, то значит, высота занимает одну строчку, а весь выбор этого меню показывается во всплывающей подсказке.

Если же вам не лень указать число больше единицы, то добавляются строчки вместе с полосой прокрутки.
MULTIPLE - тут существует множественный выбор. Так сказать супер-предложение для супер-жадных и супер-богатых клиентов. Которым и то нужно, и это хочется, и от того вот не отказался бы. Ну чем не идеальный простачок-покупатель наших товаров? Эти опции послушны тегу OPTION, который, в свою очередь имеет два атрибута:
Value - выбор пользователя, который обработается скриптом нужной программой и вышлет куда надо.
Selected - выбор одной из опции.

А вот и примерчики:

<FORM> <SELECT name="krasota"> <OPTION selected value="Красивая">Красивая <OPTION selected value="Так себе">Так себе <OPTION selected value="Могла быть и получше">Могла быть и получше <OPTION selected value="Хуже некуда">Хуже некуда <OPTION selected value="Страшнее смерти">Страшнее смерти </SELECT> </FORM>

Как видите, я не указала тут размер SIZE, а потому размер окошка получился высотой в одну строчку, что, в прочем, не мешает сделать пользователю правильный выбор!

А теперь побалуемся с размерами. Укажем размер size=4:

<FORM> <SELECT name="krasota" size=4> <OPTION selected value="Красивая">Красивая <OPTION selected value="Так себе">Так себе <OPTION selected value="Могла быть и получше">Могла быть и получше <OPTION selected value="Хуже некуда">Хуже некуда <OPTION selected value="Страшнее смерти">Страшнее смерти </SELECT> </FORM>

Как видим, окошко удлинилось до четырех строчек, недостающая опция (а по мне так ее лучше вообще б не было) - оказывается скрытой за полосой прокрутки:

Input

INPUT - ответственен за некоторые функции, такие, как например: ввод только одной строчки информации, установка и сброс флажков, нажатие кнопок для отправки формы и выбор переключателя.

У этого тега есть атрибуты: Name, Size, Maxlenght (максимальное число символов, которое можно ввести в поле), Value, Checked (включенный по умолчанию флажок или переключатель) и Type, о котором сейчас поговорим поподробней.

Input может принимать значения: Text, Password, Checkbox, Radio, Reset и Submit

А теперь по примерчику на каждое значение.

1) INPUT TYPE=text

<FORM> Вот в это окошко введите свою фамилию, только не больше 10 символов, а размером это окошко на 60 пикселей!<br> <INPUT TYPE="text" NAME="family" SIZE="15" MAXLENGTH="20"> </FORM>

И вот что получилось. Если у вас фамилия больше 20 букв, то я вам советую или поменять фамилию, или увеличить maxlength:

Вот в это окошко введите свою фамилию, только не больше 20 символов, а размером это окошко на 15 пикселей!

2)INPUT TYPE=password. Если вы не хотите, чтобы еще кто-то увидел вашу фамилию, или вообще хотите скрыть все, что пишете, например подобранный пароль к секретным данным военного разведывательного управления, то напишите следующий код:

<FORM> Введите секретное слово:<br> <INPUT TYPE="password" NAME="secret" SIZE="15" MAXLENGTH="20"> </FORM>

И усе! Можете грабить банк! Все ваши слова заменятся звездочками!

Введите секретное слово:

3)INPUT TYPE=checkbox. Если вам лень возиться с полями, подбирать их размеры, да и вообще хотите облегчить жизнь своим клиентам, можете вместо полей нарисовать маленькие квадратики, а в квадратиках рисовать галочки. Тоже, между прочим, прелюбопытнейшее занятие! Напишем следующий код:

<FORM> <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1"> Вы хотите грабить банк <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2"> Вы хотите грабить награбленное <INPUT TYPE="checkbox" NAME="checkbox3" VALUE="checkbox_value3" CHECKED> Вы - честный человек и этим все сказано! </FORM>

Обратите внимание на CHECKED в последнем варианте. Это означает, что по умолчанию галочка будет стоять именно там! То есть разработчик этой формы (то есть я!) подразумевает, что вы - честный человек и не будете тырить. Тем более - уже натыренное:

Вы хотите грабить банк
Вы хотите грабить награбленное
Вы - честный человек и этим все сказано!

Впрочем, эта форма имеет следующий недостаток. Вы можете установить галочку во всех трех вариантах! То есть, считая себя честным человеком, тут же пойти ограбить банк, да еще и ограбить тех, кто его ограбил только что до вас! Казалось бы, ситуация неразрешима... Как же заставить всех поверить в ваши чистые намерения? Да очень просто! Воспользуемся радиокнопками!!!

4)INPUT TYPE=radio. В этом случае можно выбрать одно и только одно решение. Какое? Решать вам! Я могу поставить cheked, типа подсказывая как надо жить, но сейчас будет ваш и только ваш выбор. И поэтому я пишу код:

<FORM> <INPUT TYPE="radio" NAME="choice" VALUE="choice1"> Вы хотите грабить банк <INPUT TYPE="radio" NAME="choice" VALUE="choice2"> Вы хотите грабить награбленное <INPUT TYPE="radio" NAME="choice" VALUE="choice3"> Вы - честный человек и этим все сказано! </FORM>

Вы хотите грабить банк
Вы хотите грабить награбленное
Вы - честный человек и этим все сказано!

5)INPUT TYPE=reset. С помощью этого значения мы сможем легко и просто создать кнопку для очистки формы. Весьма полезная вещица. Вы вот, например, ограбили банк, вас замучило раскаяние, вы тогда сели за компьютер, открыли форму для послания вашего добровольного раскаяния в отдел злостных правонарушителей и написали все, что думаете про себя. Писали долго, вдумчиво, благо что наверняка там поле предоставлено большое, есть где душу излить.

Ну вот значит... написали... прочитали... полно ошибок, даже стыдно как-то это отсылать, и стали исправлять допущенные ошибки. И пока исправляли ошибки, вдруг подумали... ну какой же я дурак (дура)! И че тада жизнью надо было рисковать, чтоб щас прям голыми своими руками в тюрьму же и сесть! Стирать все - рука отсохнет! А тут бац! Кнопочка есть! Вот такая, как мы сейчас и нарисуем:

<FORM> <INPUT TYPE="reset"> </FORM>

И вот - оп-ля! Кнопочка и готова! Даже уже с надписью!

Однако не все знают английский язык, только русский! Да и то со словарем! Поэтому можно написать всякие другие слова на кнопочке с помощью атрибута VALUE. Примерно вот так:

<FORM> <INPUT TYPE="reset" VALUE="А теперь сотри все, что тут написал!"> </FORM>

И вот он - перевод для русских граждан:

6) INPUT TYPE=submit. Ну и последняя - кнопка submit. Весьма важная кнопка. Именно она отсылает всю информацию, записанную в полях, отмеченную галочками и точками по указанному пути. Вот ее и будем рисовать. Ее создание очень похоже на то, что мы делали выше:

<FORM> <INPUT TYPE="submit"> </FORM>

Вот она - наша кнопочка.

Единственно отличие, что на ней написано в разных браузерах. Одни браузеры пишут на кнопке "Submit", другие же - "Submit Query". Я помню, некоторые мои знакомые не могли понять что же это за перевод такой, хотя какая разница? Хоть горшком назови, лишь бы ушло все правильно. И совесть была бы чиста. О чем я? Ах, да! Об отсылке. Вот мы и поменяем название.

<FORM> <INPUT TYPE="submit" VALUE="Жми и ничего не бойся! Скоро за тобой придут... "> </FORM>

Впрочем, можно сделать кнопку не такой мрачной. Можно даже заменить ее приятной картинкой. Я вот не поленилась и нарисовала картинку и обозвала ее "send.jpg". Тогда код отправки у нас немного изменится:

<FORM> <INPUT TYPE=image NAME=name src="send.jpg"> </FORM>

И вот она - красота:

Все это чудесно - скажете вы, но что с этим всем теперь делать? И вы знаете, на этом месте я посмотрю на вас немного грустно и виновато. И вы поймете почему.

Action

Все, что я описала выше, можно просто сгруппировать в одной форме. Это все переключатели, флажки, поля ввода и разные кнопки. Примерно вот так:

<FORM action="mailto:dikarrka@yandex.ru"> <textarea name="comments" rows=5 cols=60>Напишите тут какая я красивая</textarea> <SELECT name="krasota" size=4> <OPTION selected value="Красивая">Красивая <OPTION selected value="Так себе">Так себе <OPTION selected value="Могла быть и получше">Могла быть и получше <OPTION selected value="Хуже некуда">Хуже некуда <OPTION selected value="Страшнее смерти">Страшнее смерти </SELECT> Вот в это окошко введите свою фамилию, только не больше 10 символов, а размером это окошко на 60 пикселей! <INPUT TYPE="text" NAME="family" SIZE="15" MAXLENGTH="20"> Введите секретное слово: <INPUT TYPE="password" NAME="secret" SIZE="15" MAXLENGTH="20"> <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1"> Вы хотите грабить банк <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2"> Вы хотите грабить награбленное <INPUT TYPE="checkbox" NAME="checkbox3" VALUE="checkbox_value3" CHECKED> Вы - честный человек и этим все сказано! <INPUT TYPE="reset"> <INPUT TYPE="submit"> </FORM>

Вот что получилось:



Вот в это окошко введите свою фамилию, только не больше 20 символов, а размером это окошко на 15 пикселей!

Введите секретное слово:

Вы хотите грабить банк
Вы хотите грабить награбленное
Вы - честный человек и этим все сказано!

Все вроде понятно кроме того, как все это использовать, да? Так вот она - грусть. Обрабатывается это все программой GGI, которая никак не входит в рассмотрение этого урока. С помощюью протокола HTTP передаются данные на сервер, там они обрабатываются с помощью программы GGI. Можно конечно и без GGI, с помощью JavaScript, но там свои проблемы. Так что подождите,пока я или сама разберусь с этими GGI, либо попытайтесь найти тех, которые помогут вам в этом.

Ну а я, чтобы вас как-то утешить сообщу как можно данные прислать на ваш почтовый ящик. Обратите внимание на строчку: FORM action="mailto:dikarrka@yandex.ru"

Замените приведенный электронный адрес своим и будьте уверены, что все, что о вас подумали придет аккуратно в ваш почтовый ящик. Вот на этой грустной ноте позвольте и откланяться до следующего урока.

К списку всех уроков

(В. Ахметзянова, 2005 г)