Создание веб-формы в HTML. Какие типы полей она может содержать?

создание веб-формы в html. какие типы полей она может содержать?

Для чего нужны формы?

HTML – это язык разметки. В его задачи входит формирование представления данных. Он не может самостоятельно реализовать динамическое взаимодействие с пользователем. Например, менять цвет фона страницы при клике на каком-нибудь элементе. Для этого существует специальный язык программирования JavaScript, встроенный в браузер.

Однако создатели HTML наделили его возможностями по обработке пользовательского ввода, и отправке этих данных на сервер. Это, безусловно, фундаментальная вещь, без которой не мог бы обойтись ни один сайт. Реализуется такое поведение за счет создания форм и их полей. Вы не раз встречались с этими элементами. С помощью HTML-форм создаются блоки обратной связи, текстовые поля комментирования статей, загрузка изображений в личном кабинете социальной сети и многое другое.

Создание формы и полей

Создание формы происходит с помощью элемента <form>. Между его открывающим тегом <form> и закрывающим </form> должны располагаться дополнительные элементы, отвечающие за обработку ввода пользовательских данных. Эти элементы также называют полями формы. К созданной форме, по умолчанию, не применяется никакой стилизации. Если вы не добавите ни одного поля, то даже не заметите её присутствие на странице.

К полям формы относятся следующие элементы:

  • <input> - Самый гибкий и многозадачный из всех типов полей. Отвечает за ввод даты, выбор цвета, ввод однострочного текста или пароля, выбор файла для загрузки на сервер, создание кнопки отправки формы и т.д.
  • <textarea> - Поле ввода многострочного текста. Часто используется для обработки большого количества текстовых данных. Например, тела электронного сообщения.
  • <select> - Выбор элементов из выпадающего списка. Например, месяц бронирования номера в отеле.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания формы с полями ввода</title>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Бронирование номера</legend>

                <!-- текстовые поля ввода -->
                <input type="text" placeholder="Ф.И.О">
                <input type="tel" placeholder="Телефон"><br><br>
                <input type="text" placeholder="Дата заезда">

                <!-- выпадающий список -->
                <select>
                    <option value="month">Одноместный</option>
                    <option value="month">Двухместный</option>
                    <option value="month">Люкс</option>
                </select><br><br>

                <!-- кнопка отправки формы -->
                <input type="submit" value="Забронировать">
            </fieldset>
        </form>
    </body>
</html>
пример отображения html-формы в браузере
рис 1. Отображение полей созданной формы в браузере Google Chrome.

Обратите внимание, в примере, приведенном выше, все поля формы помещены внутри элемента <fieldset>. Он выполняет группировку полей, обрамляя их границей. Если внутри <fieldset> поместить элемент <legend> с текстовым содержимым, то оно будет отображено как заголовок группы.

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

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

Дополнительные атрибуты

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

Список базовых атрибутов:

  • autocomplete — Реализует автоматическое дополнение полей формы. Может иметь два значения: off или on (установлено по умолчанию). Если значение установлено в on, то при последующих взаимодействиях пользователя с полями, ему предлагаются варианты ранее вводимых данных.
  • name — Уникальное имя формы. Может быть важен при программной обработке через JavaScript. В остальных случаях его указание не обязательно.
  • novalidate — В форме могут присутствовать поля, отвечающие за ввод телефонного номера, электронного адреса, или имеющие атрибут проверки. Если он присутствует, данные будут отправлены как есть, без проверок и возможности отмены отправки в случае некорректности.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>использование базовых атрибутов формы</title>
    </head>
    <body>
        <form autocomplete="off" name="test-form" novalidate>
            <!-- поля и содержимое формы -->
        </form>
    </body>
</html>

Последние публикации