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-формах подходит к концу. Задавайте ваши вопросы в в комментариях.
8 комментариев к записи “Формы HTML”
Здравствуйте
Изучил HTML,CSS, буду создавать программы и сайты
Здравствуйте. Желаю удачи!
Мне понравилась эта работа
Я рад.
Не понял куда будет отправляться из данной формы сообщение? где указать адрес своей почты?
Данные, которые вводит пользователь в форму, отправляются на почту с помощью серверного языка программирования, чаще всего PHP. HTML всего лишь создает поля формы. Я дополню статью как будет время.
Чисто проверить, как работает ваша форма