базовый курс

ГРУППА КУРСА

Формы в HTML

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

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

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

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

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

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

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

Атрибут method устанавливает метод запроса. Может принимать значения:

method="get"

method="post"

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

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

</form>

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

Тэг <input>

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

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

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

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

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

login=Andrey

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

Тэг <textarea>

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

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

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

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

Установим тэгу <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. Ещё одним примером отправки HTML формы на сервер является нажатие клавиши Enter на клавиатуре, когда один из элементов формы находится в фокусе.

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

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

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

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

Автофокус

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