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

Давайте начнем с формы, в которую пользователю нужно записать город своего проживания. В элементе подписи будет находиться наш вопрос к пользователю, который мы хотим, чтобы он прочитал. После этого будет располагаться поле ввода текста, которое пользователю нужно будет заполнить. Обратите внимание, <input /> — это самозакрывающийся тег, как и тег изображения <img />, так как он создает собственное содержимое и не может содержать других элементов.

В результате получим следующую запись:

<label for="city">Город</label> <input type="text" name="city" id="city">

Обратите внимание на то, что атрибут названия в окне для текста ни с чем не связан: это просто название, данное этому поля ввода текста для использования в PHP. Идентификатору задано то же значение, что и названию, и оно обрабатывается в JavaScript, HTML и CSS. Название должно быть уникальным словом, отвечающим обычным правилам наименования.

Атрибут размера определяет, сколько символов может быть показано в поле ввода текста на экране. Для создания плотных, красиво выглядящих форм нужно задать разумное значение атрибута размера, например, 25 для всех полей ввода текста, кроме адресов и особых форм ввода. Либо можно задать размер поля ввода текста с помощью кода CSS, например, используя селектор атрибута:

input[type="text"] {
        width: 12em;
}

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

<input type="text" name="city" id="city" pattern="[a-zA-Z]{2,30}" required>

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание простых media queries для печати
• Эффекты прописных и строчных букв с использованием JavaScript или CSS
• Создание эффекта набора текста