Текстовые поля форм в HTML. Как осуществить настройку ввода данных?

текстовые поля форм в html. как осуществить настройку ввода данных?

Поле ввода однострочного текста

HTML определяет два вида полей, отвечающих за ввод текстовых данных. Элемент <textarea> используется для написания многострочного текста, а <input> принимает лаконичную информацию, которая может вместиться в одной строке (Ф.И.О, адрес юридического лица, номер телефона и т.п.).

Эти элементы имеют много дополнительных атрибутов, которые изменяют способы взаимодействия с полем, и накладывают ограничения на вводимый текст. Элемент <textarea> станет предметом рассмотрения следующей статьи, а сейчас мы подробно изучим поле <input> и его возможности по обработке однострочных текстовых данных.

Элемент <input> является самым многозадачным в HTML. Различные значения атрибута type кардинальным образом меняют его поведение. Он может отвечать за выбор и загрузку файлов, ввод даты, выбор цвета из палитры, и многое другое. Мы рассмотрим только те значения, которые преобразуют его в поле для ввода текста.

Список значений атрибута type:

  • text — Основной тип текстового поля. Является универсальным и, по сути, можно использовать только его, не обращая внимание на остальные.
  • password — Ввод пароля. Все символы в таком поле будут отображены с помощью звездочек «*». Это необходимо для предотвращения подглядывания за набираемым текстом.
  • url — Ввод универсального указателя ресурса (адрес сайта). Например, https://coder-booster.ru.
  • email — Адрес электронной почты.
  • search — Текст, участвующий в поиске.
  • tel — Поле телефонного номера.
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример создания текстовых полей формы</title>
    </head>
    <body>
        <form>
            <!-- текстовые поля ввода -->
            <input type="email" placeholder="Логин">
            <input type="password" placeholder="Пароль">

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>

В чем различие типов полей

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

У современных смартфонов отсутствуют буквенные клавиши. При нажатии на текстовом поле ввода появляется виджет клавиатуры. В зависимости от атрибута type элемента <input>, содержимое этого виджета будет отличаться. К примеру, нажав на поле ввода адреса электронной почты, виджет переключится на английский язык и будет содержать все символы, участвующие в формировании стандартного Email-адреса.

Блокирование содержимого поля

Элемент <input> можно заблокировать для редактирования. В HTML есть атрибут disabled. Его использование окрасит поле ввода в серый цвет, а при отправке формы данные не будут включены в тело запроса.

Атрибут readonly обладает схожим поведением. Его добавление не вызовет закрашивание поля серым цветом, но текстовое содержимое станет недоступным для редактирования. В отличие от атрибута diasbled, данные из такого текстового поля будут включены в тело запроса при отправке.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример блокировки полей от редактирования</title>
    </head>
    <body>
        <form>
            <!-- текстовые поля ввода -->
            <label>
                <span>Ваш любимый цвет:</span><br>
                <input disabled type="text" value="Зеленый">
            </label><br><br>

            <label>
                <span>Направление музыки:</span><br>
                <input readonly type="text" value="Post-Rock">
            </label><br><br>

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

Значения и подсказки текстовых полей

Поля могут иметь некоторые предустановленные значения. Совсем не обязательно дожидаться ввода текста от пользователя. Для установки содержимого необходимо использовать атрибут value. Если пользователь не изменит предустановленные значения, при отправке они будут включены в тело запроса как есть.

HTML также позволяет помочь пользователю с помощью подсказок. Значение атрибута placeholder будет показано светло серым цветом внутри поля ввода, если оно является пустым. Когда пользователь начнет добавление текста – подсказка исчезнет.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример установки значений и подсказок</title>
    </head>
    <body>
        <form>
            <!-- текстовые поля ввода -->
            <label>
                <span>Желаемая должность:</span><br>
                <input type="text" value="Веб-дизайнер">
            </label><br><br>

            <label>
                <span>Контактные данные:</span><br>
                <input type="tel" placeholder="Телефон">
                <input type="email" placeholder="Email">
            </label><br><br>

            <!-- кнопка отправки формы -->
            <input type="submit" value="Отправить">
        </form>
    </body>
</html>
Предустановленные значения текстовых полей в HTML
рис 2. Показ предустановленных значений и подсказок

Процесс отправки и проверка данных

Атрибут name указывает уникальное имя текстового поля. Он является не обязательным, но в случае отсутствия, значение не будет включено в тело запроса при отправке формы. Как правило, он задается короткой фразой, характеризующей содержимое.

HTML позволяет осуществлять проверку введенных данных. Если они не будут соответствовать требованиям, при нажатии кнопки отправки, форма выведет сообщения об ошибках и потребует исправлений.

Специальный атрибут required обязывает поле иметь значение. Если пользователь оставит его пустым, отправка формы не состоится. Существует возможность и более сложных проверок текстовых полей. Атрибут pattern указывает в своем значении регулярное выражение, по правилам которого будет производиться проверка данных. Значение «[0-9]{5,10}» соответствует только числам, содержащим от пяти до десяти цифр.

Вы можете ограничить количество вводимых символов с помощью атрибута maxlength. В его значении должно находиться число. При попытке добавить большее количество символов в текстовое поле, их ввод будет заблокирован.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Проверка данных при отправке формы</title>
    </head>
    <body>
        <form>
            <!-- текстовые поля ввода -->
            <label>
                <span>Имя:</span><br>
                <input required maxlength="60" name="username" type="text">
            </label><br><br>

            <label>
                <span>Год родения:</span><br>
                <input required pattern="[0-9]{4}" name="birth" type="text">
            </label><br><br>

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

Заметка
Атрибуты required и pattern не работают в браузере Safari. Если вы хотите выполнять полную проверку данных, которая будет работать во всех браузерах, нужно использовать JavaScript.

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