ТРИДЦАТЬ ВТОРОЙ УРОК
Формы
Сегодня займемся формами. Вообще-то я собиралась посвятить этот урок стилям или слоям, но вот мне пришло очередное письмо с требованием рассказать о формах. Меня просто завалили такими просьбами! Так что я подумала-подумала и решила, что за стили и слои меня никто убивать не будет, потому как внешне они не заметны, а вот формы - они внимание привлекают. И я просто опасаюсь за свою жизнь, если быстренько не отбодаюсь от этого урока. Так что цепляю рога.
Так что же это вообще за штука такая, формы? Вообще они бывают разными. Я бы даже сказала нескольких типов и можно идти к ним разными путями. Итак,
- Если у вас при слове "формы" в мозгу возникает обнаженная толстушка, то вам не сюда надо! Вам нужно на порносайт, благо их в интернете как собак нерезнаных.
- Если же это слово строит в вашем мозгу треугольник или там квадрат, то опять-таки вам не сюда, а на какой-нибудь математический сайт, а то и прямая дорога в университет, где о таких формах вам расскажут намного умнее, чем я тут вот корячусь.
- Ну, а если при слове "формы" у вас представляются поля, в которые поситетели ваших сайтов могут вписать какую-то информацию, если при слове "формы" вы так и видите кнопочки, при щелчке по которым ваши посетители могут ответить на вопросы или заслать вам какую-то информацию, может даже и не очень приятную для вас (ведь кому приятна правда?), то вы пришли по правильному адресу. Так что располагайтесь поудобнее, я вас сейчас буду всему этому учить.
А теперь вопрос на засыпку. Какой тег нужен для формы? Чтобы было написано английскими буковками, а понятно было и по-русски? Ну? Кто тут самый умный? Ну, конечно же! Этот тег FORM, который, как и положено серьезному тегу имеет парный, закрывающийся тег /FORM. Вот между этими тегами мы и будем рисовать разные формочки.
На этом можно было бы и закончить этот урок, но так как мне все равно делать нечего, я просто расскажу что можно между этими тегами вписать. Надеюсь, вы тоже никуда не торопитесь, и у нас будет с вами возможность поболтать часок-другой, да и обменяться разными формами.
Для строительства форм могут использоваться три тега: textarea, SELECT и INPUT. Все они должны иметь обязательный атрибут NAME, определяющий характер информации. Рассмотрим все эти теги поближе.
Textarea
textarea - определяет поле, в которое посетитель может вводить какую-то информацию.
Чтобы построить такое поле, нужны два уже давным-давно известных нам атрибута Rows, который определяет высоту этого поля (говоря проще - число строк), а также атрибуть Cols, который отвечает за ширину этого поля (длину строки), ну и атрибут Name, о котором я упомянула чуть выше.
А вот и первая наша форма с использованием поля:
И вот что у нас должно получиться:
Можно еще ввести какой-то текст по умолчанию, чтобы не голое поле было, а подсказка что там писать, ну типа этого:
И будьте уверены, ваши посетители поймут намек и напишут что они думают по этому поводу:
Тэкс, с полями разобрались, идем дальше.
Select
SELECT - благодаря этому тегу можно выбрать какой-то один пунктик из нескольких.
У этого тега имеются в наличии следующие атрибуты:
Name - показывает какого типа информация
Size - высота окошка. Если этот атрибут не указан, либо размер его равен единице, то значит, высота занимает одну строчку, а весь выбор этого меню показывается во всплывающей подсказке.
Если же вам не лень указать число больше единицы, то добавляются строчки вместе с полосой прокрутки.
MULTIPLE - тут существует множественный выбор. Так сказать супер-предложение для супер-жадных и супер-богатых клиентов. Которым и то нужно, и это хочется, и от того вот не отказался бы. Ну чем не идеальный простачок-покупатель наших товаров? Эти опции послушны тегу OPTION, который, в свою очередь имеет два атрибута:
Value - выбор пользователя, который обработается скриптом нужной программой и вышлет куда надо.
Selected - выбор одной из опции.
А вот и примерчики:
Как видите, я не указала тут размер SIZE, а потому размер окошка получился высотой в одну строчку, что, в прочем, не мешает сделать пользователю правильный выбор!
А теперь побалуемся с размерами. Укажем размер size=4:
Как видим, окошко удлинилось до четырех строчек, недостающая опция (а по мне так ее лучше вообще б не было) - оказывается скрытой за полосой прокрутки:
Input
INPUT - ответственен за некоторые функции, такие, как например: ввод только одной строчки информации, установка и сброс флажков, нажатие кнопок для отправки формы и выбор переключателя.
У этого тега есть атрибуты: Name, Size, Maxlenght (максимальное число символов, которое можно ввести в поле), Value, Checked (включенный по умолчанию флажок или переключатель) и Type, о котором сейчас поговорим поподробней.
Input может принимать значения: Text, Password, Checkbox, Radio, Reset и Submit
А теперь по примерчику на каждое значение.
1) INPUT TYPE=text
И вот что получилось. Если у вас фамилия больше 20 букв, то я вам советую или поменять фамилию, или увеличить maxlength:
2)INPUT TYPE=password. Если вы не хотите, чтобы еще кто-то увидел вашу фамилию, или вообще хотите скрыть все, что пишете, например подобранный пароль к секретным данным военного разведывательного управления, то напишите следующий код:
И усе! Можете грабить банк! Все ваши слова заменятся звездочками!
3)INPUT TYPE=checkbox. Если вам лень возиться с полями, подбирать их размеры, да и вообще хотите облегчить жизнь своим клиентам, можете вместо полей нарисовать маленькие квадратики, а в квадратиках рисовать галочки. Тоже, между прочим, прелюбопытнейшее занятие! Напишем следующий код:
Обратите внимание на CHECKED в последнем варианте. Это означает, что по умолчанию галочка будет стоять именно там! То есть разработчик этой формы (то есть я!) подразумевает, что вы - честный человек и не будете тырить. Тем более - уже натыренное:
Впрочем, эта форма имеет следующий недостаток. Вы можете установить галочку во всех трех вариантах! То есть, считая себя честным человеком, тут же пойти ограбить банк, да еще и ограбить тех, кто его ограбил только что до вас! Казалось бы, ситуация неразрешима... Как же заставить всех поверить в ваши чистые намерения? Да очень просто! Воспользуемся радиокнопками!!!
4)INPUT TYPE=radio. В этом случае можно выбрать одно и только одно решение. Какое? Решать вам! Я могу поставить cheked, типа подсказывая как надо жить, но сейчас будет ваш и только ваш выбор. И поэтому я пишу код:
5)INPUT TYPE=reset. С помощью этого значения мы сможем легко и просто создать кнопку для очистки формы. Весьма полезная вещица. Вы вот, например, ограбили банк, вас замучило раскаяние, вы тогда сели за компьютер, открыли форму для послания вашего добровольного раскаяния в отдел злостных правонарушителей и написали все, что думаете про себя. Писали долго, вдумчиво, благо что наверняка там поле предоставлено большое, есть где душу излить.
Ну вот значит... написали... прочитали... полно ошибок, даже стыдно как-то это отсылать, и стали исправлять допущенные ошибки. И пока исправляли ошибки, вдруг подумали... ну какой же я дурак (дура)! И че тада жизнью надо было рисковать, чтоб щас прям голыми своими руками в тюрьму же и сесть! Стирать все - рука отсохнет! А тут бац! Кнопочка есть! Вот такая, как мы сейчас и нарисуем:
И вот - оп-ля! Кнопочка и готова! Даже уже с надписью!
Однако не все знают английский язык, только русский! Да и то со словарем! Поэтому можно написать всякие другие слова на кнопочке с помощью атрибута VALUE. Примерно вот так:
И вот он - перевод для русских граждан:
6) INPUT TYPE=submit. Ну и последняя - кнопка submit. Весьма важная кнопка. Именно она отсылает всю информацию, записанную в полях, отмеченную галочками и точками по указанному пути. Вот ее и будем рисовать. Ее создание очень похоже на то, что мы делали выше:
Вот она - наша кнопочка.
Единственно отличие, что на ней написано в разных браузерах. Одни браузеры пишут на кнопке "Submit", другие же - "Submit Query". Я помню, некоторые мои знакомые не могли понять что же это за перевод такой, хотя какая разница? Хоть горшком назови, лишь бы ушло все правильно. И совесть была бы чиста. О чем я? Ах, да! Об отсылке. Вот мы и поменяем название.
Впрочем, можно сделать кнопку не такой мрачной. Можно даже заменить ее приятной картинкой. Я вот не поленилась и нарисовала картинку и обозвала ее "send.jpg". Тогда код отправки у нас немного изменится:
И вот она - красота:
Все это чудесно - скажете вы, но что с этим всем теперь делать? И вы знаете, на этом месте я посмотрю на вас немного грустно и виновато. И вы поймете почему.
Action
Все, что я описала выше, можно просто сгруппировать в одной форме. Это все переключатели, флажки, поля ввода и разные кнопки. Примерно вот так:
Вот что получилось:
Все вроде понятно кроме того, как все это использовать, да? Так вот она - грусть. Обрабатывается это все программой GGI, которая никак не входит в рассмотрение этого урока. С помощюью протокола HTTP передаются данные на сервер, там они обрабатываются с помощью программы GGI. Можно конечно и без GGI, с помощью JavaScript, но там свои проблемы. Так что подождите,пока я или сама разберусь с этими GGI, либо попытайтесь найти тех, которые помогут вам в этом.
Ну а я, чтобы вас как-то утешить сообщу как можно данные прислать на ваш почтовый ящик. Обратите внимание на строчку: FORM action="mailto:dikarrka@yandex.ru"
Замените приведенный электронный адрес своим и будьте уверены, что все, что о вас подумали придет аккуратно в ваш почтовый ящик. Вот на этой грустной ноте позвольте и откланяться до следующего урока.
(В. Ахметзянова, 2005 г)