Формы в HTML

Что такое форма

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

Формы связаны с работой сервера, и при изучении этой темы некоторые вещи могут быть пока непонятны. Но изучить формы всё равно нужно. Ведь это важная чать HTML. Формы есть на большинстве сайтов. И Вам нужно знать, как они работают.

Создание формы

HTML форма создаётся с помощью тэга <form>. Сам этот тэг не выводит на страницу никаких полей для ввода, кнопок и вообще ничего. Для этого существуют другие тэги. А тэг <form> объединяет в их в одну форму и отправляет данные из них на сервер.

Рассмотрим несколько важных атрибутов тэга <form>.

Атрибут action указывает файл, который запускается на сервере и получает данные из формы. Значением атрибута является путь к файлу.

Атрибут method устанавливает метод запроса. Чаще всего он имеет такие значения:

method="get"

method="post"

Пример HTML формы:

8 9<	<form action="myfile.php" method="post"> </form>

Форме можно задать имя. Это делается с помощью атрибута name. Имя формы должно быть уникальным. Оно используется для нахождения формы при работе скриптов.

Внутри тэга <form> размещаются элементы формы. Элементы формы - это различные поля для ввода, кнопки и другие способы, с помощью которых пользователь вводит информацию. Для создания элементов формы используются разные тэги. Рассмотрим их подробно.

Тэг <input>

Тэг <input> может выглядеть на странице по-разному в зависимости от типа. В том числе он может создавать разные поля для ввода. Типов тэга <input> достаточно много, поэтому он рассматривается в отдельной теме. А пока мы для примера создадим его на странице. Добавим его внутрь тэга <form>.

8
9
10

<form action="myfile.php" method="post">
<input name="login">
</form>

Атрибут name очень важен. Имя элемента формы передаётся на сервер вместе со значением. Данные отправляются на сервер в следующем виде:

имя = значение

Если в приведённом примере пользователь введёт в поле для ввода - Andrey, то на сервер будут отправлены данные в виде:

Если элементу формы не задать имя, то данные из этого элемента на сервер отправлены не будут.

Тэг <textarea>

Тэг <textarea> создаёт многострочное поле для ввода текста. От тэга <input> он отличается тем, что имеет размер в несколько строк. Если вводимый текст не помещается в поле, то у него появляется полоса прокрутки. Добавим <textarea> в форму:

10	<textarea name="inform"></textarea>

Атрибут name имеет тот же смысл, что и у тэга <input>.

Полю для ввода можно задать размеры. Для этого есть атрибуты cols и rows. Они устанавливают ширину и высоту поля в строках. Вместо этого можно использовать CSS.

Установим тэгу <textarea> размеры.

10	<textarea name="inform" cols="30" rows="10"></textarea>

Тэг <textarea> является парным. Внутрь него можно пометсить текст, который сразу будет находится в поле для ввода. Пользователь при желании может его удалить.

10	<textarea name="inform" cols="30" rows="10">Текст</textarea>

У тэга <textarea> есть и другие атрибуты. Их Вы можете найти в справочниках.

Тэг <select>

Тэг <select> создаёт список, в котором пользователь выбирает один из пунктов. Каждый пункт создаётся с помощью тэга <option>. Пример:

11
12
13
14

<select name="punkt">
  <option value="p1">Первый пункт</option>
  <option value="p2">Второй пункт</option>
</select>

У тега <select> есть атрибут name, который используется так же, как у других элементов формы. Имя элемента отправляется в виде данных на сервер. А значение берётся из атрибута value того пункта, который выбрал пользователь. Если в приведённом примере пользователь выберет первый пункт, то на сервер отправятся данные в таком виде:

punkt=p1

Если у какого-то пункта списка есть атрибут selected, то этот пункт является выбранным по умолчанию. Никакого значения этому атрибуту устанавливать не нужно, его просто нужно указать в тэге.

Если высота списка не указана, то список имеет высоту в одну строку. Высота меняется с помощью атрибута size. При этом внешний вид списка зависит от его высоты. Если список имеет высоту в одну строку, то он имеет вид раскрывающегося списка. Если высота больше одной строки, то список отображается в виде блока. Ширина списка соответствует ширине самого большого пункта. Её также можно изменить с помощью CSS.

Изменим высоту списка. Посмотрите, как при этом изменится его внешний вид.

11	<select name="punkt" size="2">

Другие атрибуты тэгов <select> и <option> Вы можете найти в справочниках.

Тэг <label>

Тэг <label> можно использовать для каких-то пояснений внутри формы. Для примера добавим пояснение к тэгу <input>, который мы создавали ранее.

9	<label>Login:</label><input name="login">

Но в таком виде это просто текстовый тэг. Основная функция тэга <label> состоит в том, чтобы связывать пояснение с элементом формы. Пользователь может нажать на текст, и это соответствует нажатию на элемент формы. Это используется тогда, когда элемент формы имеет маленький размер и нажимать на него неудобно.

Чтобы связать элемент формы с текстом, его нужно поместить внутрь тэга <label>. Изменим 9 строку так, чтобы тэг <input> был связан с пояснением:

9	<label>Login:<input name="login"></label>

Нажмите на странице на слово "Login", поле для ввода окажется в фокусе.

Отправка формы

Чтобы отправить данные на сервер, пользователь должен нажать на кнопку с типом submit. Для её создания можно добавить в форму тэг <input> и установить ему тип submit.

Добавим в форму кнопку отправки данных на сервер:

15	<input type="submit" value="Отправить">

Атрибут value содержит текст, который отображается на кнопке.

Когда пользователь нажимает на кнопку, данные из формы отправляются на сервер. На сервере запускается файл, который указан в атрибуте action тэга <form>. Этот файл получает данные из формы.

Автофокус

Любому элементу формы можно установить атрибут autofocus. Ему не нужно указывать значение, он просто указывается в тэге. Элемент, которому установлен этот атрибут, оказывается в фокусе после загрузки страницы. Атрибут работает не во всех браузерах.