Весь интерактив — поля ввода, флажки, переключатели, раскрывающиеся списки, кнопки — это веб-формы и их элементы. В форме вы оставляете комментарий, с помощью формы регистрируетесь, через форму авторизуетесь, пользуетесь формой поиска, голосуете в опросах, загружаете файлы, оформляете подписки — всё это вы делаете с помощью веб-форм.
Внутреннее устройство
Фактически форма состоит из двух частей: визуального оформления и скрипта, который обрабатывает введённые данные. Чтобы написать скрипт, нужно владеть одним из языков программирования. Мы здесь их изучением не занимаемся, поэтому будем разбирать 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="c1">Гость</option><option value="c2">Администратор</option></select> — создаём простой раскрывающийся список из двух пунктов.
<input name="save" type="checkbox" value="yes"> Запомнить — добавляем флажок и пишем поясняющий текст.
<br><input type="submit" name="enter" value="Вход"> — создаём кнопку, нажатие которой запускает процесс обработки данных.
</form> — закрываем форму.
В браузере веб-форма будет выглядеть, как на рисунке ниже.
Её можно заполнять, но чтобы она начала работать, необходимо написать код и сохранить его в файле script.php рядом с HTML-страницей.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
А я начал изучать html и формы, но так и не дошел до них.