HTML-формы это набор элементов управления который позволяет сделать документ интерактивным. Как правило, формы используются для отправки на сервер какой-либо информации, например форма обратной связи на сайте.

Элементы управления это кнопки, текстовые поля и так далее. С появлением HTML5 форм и элементов управления в HTML стало больше. В этой статье я рассмотрю различные формы и элементы управления. Итак, начинаем.

Форма обратной связи в HTML

Давайте для примера создадим наиболее полную форму обратной связи в которой будут кнопки, текстовое поле, возможность загрузки файла и не только, итак обо всем по порядку.

Тег <form> — создание формы

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

Итак, наш первый код.

<form action="/" method="post">

</form>

У тега <form> есть два обязательных атрибута:

• action — ссылка на скрипт, обычно PHP, который будет обрабатывать форму. А точнее, который будет обрабатывать введенные  форму данные.
• method — метод отправки данных на сервер (GET или POST).

Подробности вы сможете найти на этом сайте, но сейчас вернемся к самой форме.

Форма для ввода текста

В нашей форме должно быть поле для ввода текста. Оно создается с помощью тега <textarea>. Добавим к нашей пустой форме поле ввода текста.

<form action="/" method="post">
<textarea></textarea>
</form>

Результат.

Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.

Для вставки пояснительного текста используется атрибут placeholder тега <textarea>.

Сделаем 100% ширину с помощью CSS.

textarea
{
  width:100%;
}

Получим следующую форму.

<form action="/" method="post">
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

 

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

Элемент <input> является универсальным, в отличии от элемента <textarea>. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.

Изменим нашу форму.

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

Уже лучше, давайте добавим поле с адресом электронной почты.

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<input type="email" placeholder="Введите ваш email"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

 

<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

Давайте немного изменим форму, а именно:

• Фон.
• Размер.
• Положение.

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

 

Ну что же, уже лучше. Не хватает кнопок.

Кнопки в HTML-форме

Добавим две кнопки:

• Отправить.
• Очистить.

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка отправки формы на сервер создается с помощью тега <button> (от англ. button — кнопка)  с типом submit (от англ. submit — разместить). Полный HTML-код  кнопки отправки формы на сервер: <button type="submit">Отправить</button>.

Кнопка очистки формы

Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: <button type="reset">Очистить</button>.

Давайте дополним нашу форму.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

Результат.

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Проверка заполнения формы

Валидация форм, или проверка заполнения — довольно важный момент при работе с сервером. Давайте разбираться как сделать простую проверку полей формы на заполнение.

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение" required></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

Попробуйте оставить часть полей не заполненными и нажать кнопку «Отправить».

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

<button formnovalidate type="submit">Отправить</button>.

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

<input  type="file" value="Выберите файл">

Дополним нашу форму. Создадим отдельную группу элементов.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
</fieldset>
</form>

Результат.

Выбор даты

Выбрать дату можно с помощью типа date все того же input’а. Полный код: <input type="date" />.

Добавим в нашу форму возможность выбора даты.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
</fieldset>
</form>

Результат.

Выпадающий список

Выпадающий список создается с помощью тега <select>, а элемент списка с помощью <option>. Давайте создадим в нашей форме возможность указать адресата.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
</fieldset>
</form>

Результат.

Переключатели

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Зависимый переключатель

Зависимый переключатель создается с помощью тега  input и его атрибута type=«radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"></label> 
<label>Укажите дату - <input type="date"></label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
<label>Отправить копию письма себе на почту?<input type="radio" name="primer">Да <input type="radio" name="primer">Нет</label>
<label>Каким образом направить вам ответ
<input type="checkbox" name="a" value="1" checked>>По электронной почте
<input type="checkbox" name="a" value="2">По почте на бумажном носителе
<input type="checkbox" name="a" value="3">Перезвонить по телефону
<label>
</fieldset>
</form>

Результат.

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.