[4 Урок] Форма HTML

Наберитесь терпения, это будет большая статья, я верю в вас!❤️

Содержание статьи:

1. Основы HTML формы:

Ваша первая форма
Как структурировать HTML форму

2. Виджеты форм:

Стандартные виджеты формы

3. Валидация и подтверждение данных форм:

Отправка данных формы
Валидация данных форм

1️⃣ Основы HTML форм

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

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

Ваша первая форма

Основные тэги используемые в формах: <form>, <label>, <input>, <textarea>, and <button>.

Элемент <form>

Все HTML-формы начинаются с элемента <form>, например:

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

1. Атрибут action определяет местоположение (URL), куда должны отправляться собранные данные формы при ее отправке.
2. Атрибут method определяет, с каким HTTP-методом отправлять данные (это может быть «get» или «post»).

Элементы <label>, <input> и <textarea>

Наша контактная форма очень проста: часть для ввода данных содержит три текстовых поля, каждое из которых имеет метку. Поле ввода имени является основным однострочным текстовым полем, поле ввода электронной почты является однострочным текстовым полем, которое принимает только адреса электронной почты, а поле ввода сообщения является многострочным текстовым полем.

С точки зрения HTML-кода нам нужно что-то вроде следующего для реализации этих виджетов формы:

Элементы <div> предназначены для удобного структурирования нашего кода и облегчения стилизации (см. Далее в этой статье). Обратите внимание на использование атрибута for для всех элементов <label>; это формальный способ связать метку с виджетом формы. Этот атрибут ссылается на идентификатор соответствующего виджета.

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

В нашем простом примере мы используем text значения для первого ввода — значение по умолчанию для этого атрибута. Он представляет собой базовое однострочное текстовое поле, которое принимает любой вид ввода текста.
Для второго ввода мы используем значение email, которое определяет текстовое поле, принимающее только сформированный адрес электронной почты. Это превращает базовое текстовое поле в своего рода" интеллектуальное " поле, которое будет выполнять некоторые проверки данных, введенных пользователем. Он также предусматривает включение символа @ на клавиатуре по умолчанию на устройствах с динамическими клавиатурами. Подробнее о проверке формы вы узнаете в статье ниже.

И последнее, но не менее важное: обратите внимание на синтаксис <input> и < textarea>< / textarea>. Это одна из странностей HTML. Тег <input> является пустым элементом, что означает, что он не нуждается в закрывающем теге. <textarea> - это не пустой элемент, то есть он должен быть закрыт соответствующим конечным тегом. Это влияет на специфическую особенность HTML-форм: то, как вы определяете значение по умолчанию. Чтобы определить значение по умолчанию элемента <input>, вы должны использовать атрибут value следующим образом:

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

Элемент <button>

Разметка для нашей формы почти завершена; нам все еще нужно добавить кнопку, позволяющую пользователю отправлять свои данные, как только он заполнит форму. Это делается с помощью элемента <button>; добавьте следующее непосредственно над закрывающим тегом </form> :

Вы увидите, что элемент <button> также принимает атрибут type — он принимает одно из трех значений: submit, reset или button.

Щелчок по кнопке submit (значение по умолчанию) отправляет данные формы на веб-страницу, определенную атрибутом action элемента <form>.
Щелчок по кнопке reset немедленно сбрасывает все виджеты формы к их значению по умолчанию. С точки зрения UX, это считается плохой практикой.
Щелчок по кнопке button делает... ничего! Это звучит глупо, но это удивительно полезно для создания пользовательских кнопок с помощью JavaScript.

Сейчас у вас должна получиться вот такая форма:

О том как стилизовать форму, мы будем говорить дальше, пока можете добавить внутрь <head></head> тэг <style></style> и написать внутри вот такой код:

Как структурировать HTML-формы

Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.

Элемент <form>

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

Мы уже встречались с этим в предыдущей статье.

Элементы <fieldset> и <legend>

Элемент <fieldset> - это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок <fieldset>, добавив элемент <legend> сразу после открывающего тега <fieldset>. Текст элемента <legend> формально описывает назначение содержимого <fieldset>.

Различные вспомогательные технологии будут использовать <legend> как часть метки label всех элементов внутри <fieldset>. Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы <legend> перед произношением названия меток элементов.

Небольшой пример:

Общие HTML-структуры, используемые с формами

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

Как вы можете видеть в примерах, это обычная практика, чтобы обернуть метку и ее виджет с элементом <div>. элементы <p> также часто используются, как и списки HTML (последний наиболее распространен для структурирования нескольких флажков или переключателей).

В дополнение к элементу <fieldset> для структурирования сложной формы также широко используются HTML-заголовки (например, <h1>, <h2>) и секционирование (например, <section>).

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

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

Давайте воплотим эти идеи на практике и построим форму платежа. Эта форма будет содержать ряд типов виджетов, которые вы, возможно, еще не понимаете — не беспокойтесь об этом сейчас; вы узнаете, как они работают дальше. А пока внимательно прочитайте описания, следуя приведенным ниже инструкциям, и начните формировать представление о том, какие элементы оболочки мы используем для структурирования формы и почему.

1. Для начала сделайте локальную копию нашего пустого файла шаблона и CSS для нашей платежной формы в новом каталоге на вашем компьютере.

2. Прежде всего, примените CSS к HTML, добавив следующую строку внутри HTML <head>:

3. Затем начните свою форму с добавления внешнего элемента <form> :

4. Внутри тегов <form> начните с добавления заголовка и абзаца, чтобы сообщить пользователям, как отмечаются обязательные поля:

5. Далее мы добавим большую часть кода в форму, расположенную ниже нашей предыдущей записи. Здесь вы увидите, что мы оборачиваем поля контактной информации внутри отдельного элемента <section>. Кроме того, у нас есть набор из двух переключателей, каждый из которых мы помещаем в свой собственный элемент списка (<li>). Наконец, у нас есть два стандартных текста <input> и связанные с ними <label> элементы, каждый из которых содержится внутри <p>, а также ввод пароля для ввода пароля. Добавьте этот код в свою форму прямо сейчас:

6. Теперь перейдем ко второму <section> нашей формы-платежной информации. Здесь мы имеем три различных виджета вместе с их метками, каждый из которых содержится внутри <p>. Первый-это выпадающее меню (<select>) для выбора типа кредитной карты. второй-это элемент <input> типа number, предназначенный для ввода номера кредитной карты. Последний-это элемент <input> типа date, предназначенный для ввода даты истечения срока действия карты (этот элемент будет иметь виджет выбора даты в поддерживающих браузерах и вернется к обычному вводу текста в не поддерживающих браузерах). Опять же, введите следующее ниже предыдущего раздела:

7. Последний раздел, который мы добавим, намного проще, он содержит только <button> типа submit для отправки данных формы. Теперь добавьте это в нижнюю часть вашей формы:

2️⃣ Виджеты форм

Сейчас мы сосредоточимся на виджетах форм, встроенных в браузеры, но поскольку формы HTML остаюстся несколько ограниченными и особенности их реализации различаются для разных браузеров, веб-разработчики иногда создают собственные виджеты форм. ("Как создать собственную форму" позже в данном модуле для более подробного изучения.)

<input>

Все текстовые поля имеют общие атрибуты:

Они могут быть помечены как readonly (пользователь не может изменять начальное значение) или даже disabled начальное значение никогда не посылается вместе с остальными данными формами).
Они могут иметь атрибут placeholder; это текст, который появляется внутри теста поля формы и кратко описывает, для чего используется данная форма.
Существуют общие характеристики size (физический размер поля) и длину (максимальное количество символов, которые может ввести пользователь).
Они могут быть определены с помощью spell checking, если браузер поддерживает данную функцию.

<textarea>

Многострочное текстовое поле задается с помощью элемента <textarea>, а не с помощью элемента <input>.

Атрибуты <textarea>

Drop-down

Drop-down -это простой способ позволить пользователям выбрать один из многих вариантов, не занимая много места в пользовательском интерфейсе.

Поле выбора создается с элементом <select> с одним или несколькими элементами <option> в качестве его дочерних элементов, каждый из которых указывает одно из своих возможных значений.

По умолчанию поле выбора позволяет пользователю выбрать только одно значение. Добавляя атрибут multiple в элемент <select>, вы можете разрешить пользователям выбирать несколько значений, используя механизм по умолчанию, предоставляемый операционной системой (например, удерживая нажатой клавишу Cmd/Ctrl и щелкая несколько значений).

Поле автозаполнения

Вы можете предоставить предлагаемые автоматически заполненные значения для виджетов форм с помощью элемента <datalist> с некоторыми дочерними элементами <option>, чтобы указать значения для отображения.

Check box

check box создается с помощью элемента <input> с его атрибутом установленным в поле type="checkbox".

Radio button

Radio button создается с помощью элемента <input> с атрибутом установленным в type="radio".

Button

В HTML-формах существует три вида кнопок:

Submit - отправляет данные формы на сервер
Reset - Сбрасывает все виджеты форм к их значениям по умолчанию
Anonymous - Кнопки, которые не имеют автоматического эффекта, но могут быть настроены с помощью кода JavaScript. Если вы опустите атрибут type, это будет значение по умолчанию.

Submit

Reset

Anonymous

Продвинутые виджеты

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

Numbers

Виджеты для чисел создаются с помощью элемента <input>, а его атрибут type имеет значение number.

Ограничить значение можно при помощи атрибутов min и max
Так же можно задать "шаг" при помощи атрибута step

Sliders

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

Ползунок создается с помощью <input> с его атрибутом type="range". Очень важно правильно настроить слайдер; для этого настоятельно рекомендуется установить атрибуты min, max и step.

В этом примере создается ползунок, значение которого может находиться в диапазоне от 0 до 500, а кнопки инкремента/декремента изменяют значение на +10 и -10.

Одна из проблем с ползунками заключается в том, что они не дают никакой визуальной обратной связи. Вам нужно добавить это самостоятельно с помощью JavaScript, но это относительно легко сделать. В этом примере мы добавим пустой элемент <span>, в который запишем текущее значение слайдера, обновляя его по мере изменения.

Чтобы данные отображались, придется добавить перед закрывающимся тэгом </body> тэг <script></script> и записать внутри него:

Дата и время

Сбор значений даты и времени традиционно был кошмаром для веб-разработчиков. HTML5 вносит здесь некоторые усовершенствования, предоставляя специальный элемент управления для обработки этого конкретного вида данных.

datetime-local

Это создает виджет для отображения и выбора даты с указанием времени, но без какой-либо конкретной информации о часовом поясе.

month

Это создает виджет для отображения и выбора месяца с годом.

time

Это создает виджет для отображения и выбора значения времен

week

Это создает виджет для отображения и выбора номера недели и ее года.

Все элементы управления датой и временем могут быть ограничены с помощью атрибутов min и max.

Подборка цвета

С цветами всегда немного трудно справиться. Существует множество способов их выражения: значения RGB (десятичные или шестнадцатеричные), значения HSL, ключевые слова и т. д. Виджет "color" позволяет пользователям выбирать цвет как текстовым, так и визуальным способом.

Другие виджеты

Есть несколько других виджетов, которые не могут быть легко классифицированы из-за их очень специфического поведения, но которые все еще очень полезны.

Выбор файла

Для создания виджета выбора файлов используется элемент <input> с атрибутом type="file". Типы файлов, которые принимаются, могут быть ограничены с помощью атрибута accept. Кроме того, если вы хотите позволить пользователю выбрать более одного файла, вы можете сделать это, добавив атрибут multiple.

Скрытие содержимого

Иногда по техническим причинам удобно иметь фрагменты данных, которые отправляются вместе с формой, но не отображаются пользователю. Для этого вы можете добавить невидимый элемент в свою форму. Используйте <input> с его атрибутом type="hidden".

При создании такого элемента необходимо задать его name и атрибуты value:

Кнопка изображение

Элемент image button-это элемент, который отображается точно так же, как <img>, за исключением того, что когда пользователь нажимает на него, он ведет себя как кнопка submit

3️⃣ Валидация и подтверждение данных форм

Отправка данных формы

В этой статье рассматривается, что происходит, когда пользователь отправляет форму - куда передаются данные и как мы их обрабатываем, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.

Куда отправляются данные

Элемент <form> определяет способ отправки данных. Все его атрибуты предназначены для того, чтобы вы могли настроить запрос на отправку, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются action и method.

Атрибут action

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

Атрибут method

Этот атрибут определяет способ отправки данных.Протокол HTTP предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространенными из которых являются метод GET и метод POST.

Метод GET

Метод GET - это метод, используемый браузером, который говорит серверу, что нужно отправить назад данный ресурс: «Эй, сервер, я хочу получить этот ресурс». В этом случае браузер отправляет пустое тело. Поскольку тело пустое, если форма отправляется с использованием данного метода, данные, отправляемые на сервер, добавляются к URL-адресу.

Рассмотрим следующую форму:

Поскольку используется метод GET, вы увидите URL www.foo.com/?say=Hi&to=Mom, который появится в адресной строке браузера при отправке формы.

Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (?), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (&). В этом случае мы передаем две части данных на сервер:

say, со значением Hi
to, со значением Mom

HTTP-запрос имеет следующий вид:

Метод POST

Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.

Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе GET выше, но с атрибутом method, установленным в post.

Когда форма отправляется с использованием метода POST, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.

Просмотр HTTP-запросов

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, Вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

Нажмите F12
Выберите Network
Выберите "All"
Выберите "foo.com" во вкладке "Name"
Выберите "Headers"

Затем вы можете получить данные формы, как показано на рисунке ниже.

Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

Если необходимо отправить пароль (или любую другую важную информацию), никогда не используйте метод GET, иначе рискуете отобразить эту информацию в URL-строке, что небезопасно.
Если необходимо отправить большой объем информации, POST-метод является предпочтительным, так как некоторые браузеры ограничивают длину URL. К тому же, многие сервера так же ограничивают длину обрабатываемых URL.

На стороне сервера: получение данных

PHP предлагает несколько глобальных объектов для доступа к данным. Например, вы используете POST-метод, в приведенном ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.

Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: php-example.html — который содержит те же данные, которые вы видели раньше: method: post и action из php-example.php. Когда данные переданы на отправку (submit), они переданы в форму php-example.php, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение:Hi Mom.

Валидация данных форм

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

Что такое валидация формы ?

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

"Это поле обязательно для заполнения" (вы не можете оставить это поле пустым)
"Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделенные тире, за ними слеуют четыре цифры)
"Пожалуйста введите настоящий адрес электронной почты" (если ваша запись не в формате"[email protected]")
"Ваш пароль должен быть от 8 до 30 символов длиной, и содержать одну заглавную букву, один символ, и число"

Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохраненными в базе данных; если нет - оно выдает вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.

Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:

Мы хотим получить нужные данные в нужном формате — наши приложения не будут работать должным образом, если данные нашего пользователя хранятся в неправильном формате, если они вводят неправильную информацию или вообще не передают информацию.
Мы хотим защитить учетные записи наших пользователей — заставляя наших пользователей вводить защищенные пароли, это упрощает защиту информации об их учетной записи.
Мы хотим обезопасить себя — существует множество способов, которыми злоумышленники могут злоупотреблять незащищенными формами, чтобы повредить приложение, в которое они входят (см. Безопасность веб-сайта).

Какие типы валидации форм существуют ?

Существует два разных типа проверки формы, с которыми вы столкнетесь в Интернете:

Проверка на стороне клиента - это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как дает мгновенный ответ. Ее можно далее подразделить на:

JavaScript проверка выполняется с использованием JavaScript. Полностью настраиваемая.
Встроенная проверка формы, используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.

Проверка на стороне сервера - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдает ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные серверные фреймворки имеют функции для проверки и очистки данных (что делает их безопасными).

В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.

Использование встроенной проверки форм

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

Когда элемент валидный:

Элемент соответствует CSS псевдо-классу :valid ; это позволяет вам применить конкретный стиль к валидным элементам.
Если пользователь пытается отправить данные, браузер отправит форму, если нет ничего, остановит отправку (например, JavaScript).

Если элемент невалидный:

Элемент соответствует CSS псевдо-классу :invalid; это позволяет вам применить конкретный стиль к невалидным элементам.
Если пользователь пытается отправить данные, браузер заблокирует форму и выдаст сообщение об ошибке.

Ограничения проверки элементов input

В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки <input> элементов.

Начнем с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст <input> соответствующий ярлык (label) и отправку (submit) <button>. Вы можете найти исходный код на GitHub fruit-start.html,и живой пример ниже:

Простейшей функцией проверки HTML5 для использования является required атрибут. Если вы хотите сделать ввод обязательным, вы можете пометить элемент, используя этот атрибут. Если этот атрибут установлен, форма не будет отправляться (и будет отображаться сообщение об ошибке), когда поле пустое (поле input также будет считаться невалидным).

Добавьте атрибут required в ваш input, как показано выше

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

Отображать явные сообщения об ошибках.
Будьте правдоподобны в отношении формата ввода.
Укажите, где именно происходит ошибка (особенно на больших формах).

Полезные ссылки: