HTML. Работа с формами

Определение формы

Форма – это элемент HTML, позволяющий передавать информацию на web-сервер, где информация будет обработана. С помощью форм организуются тесты, голосования, опросы. html-формы сами по себе позволяют только организовывать ввод информацию. Для обработки форм необходимо использовать языки программирования, для обработки на стороне клиента можно использовать, например, язык JavaScript, а на стороне сервера – например, PHP, Perl, C.

Форма задается тегами <form></form>. Элементы формы располагаются между этими тегами. Тег <form> может иметь несколько параметров:

  • name — имя формы. Необходимо, если на странице несколько форм, и имеется необходимость обратиться к элементам формы .
  • action — определяет обработчик формы.
  • method — способ отправки информации — GET или POST.

Элементы формы

Текстовое поле

Оно задается тегом <input>.

Пример использования.

<form name="forma1">
<input type="text" name="t1" size="20" maxlength="50" value="Введите текст">
</form>

При этом в браузере увидим следующий элемент:

Параметры тестового поля

  • name — имя элемента,
  • type — тип элемента (в данном случае — text),
  • size — размер текстового поля в символах, которые одновременно будут видны, при вводе большего количества символов, они будут прокручиваться,
  • maxlength — максимальное количество символов, которое можно ввести в поле, если опустить этот параметр, то число символов будет неограниченным,
  • value — текст, который будет отображаться (его можно стереть), при отсутствии этого параметра поле будет пустым.
  • disabled — блокирует поле от любых изменений,
  • readonly — делает поле доступным только для чтения.

Пример использования параметров.

<form name="forma1">
<input type="text" name="text1" size="20" maxlength="50" value="неактивное поле" disabled>
<input type="text" name="text1" size="20" maxlength="50" value="только для чтения" readonly>
</form>

Текстовое поле для ввода пароля

Представляет собой текстовое поле с тем отличием, что вводимый текст не отображается, вместо него появляются специальные символы, например звездочки. Используется при вводе паролей. От текстового поля отличается только параметром type=»password».

Пример.

<form name="forma1"> Введите пароль:<br>
<input type="password" name="text1" size="20" maxlength="50">
</form>

Флажки

Пример

Ваши любимые предметы:
Математика Литература Физическая культура

Флажки задаются тегом <input>, причем один тег задает один флажок. Поэтому чтобы задать три флажка, надо три раза писать input. Для определения указанного выше примера необходимо задать следующий код.

<form name="forma1">
Ваши любимые предметы:<br>
<input type="checkbox" checked>Математика
<input type="checkbox" > Литература
<input type="checkbox" > Физическая культура
</form>

Рассмотрим параметры тега <input>:

  • type — тип элемента (в данном случае — checkbox),
  • name — имя элемента, указывает программе обработчику формы, какой пункт выбрал пользователь,
  • value — значение элемента, указывает программе обработчику формы значение пункта, который выбрал пользователь,
  • checked — им обычно помечают наиболее вероятные для выбора пункты, пользователь щелчком мыши может выбрать другие пункты.

Переключатели

В отличии от флажков, здесь можно выбрать только один пункт. В связи с этим значения параметра name должны быть одинаковы для всех элементов группы. Параметр type=»radio», все остальные такие же, как у флажков.

Пример.

<form name="forma1">
Укажите ваш пол:<br>
<input type="radio" name="sex" value="man" checked>мужской
<input type="radio" name="sex" value="woman"> женский
</form>

Результат

Укажите ваш пол:
мужской женский

Кнопки

Существует четыре типа кнопок:

  • submit — кнопка отправки содержимого формы web-серверу. Ее параметры:
    • type=»submit» — тип кнопки,
    • name — имя кнопки,
    • value — надпись на кнопке.
  • image — графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:
    • type=»image» — тип графической кнопки,
    • name — имя кнопки,
    • src — адрес картинки для кнопки.
  • reset — кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:
    • type=»reset» — тип кнопки очищения,
    • name — имя кнопки,
    • value — надпись на кнопке.
  • button — произвольная кнопка, ее действия назначаются вами с использованием языков программирования, т.е. сама она делать ничего не умеет. Ее параметры:
    • type=»button» — тип произвольной кнопки,
    • name — имя кнопки,
    • value — надпись на кнопке.
    • onclick — обработчик события — указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

Пример использования кнопок.

<form name="forma1">
<input type="submit" name="submit" value="Отправить">
<input type="image" name="button_img" src="button.gif">
<input type="reset" name="reset" value="Очистить">
<input type="button" name="button" value="Отправить">
</form>

Кнопки можно задавать и при помощи тегов <button> </button>. Возможности у таких кнопок несколько, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

  • type — тип кнопки, может принимать значения:
    • reset — кнопка очистки формы,
    • submit — кнопка отправки данных,
    • button — кнопка произвольного действия.
  • name — имя кнопки,
  • value — надпись на кнопке.

 

Поле для файлов

Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.

Пример.

<form name="forma1">
<input type="file" name="load" size="50">
</form>

 

Поле для ввода текста

Для больших текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами <textarea> </textarea> и имеет следующие параметры:

  • name — имя поля,
  • cols — ширина поля в символах,
  • rows — количество строк текста, видимых на экране,
  • wrap — способ переноса слов:
    • off — переноса не происходит,
    • virtual — перенос отображается, но на сервер поступает неделимая строка,
    • physical — перенос и на экране и при поступлении на сервер.
  • disabled — неактивное поле,
  • readonly — разрешено только чтение.

Пример.

<textarea cols="35" rows="3" wrap="virtual"></textarea><br>

Результат

Раскрывающиеся списки

Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задаются и те, и другие с помощью тегов <select> </select>, внутри которых располагаются элементы значений, заданных тегом <option>

Параметры этих тегов.

  • <select>:
    • name — имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.
    • size — определяет количество видимых элементов в списке: 1 — простой раскрывающийся список, больше 1 — список с полосой прокрутки.
    • multiple — разрешает выбор нескольких элементов списка.
  • <option>:
    • selected — им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов.
    • value — значение, которое будет отправлено серверу, если пункт выбран.

Пример.

<form name="forma1">
Какой язык вы хотите изучать:
<select name="language" size="1">
<option selected value="html">html
<option value="php">php
<option value="java">java
</select><br><br>
Какое время вы готовы на это потратить:<br>
<select name="time" size="3">
<option selected value="1">1 месяц
<option value="2">2 месяца
<option value="3">3 месяца
</select><br><br>
Какие дни недели для занятий вас устроят:<br>
(выбирайте с нажатой клавишей ctrl)<br>
<select name="day" size="7" multiple>
<option selected value="mon">понедельник
<option value="tue">вторник
<option value="wen">среда
<option selected value="thu">четверг
<option value="fri">пятница
<option value="sat">суббота
<option value="san">воскресенье
</select>
</form>

Результат

Какой язык вы хотите изучать:
Какое время вы готовы на это потратить:

Какие дни недели для занятий вас устроят:
(выбирайте с нажатой клавишей ctrl)

 

Можно использовать теги <optgroup> </optgroup>, позволяющие группировать элементы списка по каким-либо признакам. Например, мы хотим задать каталог сайтов в виде списка, тогда удобнее разбить его на группы по интересам. Для этого нужно поступить следующим образом

<form name="forma1">
Каталог сайтов:<br>
<select name="catalog" size="9">
<optgroup label="Компьютеры">
<option value="1">интернет</option>
<option value="2">мобильники</option>
<option value="3">hardware</option>
</optgroup>
<optgroup label="Работа">
<option value="4">вакансии</option>
<option value="5">трудоустройство</option>
<option value="6">резюме</option>
</optgroup>
<optgroup label="Дом">
<option value="7">здоровье</option>
<option value="8">красота</option>
<option value="9">дети</option>
</optgroup>
</select>
</form>
Каталог сайтов:
 Замечание.В данном случае необходимо указывать закрывающие теги </option>.

Надписи

Все элементы формы можно связать с их надписями при помощи элемента <label> и его параметра for, значением которого является имя элемента, с которым связываем надпись. Например.

<form name="forma1">
<label for="load">Выбирайте файл: </label>
<input type="file" name="load" size="30">
</form>

Обобщающий пример

<form name="forma1">
<table border="0" cellspacing="5" cellpadding="5">
<caption>Форма регистрации</caption>
<tr> <td align="right" valign="top">Имя</td>
<td><input type="text" name="name" size="25"></td> </tr>
<tr> <td align="right" valign="top">e-mail</td>
<td><input type="text" name="e-mail" size="25"></td> </tr>
<tr> <td align="right" valign="top" >Пароль</td> <td>
<input type="password" name="password" size="25"> </td> </tr>
<tr> <td align="right" valign="top" >Повтор пароля</td> <td>
<input type="password" name="password2" size="25"> </td> </tr>
<tr> <td align="right" valign="top" >Пол</td> <td>
<input type="radio" name="sex" value="man" checked> мужской
<input type="radio" name="sex" value="woman"> женский </td> </tr>
<tr> <td align="right" valign="top">Используемые Вами биржи ссылок</td>
<td><select name="hobby" size="5" multiple>
<option selected value="1">Sape
<option value="2">FatLink
<option value="3">XAP
<option value="4">MainLink
<option value="5">LinkFeed
</select> </td> </tr>
<tr> <td align="right" valign="top">Ваши пожелания</td>
<td> <textarea cols="30" rows="3" wrap="physical">
</textarea> </td> </tr>
<tr> <td align="right" colspan="2">
<input type="submit" name="submit" value="Отправить">
<input type="reset" name="reset" value="Очистить"> </td> </tr>
</table>
</form>
Форма регистрации
Имя
e-mail
Пароль
Повтор пароля
Пол мужской женский
Используемые Вами биржи ссылок
Ваши пожелания

Новые возможности форм в html5 показаны в статье Новые возможности форм

Поделиться:
  • Добавить ВКонтакте заметку об этой странице
  • Мой Мир
  • Facebook
  • Twitter
  • LiveJournal
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • StumbleUpon
  • Technorati
  • БобрДобр
  • Memori.ru
  • МоёМесто.ru

Один комментарий к “HTML. Работа с формами”

Комментарии закрыты.