Вернуться ко всем статьям
Как сделать HTML-форму
Подавляющее большинство современных сайтов имеют те или иные формы: регистрация, обратная связь, комментарии, поиск и другие.
HTML-формы — элементы интерфейса сайта, служащие основным способом отправки данных пользователя на сервер для последующей обработки.
В HTML коде форма определяется парным тегом:
<form>...</form>
Внутри него заключаются элементы формы, основным из которых является <input>: он создаёт поле для ввода информации пользователем. Тип поля будет меняться в зависимости от выбранного вами значения атрибута type, заданного для этого элемента. Благодаря данному атрибуту вы можете создать поля текстового ввода для различных типов информации: кнопки, чекбоксы, регуляторы, переключатели. Также на сайте должен присутствовать обработчик формы: чаще всего отдельная страница сайта, которая при помощи скрипта обрабатывает полученные данные.
Рассмотрим, как сделать HTML-форму на примере формы регистрации с необходимыми параметрами: имя, фамилия, пол, дата рождения, кнопка отправки данных.
1. Обозначьте форму парным тегом <form> и вставьте поля текстового ввода для Имени и Фамилии.
<form>
Имя: <input type = "text" name = "firstname" value = "Введите Ваше имя"> <br>
Фамилия: <input type = "text" name = "lastname" value = "Введите Вашу фамилию"> <br>
</form>
2. Добавьте переключатель с возможностью выбора пола.
Мужчина <input type = "radio" name = "sex" value = "male" checked>
Женщина <input type = "radio" name = "sex" value = "female"> <br>
3. При помощи значения date создайте поле ввода даты рождения.
Дата рождения <input type="date">
4. Добавьте кнопку отправки данных на сервер.
<input type = "submit" name = "submit" value = "Отправить">
В результате вы получите следующий код формы:
<form>
Имя: <input type = "text" name = "firstname" value = "Введите Ваше имя"> <br>
Фамилия: <input type = "text" name = "lastname" value = "Введите Вашу фамилию"> <br>
Мужчина <input type = "radio" name = "sex" value = "male" checked>
Женщина <input type = "radio" name = "sex" value = "female"> <br>
Дата рождения <input type="date"> <br>
<input type = "submit" name = "submit" value = "Отправить">
</form>
Отдельно рассмотрим, как сделать опрос в HTML. Они создаются при помощи форм, о которых мы уже говорили ранее.
В первую очередь при создании опроса определите, в какой форме будут предоставляться ответы. В зависимости от этого в коде будет меняться только значение атрибута <type>:
1. "text" для опроса со свободным вводом вариантов ответа.
2. "radio" для опроса с выбором одного варианта.
3. "checkbox" для опроса с множественным выбором.
Рассмотрим, как сделать опрос в HTML на примере опроса с множественным выбором.
1. Обозначьте форму парным тегом <form>, укажите обработчик формы и задайте вопрос.
<form action="my.php">
Выберете страны, в которых вы были: <br>
</form>
2. Укажите варианты ответа, применив соответствующее значение атрибута <type>.
<input type = "checkbox" name = "type1" value = "Turkey">Турция<br>
<input type = "checkbox" name = "type2" value = "Poland">Польша<br>
<input type = "checkbox" name = "type3" value = "USA">США<br>
<input type = "checkbox" name = "type4" value = "Egypt">Египет<br>
<input type = "checkbox" name = "type5" value = "Thailand">Таиланд<br>
3. Добавьте кнопку отправки данных на сервер.
<input type = "submit" name = "submit" value = "Ответить">
В результате вы получите следующий код формы:
<form action="my.php">
Выберете страны, в которых вы были: <br>
<input type = "checkbox" name = "type1" value = "Turkey">Турция<br>
<input type = "checkbox" name = "type2" value = "Poland">Польша<br>
<input type = "checkbox" name = "type3" value = "USA">США<br>
<input type = "checkbox" name = "type4" value = "Egypt">Египет<br>
<input type = "checkbox" name = "type5" value = "Thailand">Таиланд<br>
<input type = "submit" name = "submit" value = "Ответить">
</form>
