Весь интерактив — поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки — это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки — всё это вы делаете с помощью веб-форм.
Внутреннее устройство
Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать HTML-составляющую — учиться создавать интерфейс формы, предполагая, что где-то у нас уже есть обрабатывающий её скрипт.
HTML-форма создаётся с помощью парного тега <form> , внутри которого располагаются теги её элементов.
Теги
Перед тем, как показывать примеры, пройдёмся по тегам.
<form> . Создаёт форму. Если сравнивать форму с таблицей, то тег <form> выполняет ту же роль, что и тег <table> . К нему прилагаются следующие атрибуты.
- action . Адрес скрипта или документа, который обрабатывает данные формы. В качестве значения указывается URL.
- method . Метод передачи данных обработчику. Можно указать GET (по умолчанию) или POST. GET подразумевает передачу данных в виде части URL. Возможно, вы видели в адресах что-то вроде ?id=225. Это оно и есть. Метод POST работает по-другому, а потому передаваемые данные от пользователя скрыты. Он более безопасен, позволяет передавать больше информации, в том числе и файлы. Но всё это больше касается программирования, нежели HTML-разметки.
- accept-charset . Устанавливает кодировку.
- autocomplete . Включает (on) или отключает (off) автозаполнение форм, когда браузер сам подсказывает вам, что вводить, основываясь на том, что вы набирали в прошлый раз. Отключать функцию имеет смысл для конфиденциальных форм, чтобы обозреватель ненароком не показал важных данных.
- name. Имя формы.
Есть и ещё атрибуты, но используются они крайне редко.
<input> . Интересный тег, с помощью которого можно создать любой элемент ввода, какой именно — задаётся атрибутом type. Строго говоря, этот тег можно использовать и вне формы, но тогда вы не сможете указать адрес обработчика, и элемент страницы будет нефункциональным.
- type . Главный атрибут тега <input> , определяющий, как уже говорилось, тип элемента ввода. Значений у него так много, и они так важны, что хватило на целую таблицу (см. ниже).
Значение
Описание
button
Кнопка
checkbox
Флажки. С их помощью вы можете выбрать сразу несколько вариантов
file
Кнопка выбора файла
hidden
Скрытое поле, в браузере не отображается
image
Кнопка с картинкой
password
Поле для ввода пароля. Обычное текстовое поле, но вводимые символы скрываются за звёздочками (*)
radio
Переключатели. Почти флажки, но с их помощью можно выбрать только один из предложенных вариантов
reset
Кнопка сброса данных формы к первоначальным значениям
submit
Кнопка отправки данных на сервер. Обычно вы нажимаете их, чтобы подтвердить ввод — Сохранить, Применить, ОК
text
Текстовое поле
Множество новых значений появилось в HTML5, но они, к сожалению, пока (июнь 2016) поддерживаются только частично.
- autofocus . Фокус ввода будет по умолчанию устанавливаться на том элементе, для которого указан этот атрибут.
- checked . Установить флажок или радиокнопку по умолчанию.
- pattern . С помощью этого атрибута можно заставить пользователя ввести данные в определённом формате. Например, ввести только одну цифру от 0 до 9 или только буквы латинского алфавита (должно быть знакомо). Пока поле не будет заполнено правильно, данные формы не будут переданы на обработку.
- placeholder . Задаёт текст-подсказку.
- <select> . Контейнер, с помощью которого создаётся список. Это может быть раскрывающийся список либо список с одним или множественным выбором. За элементы списка отвечают теги <option> .
- size . Главное свойство, которое указывает количество отображаемых строк списка. Например, если значение равно 1, то список получается раскрывающимся, в противном случае получается либо список, все элементы которого сразу видны, либо список, по элементам которого можно перемещаться с помощью полосы прокрутки.
- multiple . Атрибут без значений. Укажите его, чтобы получить список со множественным выбором.
- required . Делает список обязательным для выбора, то есть пока пользователь не укажет в нём значение, форма не отправится. Часто так поступают со списком Пол в регистрационных формах.
- <option> . Тег элемента списка, используемый внутри <select> .
- value . Значение пункта списка для обработки скриптом.
- selected . Пункт с этим атрибутом по умолчанию будет выделен, как будто пользователь выбрал именно его.
- <optgroup> . Контейнер позволяет группировать элементы списка <option> .
- disabled . Делает группу списка недоступной для выбора (при этом она отображается другим цветом).
- label . Текст заголовка группы.
Пример формы
Теперь, когда все теги известны, создадим небольшую форму авторизации, данные которой обрабатывает файл script.php , находящийся в папке с HTML-страницей.
Код будет таким.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Форма</title>
</head>
<body>
<form method="get" action="script.php">
Логин:<br>
<input name="login" type="text" size="25" maxlength="30" value="Михаил"> <br>
<br>Пароль: <br>
<input name="pass" type="password" size="25" maxlength="30" value=""> <br>
<br>Кто вы?
<select>
<option value="c1">Гость</option>
<option value="c2">Администратор</option>
</select></p>
<input name="save" type="checkbox" value="yes"> Запомнить <br>
<br><input type="submit" name="enter" value="Вход">
</form>
</body>
</html>
Разберём некоторые его части.
<form method="get" action="script.php"> — создаём форму, обрабатываемую файлом script.php. Данные передаются методом GET.
< br > — тег перехода на следующую строку.
< input name =" login " type =" text " size ="25" maxlength ="30" value ="Михаил"> — создаём текстовое поле с именем login шириной в 25 символов. В качестве значения по умолчанию указываем Михаил, чтобы пользователю было понятно, что и как вводить.
< input name =" pass " type =" password " size ="25" maxlength ="30" value =""> — создаём поле ввода пароля (символы замещаются звёздочками). Ширина поля — 25, максимальная длина пароля — 30 символов.
< select >< option value =" c 1">Гость</ option >< option value =" c 2">Администратор</ option ></ select > — создаём простой раскрывающийся список из двух пунктов.
< input name =" save " type =" checkbox " value =" yes "> Запомнить — добавляем флажок и пишем поясняющий текст.
< br >< input type =" submit " name =" enter " value ="Вход"> — создаём кнопку, нажатие которой запускает процесс обработки данных.
</form> — закрываем форму.
В браузере веб-форма будет выглядеть, как на рисунке ниже.
Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php рядом с HTML-страницей.
