Формы на сайте.


Формы используют для ввода сообщений, регистрации посетителей на сайте, проведения опросов и т.д.

HTML-формы позволяют только вводить информацию, а вот обрабатывать ее будут программы такие, например, как javascript, php и другие.

Html форма задается тегами <form></form>. Все остальные элементы формы располагаются между ними.

У тега <form> имеются параметры:
  • name - имя формы.
  • action - URL-адрес, по которому будет отправлена информация введенная пользователем
  • method - способ отправки информации
  • target - имя окна, в котором будут отображаться результаты обработки отправленной формы

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


Простое поле, в которое можно вводить и редактировать текст задается тегом <input>

Пример записи кода:
<form name="forma1"> <input type="text" name="text1" size="20" maxlength="60" value="Введите текст"> </form>

РЕЗУЛЬТАТ:

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

Могут использоваться такие параметры:

  • disabled - блокирует поле от любых изменений,
  • readonly - делает поле доступным только для чтения.

Пример записи кода:

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

РЕЗУЛЬТАТ:


Поле для ввода пароля


Поле такое же, как и в предыдущем примере. Различие в том, что текст вводится специальными символами. Такое поле чаще всего используется для ввода паролей. Параметры такие же, кроме параметра type="password".

Пример записи кода:

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

РЕЗУЛЬТАТ:

Введите пароль:

Попробуйте ввести что-нибудь в этом поле.

Флажки


Рассмотрим вот такую форму опроса.

Пример записи кода:

<form name="forma1"> Каким видом транспорта вы предпочитаете путешествовать:<br> <input type="checkbox" name="transport" value="airplane" checked>самолет<input type="checkbox" name="transport" value="train"> поезд <input type="checkbox" name="transport" value="car"> автомобиль<input type="checkbox" name="transport" value="автобус"> автобус </form>

РЕЗУЛЬТАТ:

Каким видом транспорта вы предпочитаете путешествовать:
самолет поезд автомобиль автобус
Параметры:

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

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


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

Пример записи кода:

<form name="forma1"> Каким видом транспорта вы предпочитаете путешествовать:<br> <input type="radio" name="transport" value="airplane"checked>самолет <input type="radio" name="transport" value="train">поезд </form>

РЕЗУЛЬТАТ:

Каким видом транспорта вы предпочитаете путешествовать:
самолет поезд

Далее рассмотрим: Продолжаем изучать формы.