Каждый раз, когда необходимо получить от пользователя какие-либо данные, будь то данные для регистрации на сайте, или просто логин и пароль для входа в личный кабинет, или простейший поиск по сайту, нам необходимо использовать форму с полями ввода данных.
После отправки данных из формы их обрабатывает сервер и делает ряд действий, предусмотренный программистом: зарегистрировать пользователя, создать сообщение на форуме, отправить письмо и так далее.
Тег form
Для создания формы необходимо использовать парный тег form, внутри которого размещаются поля формы. При этом нужно помнить, что у тега formесть два важных атрибута:
- action задаёт адрес к обработчику формы;
- method задаёт метод отправки формы.
Для отправки формы обычно используют методы get или post. Если не указать атрибут method, то будет использован get.
Метод get посылает данные формы в строке запроса, то есть они видны в адресной строке браузера и следуют после знака вопроса. Его лучше использовать в поисковых формах, потому что он позволяет получить ссылку на результаты поиска и передать её кому-то.
Метод post посылает данные в теле HTTP-запроса и используется, когда нужно отправить много данных и ссылка на результат обработки этих данных не нужна. Например, при редактировании личного профиля.
Тег input
Большинство полей форм создаётся с помощью одиночного тега input. У этого тега два обязательных атрибута:
- type задаёт тип поля;
- name задаёт имя поля.
Тип поля влияет на то, как оно будет отображаться и вести себя. Самый распространённый тип - это text, который обозначает текстовое поле. Он же используется по умолчанию. Имя поля нужно, чтобы правильно обработать данные на сервере. Обычно, имя поля должно быть уникальным в пределах формы, хотя есть исключения. Для задания имени поля используют латинские буквы и цифры.
При задании в атрибуте type со значением password создается поля для ввода пароля, которое отличается от обычного текстового тем, что все символы «скрываются».
Тег input , в котором атрибуту type присвоено значение submit, превращается в кнопку для отправки данных на сервер. Надпись на кнопке можно задать с помощью атрибута value.
Поле-галочку можно создать при помощи тега input с типом checkbox. Галочка работает по принципу «либо да, либо нет». Если галочка стоит, то браузер посылает переменную с именем поля на сервер, если галочки нет, то не посылается ничего. Чтобы галочка стояла по умолчанию, нужно добавить к тегу атрибут checked. Чекбокс не подразумевает выбор одного элемента из нескольких. Поэтому если в одной форме есть несколько чекбоксов, то имена у них должны быть разными.
Поле-переключатель - это тег input с типом radio. Обычно переключатели размещают группами по несколько штук. Причём у переключателей из одной группы должно быть одинаковое имя и разные значения, которые задаются c помощью value. Т.е. атрибут value является для переключателей обязательным. Браузер отправляет на сервер значение value выбранного переключателя.
Поле для загрузки файлов - это тег input с типом file. Для этого поля обязательным атрибутом является имя. Чтобы поле заработало и браузер смог передать выбранный файл на сервер, необходимо добавить форме атрибут enctype со значением multipart/form-data. Кстати, внешний вид таких полей очень сильно отличается в зависимости от операционной системы и очень плохо изменяется с помощью стилей.
Еще про атрибуты для элементов формы
Если вы хотите создать «подсказку» о том, что необходимо вводить в текстовом поле, то вам поможет атрибут placeholder.
Атрибут value имеет несколько назначений в зависимости от типа поля ввода данных:
- для текстового поля ввода value устанавливает значение поля по умолчанию;
- для кнопок – задает название кнопки;
- для полей с типами checkbox и radio – значение полей, которые будут переданы на сервер при выборе этих полей.
Атрибут checked для типов полей checkbox и radio устанавливают отметка поля по умолчанию.
Атрибут disabled блокировка поле ввода данных.
Установка атрибута required перед отправкой на сервер «проверяет» поле ввода на пустоту или правильное заполнение.
Скрытое поле
Ещё одно полезное поле - это скрытое поле. Его используют, когда в форме нужно отправить какие-то дополнительные служебные данные, которые не вводятся пользователем. Скрытое поле - это тег input с типом hidden.
Раскрывающийся список
Раскрывающийся список так же, как и переключатель, позволяет выбрать один вариант ответа из нескольких. Он создаётся при помощи парного тега select, группирующего варианты ответов, представленные парными тегами option.
Например:
<select name="fruits">
<option value="apple">Яблоко</option>
<option value="limon">Лимон</option>
<option value="banan">Банан</option>
</select>
В атрибуте value тега option задаётся значение варианта ответа, а внутри этого тега располагается подпись варианта ответа.
Если при отправке формы у выбранного варианта задан value, то на сервер отправится значение этого атрибута. В противном случае будет отправлен текст подписи.
Раскрывающийся список можно превратить в так называемый «мультиселект», то есть список, в котором можно выбрать не один, а несколько вариантов. Чтобы сделать это, нужно добавить к тегу select атрибут multiple. Высоту мультиселекта можно изменять с помощью атрибута size. Чтобы отметить как выбранные по умолчанию одно или несколько значений, нужно к соответствующим тегам option добавить атрибут selected.
Многострочное текстовое поле создаётся с помощью парного тега textarea. У него есть атрибуты name и id, которые аналогичны атрибутам текстового поля.
При помощи свойства css resize для многострочного поля ввода текста можно указать разрешенное направление (горизонтально, вертикально или в обе стороны) изменения размеров поля ввода текста.