Уроки HTML для новичков <<

Формы

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

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

А теперь вопрос на засыпку. Какой тег нужен для формы? Чтобы было написано английскими буковками, а понятно было и по-русски? Ну? Кто тут самый умный? Ну, конечно же! Этот тег <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

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

• INPUT TYPE=text
  <FORM>
  <INPUT TYPE="text" NAME="family" SIZE="15" MAXLENGTH="20">
  </FORM>
  
  
  И вот что получилось.
  
  
  Если у вас фамилия больше 20 букв, то я вам советую или поменять фамилию, или увеличить maxlength
• INPUT TYPE=password. Если вы не хотите, чтобы еще кто-то увидел вашу фамилию, или вообще хотите скрыть все, что пишете, например подобранный пароль к секретным данным военного разведывательного управления, то напишите следующий код:
  <FORM>
  <b>Введите секретное слово:</b>
  <INPUT TYPE="password" NAME="secret" SIZE="15" MAXLENGTH="20">
  </FORM>
  
  
  И все! Можете грабить банк! Все ваши слова заменятся звездочками!
  Введите секретное слово:
• INPUT TYPE=checkbox. Если вам лень возиться с полями, подбирать их размеры, да и вообще хотите облегчить жизнь своим клиентам, можете вместо полей нарисовать маленькие квадратики, а в квадратиках рисовать галочки. Тоже, между прочим, прелюбопытнейшее занятие! Напишем следующий код:
  <FORM>
  <INPUT TYPE="checkbox" NAME="checkbox1" VALUE="checkbox_value1">
  Вы хотите грабить банк <br>
  <INPUT TYPE="checkbox" NAME="checkbox2" VALUE="checkbox_value2">
  Вы хотите грабить награбленное <br>
  <INPUT TYPE="checkbox" NAME="checkbox3" VALUE="checkbox_value3" CHECKED>
  Вы - честный человек и этим все сказано!
  </FORM>
  
  
  Обратите внимание на CHECKED в последнем варианте. Это означает, что по умолчанию галочка будет стоять именно там! То есть разработчик этой формы (то есть я!) подразумевает, что вы - честный человек и не будете тырить. Тем более - уже натыренное:
  Вы хотите грабить банк
  Вы хотите грабить награбленное
  Вы - честный человек и этим все сказано!

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

• INPUT TYPE=radio. В этом случае можно выбрать одно и только одно решение. Какое? Решать вам! Я могу поставить cheked, типа подсказывая как надо жить, но сейчас будет ваш и только ваш выбор. И поэтому я пишу код:
  <FORM>
  <INPUT TYPE="radio" NAME="choice" VALUE="choice1">
  Вы хотите грабить банк <br>
  <INPUT TYPE="radio" NAME="choice" VALUE="choice2">
  Вы хотите грабить награбленное <br>
  <INPUT TYPE="radio" NAME="choice" VALUE="choice3">
  Вы - честный человек и этим все сказано!
  </FORM>

  И теперь вы сами, без подсказки можете выбрать свой вариант, который вам подскажет совесть (не моя, а ваша, конечно):

  Вы хотите грабить банк
  Вы хотите грабить награбленное
  Вы - честный человек и этим все сказано!
• INPUT TYPE=reset. С помощью этого значения мы сможем легко и просто создать кнопку для очистки формы. Весьма полезная вещица. Вы вот, например, ограбили банк, вас замучило раскаяние, вы тогда сели за компьютер, открыли форму для послания вашего добровольного раскаяния в отдел злостных правонарушителей и написали все, что думаете про себя. Писали долго, вдумчиво, благо что наверняка там поле предоставлено большое, есть где душу излить.
  
  Ну вот значит... написали... прочитали... полно ошибок, даже стыдно как-то это отсылать, и стали исправлять допущенные ошибки. И пока исправляли ошибки, вдруг подумали... ну какой же я дурак (дура)! И че тада жизнью надо было рисковать, чтоб щас прям голыми своими руками в тюрьму же и сесть! Стирать все - рука отсохнет! А тут бац! Кнопочка есть! Вот такая, как мы сейчас и нарисуем:
  <FORM>
  <INPUT TYPE="reset">
  </FORM>

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

  
  
  Однако не все же знают английский язык, а может только русский! Да и то со словарем! Поэтому можно написать всякие другие слова на кнопочке с помощью атрибута VALUE. Примерно вот так:
  <FORM>
  <INPUT TYPE="reset" VALUE="А теперь сотри все, что тут написал!">
  </FORM>

  И вот он, перевод для русскоговорящих граждан:
• 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

А теперь мы просто напишем форму, по которой наши посетители смогут отправить нам письмо сразу с нашей странички, не заходя в почтовую программу:

И вот что мы увидим в браузере:

Отправьте письмо!

Напишите тут какая я красивая

Красивая Так себе Могла быть и получше Хуже некуда Страшнее смерти

Введите ваше имя и фамилию:

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

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

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

Ну а я, чтобы вас как-то утешить сообщу как можно данные прислать на ваш почтовый ящик. Обратите внимание на строчку:

FORM action="mailto:info@dikarka.ru"

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

Вот на этой грустной ноте позвольте и откланяться до следующего урока.