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-формах подходит к концу. Задавайте ваши вопросы в в комментариях.
13 комментариев к записи “Формы HTML”
Здравствуйте
Изучил HTML,CSS, буду создавать программы и сайты
Здравствуйте. Желаю удачи!
Мне понравилась эта работа
Я рад.
Не понял куда будет отправляться из данной формы сообщение? где указать адрес своей почты?
Данные, которые вводит пользователь в форму, отправляются на почту с помощью серверного языка программирования, чаще всего PHP. HTML всего лишь создает поля формы. Я дополню статью как будет время.
Чисто проверить, как работает ваша форма
Доброго дня. Так вы сделали статью для проверки данного кода HTML? Хочется проверить. Заранее, спасибо.
Здравствуйте. Не совсем понял ваш вопрос. Это обучающая статья.
Спасибо за руководство!
Здравствуйте!
Подскажите код (или готовый плагин) простейшей формы обратной связи (без отправки на почту) с сохранением сообщений на отдельную страницу сайта. [имя_сайта.ru/заявки/заявки_дата.html]
Спасибо!
Здравствуйте. Подобными плагинами не пользовался. Поищите готовые скрипты, код писать сейчас некогда.