Сегодня займемся формами. Вообще-то я собиралась посвятить этот урок стилям или слоям, но вот мне пришло очередное письмо с требованием рассказать о формах. Меня просто завалили такими просьбами! Так что я подумала-подумала и решила, что за стили и слои меня никто убивать не будет, потому как внешне они не заметны, а вот формы - они внимание привлекают. И я просто опасаюсь за свою жизнь, если быстренько не отбодаюсь от этого урока. Так что цепляю рога.
Так что же это вообще за штука такая, формы? Вообще они бывают разными. Я бы даже сказала нескольких типов и можно идти к ним разными путями. Итак,
- Если у вас при слове "формы" в мозгу возникает аппетитная толстушка, то вам не сюда надо! Вам нужно на другой сайт, благо их в интернете как собак нерезнаных.
- Если же это слово строит в вашем мозгу треугольник или там квадрат, то опять-таки вам не сюда, а на какой-нибудь математический сайт, а то и прямая дорога в университет, где о таких формах вам расскажут намного умнее, чем я тут вот корячусь.
- Ну, а если при слове "формы" у вас представляются поля, в которые поситетели ваших сайтов могут вписать какую-то информацию, если при слове "формы" вы так и видите кнопочки, при щелчке по которым ваши посетители могут ответить на вопросы или заслать вам какую-то информацию, может даже и не очень приятную для вас (ведь кому приятна правда?), то вы пришли по правильному адресу. Так что располагайтесь поудобнее, я вас сейчас буду всему этому учить.
А теперь вопрос на засыпку. Какой тег нужен для формы? Чтобы было написано английскими буковками, а понятно было и по-русски? Ну? Кто тут самый умный? Ну, конечно же! Этот тег 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 class="wild-form">
<p><b>Оцени красоту:</b></p>
<select name="krasota" class="wild-select">
<option> value="Красивая" selected>Красивая</option> <!-- Только ОДИН selected -->
<option> value="Так себе">Так себе</option>
<option> value="Могла быть и получше">Могла быть и получше</option>
<option> value="Хуже некуда">Хуже некуда</option>
<option> value="Страшнее смерти">Страшнее смерти</option>
</select>
</form>
Как видите, я не указала тут размер SIZE, а потому размер окошка получился высотой в одну строчку, что, в прочем, не мешает сделать пользователю правильный выбор!
А теперь побалуемся с размерами. Укажем размер size=4:
<form>
<!-- size=4 показывает список сразу развернутым на 4 строки -->
<select name="krasota" size="4" class="wild-select">
<option value="Красивая" selected>Красивая</option>
<option value="Так себе">Так себе</option>
<option value="Могла быть и получше">Могла быть и получше</option>
<option value="Хуже некуда">Хуже некуда</option>
<option value="Страшнее смерти">Страшнее смерти</option>
</select>
</form>
Как видим, окошко удлинилось до четырех строчек, недостающая опция (а по мне так ее лучше вообще б не было) - оказывается скрытой за полосой прокрутки:
Input
INPUT - ответственен за некоторые функции, такие, как например: ввод только одной строчки информации, установка и сброс флажков, нажатие кнопок для отправки формы и выбор переключателя.
У этого тега есть атрибуты: Name, Size, Maxlenght (максимальное число символов, которое можно ввести в поле), Value, Checked (включенный по умолчанию флажок или переключатель) и Type, о котором сейчас поговорим поподробней.
Input может принимать значения: Text, Password, Checkbox, Radio, Reset и Submit
А теперь по примерчику на каждое значение.
1. INPUT TYPE=text
<form class="wild-form">
<p>
Вот в это окошко введите свою фамилию, только не больше 20 символов,
а размером это окошко на 15 символов:<br>
<!-- size="15" задает ширину в символах, maxlength="20" ограничивает ввод -->
<input type="text" name="family" size="15" maxlength="20" class="lesson_32">
</p>
</form>
И вот что получилось. Если у вас фамилия больше 20 букв, то я вам советую или поменять фамилию, или увеличить maxlength:
2. INPUT TYPE=password
Если вы не хотите, чтобы еще кто-то увидел вашу фамилию, или вообще хотите скрыть все, что пишете, например подобранный пароль к секретным данным военного разведывательного управления, то напишите следующий код:
<form class="wild-form">
<p>
Введите секретное слово (тайное заклинание):<br>
<!-- type="password" скроет буквы за кружочками -->
<input type="password" name="secret" size="15" maxlength="20" class="lesson_32">
</p>
</form>
И усе! Можете грабить банк! Все ваши слова заменятся звездочками!
3. INPUT TYPE=checkbox
Если вам лень возиться с полями, подбирать их размеры, да и вообще хотите облегчить жизнь своим клиентам, можете вместо полей нарисовать маленькие квадратики, а в квадратиках рисовать галочки. Тоже, между прочим, прелюбопытнейшее занятие! Напишем следующий код:
<form class="wild-form">
<label>
<input type="checkbox" NAME="checkbox1" VALUE="checkbox_value1">
<span>Вы хотите грабить банк</span>
</label><br>
<label>
<input type="checkbox" NAME="checkbox2" VALUE="checkbox_value2">
<span>Вы хотите грабить награбленное</span>
</label><br>
<label>
<input type="checkbox" NAME="checkbox3" VALUE="checkbox_value3" CHECKED>
<span>Вы — честный человек и этим всё сказано!</span>
</label>
</form>
Обратите внимание на CHECKED в последнем варианте. Это означает, что по умолчанию галочка будет стоять именно там! То есть разработчик этой формы (то есть я!) подразумевает, что вы - честный человек и не будете тырить. Тем более - уже натыренное:
Впрочем, эта форма имеет следующий недостаток. Вы можете установить галочку во всех трех вариантах! То есть, считая себя честным человеком, тут же пойти ограбить банк, да еще и ограбить тех, кто его ограбил только что до вас! Казалось бы, ситуация неразрешима... Как же заставить всех поверить в ваши чистые намерения? Да очень просто! Воспользуемся радиокнопками!!!
4. INPUT TYPE=radio
В этом случае можно выбрать одно и только одно решение. Какое? Решать вам! Я могу поставить cheked, типа подсказывая как надо жить, но сейчас будет ваш и только ваш выбор. И поэтому я пишу код:
<form class="wild-form">
<label>
<input TYPE="radio" NAME="choice" VALUE="choice1">
<span>Вы хотите грабить банк</span>
</label><br>
<label>
<input TYPE="radio" NAME="choice" VALUE="choice2">
<span>Вы хотите грабить награбленное</span>
</label><br>
<label>
<input TYPE="radio" NAME="choice" VALUE="choice3" CHECKED>
<span>Вы — честный человек и этим всё сказано!</span>
</label>
</form>
5. INPUT TYPE=reset
С помощью этого значения мы сможем легко и просто создать кнопку для очистки формы. Весьма полезная вещица. Вы вот, например, ограбили банк, вас замучило раскаяние, вы тогда сели за компьютер, открыли форму для послания вашего добровольного раскаяния в отдел злостных правонарушителей и написали все, что думаете про себя. Писали долго, вдумчиво, благо что наверняка там поле предоставлено большое, есть где душу излить.
Ну вот значит... написали... прочитали... полно ошибок, даже стыдно как-то это отсылать, и стали исправлять допущенные ошибки. И пока исправляли ошибки, вдруг подумали... ну какой же я дурак (дура)! И че тада жизнью надо было рисковать, чтоб щас прям голыми своими руками в тюрьму же и сесть! Стирать все - рука отсохнет! А тут бац! Кнопочка есть! Вот такая, как мы сейчас и нарисуем:
<FORM>
<INPUT TYPE="reset">
</FORM>
И вот - оп-ля! Кнопочка и готова! Даже уже с надписью!
Однако не все знают английский язык, только русский! Да и то со словарем! Поэтому можно написать всякие другие слова на кнопочке с помощью атрибута VALUE. Примерно вот так:
<FORM>
<INPUT TYPE="reset" VALUE="А теперь сотри все, что тут написал!">
</FORM>
И вот он - перевод для русских граждан:
6. INPUT TYPE=submit
Ну и последняя - кнопка submit. Весьма важная кнопка. Именно она отсылает всю информацию, записанную в полях, отмеченную галочками и точками по указанному пути. Вот ее и будем рисовать. Ее создание очень похоже на то, что мы делали выше:
<xmp>
<FORM>
<INPUT TYPE="submit">
</FORM>
</xmp>
Вот она - наша кнопочка.
Единственно отличие, что на ней написано в разных браузерах. Одни браузеры пишут на кнопке "Submit", другие же - "Submit Query". Я помню, некоторые мои знакомые не могли понять что же это за перевод такой, хотя какая разница? Хоть горшком назови, лишь бы ушло все правильно. И совесть была бы чиста. О чем я? Ах, да! Об отсылке. Вот мы и поменяем название.
<FORM>
<INPUT TYPE="submit" VALUE="Жми и ничего не бойся! Скоро за тобой придут... ">
</FORM>
Впрочем, можно сделать кнопку не такой мрачной. Можно даже заменить ее приятной картинкой. Я вот не поленилась и нарисовала картинку и обозвала ее "send.jpg". Тогда код отправки у нас немного изменится:
<FORM>
<INPUT TYPE=image NAME=name src="send.jpg">
</FORM>
И вот она - красота:
Все это чудесно - скажете вы, но что с этим всем теперь делать? И вы знаете, на этом месте я посмотрю на вас немного грустно и виновато. И вы поймете почему.
Action
Все, что я описала выше, можно просто сгруппировать в одной форме. Это все переключатели, флажки, поля ввода и разные кнопки. Примерно вот так:
<form class="wild-form" action="mailto:dikarrka@yandex.ru" method="post" enctype="text/plain">
<!-- Поле для длинного текста -->
<p><b>Ваше мнение:</b><br>
<textarea class="lesson_32" name="comments" rows="5" cols="60">Напишите тут какая я красивая</textarea>
</p>
<!-- Список выбора (оставил один selected) -->
<p><b>Оцените красоту:</b><br>
<select name="krasota" size="4" class="wild-select">
<option value="krasivay" selected>Красивая</option>
<option value="Так себе">Так себе</option>
<option value="Могла быть и получше">Могла быть и получше</option>
<option value="Хуже некуда">Хуже некуда</option>
<option value="Страшнее смерти">Страшнее смерти</option>
</select>
</p>
<!-- Поля ввода -->
<p>
<span>Введите фамилию (макс. 20 знаков):</span><br>
<input type="text" name="family" size="15" maxlength="20" class="lesson_32">
</p>
<p>
<span>Введите секретное слово:</span><br>
<input type="password" name="secret" size="15" maxlength="20" class="lesson_32">
</p>
<!-- Чекбоксы (многократный выбор) -->
<p>
<label><input type="checkbox" name="c1" value="bank"> Вы хотите грабить банк</label><br>
<label><input type="checkbox" name="c2" value="rob"> Вы хотите грабить награбленное</label><br>
<label><input type="checkbox" name="c3" value="honest" checked> Вы — честный человек</label>
</p>
<!-- Кнопки управления -->
<p>
<input type="reset" value="Стереть всё" class="wild-submit" style="background:#666;">
<input type="submit" value="Отправить вождю" class="wild-submit">
</p>
</form>
Вот что получилось:
Все вроде понятно кроме того, как все это использовать, да? Так вот она - грусть. Обрабатывается это все программой GGI, которая никак не входит в рассмотрение этого урока. С помощюью протокола HTTP передаются данные на сервер, там они обрабатываются с помощью программы GGI. Можно конечно и без GGI, с помощью JavaScript, но там свои проблемы. Так что подождите,пока я или сама разберусь с этими GGI, либо попытайтесь найти тех, которые помогут вам в этом.
Ну а я, чтобы вас как-то утешить сообщу как можно данные прислать на ваш почтовый ящик. Обратите внимание на строчку: FORM action="mailto:dikarrka@yandex.ru"
Замените приведенный электронный адрес своим и будьте уверены, что все, что о вас подумали придет аккуратно в ваш почтовый ящик. Вот на этой грустной ноте позвольте и откланяться до следующего урока.