Атрибут form в HTML


Содержание

лабы по информатике, егэ

лабораторные работы и задачи по программированию и информатике, егэ по информатике

HTML Урок 7. Создание форм в html

Создание и работа с формами в html

Все элементы управления, коими являются текстовые поля, кнопки, флажки, выпадающие списки и т.п., как правило, размещаются внутри формы:

Атрибуты формы:

action (англ. «действие»)
Файл на сервере с кодом для отработки отосланных данных
action=»http://www.название.домен/имя программы»
enctype (англ. «тип кодировки») text/plain (обычный текст)
application/x-www-dorm-urlencoded (для метода Post отправки формы)
multipart/form-data (для метода Post, если прикрепляются файлы)
method (метод отправки данных) post
get
  • В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php или perl.
  • Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
  • Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .

Элементы формы html

  • Текстовое поле html:
  • Значение атрибута type — text — указывает на то, что это именно текстовое поле
  • size — размер текстового поля в символах
  • maxlength — максимальное кол-во вмещающихся в поле символов
  • value — первоначальный текст в текстовом поле
  • name — имя элемента, необходимо для обработки данных в файле-обработчике
  • Поле ввода пароля html:

    Вместо текста в поле отображается маска — звездочки или кружочки

    Кнопка submit html:

    Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.

    Кнопка очистки формы html:

    Результат:

    Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)

    Html флажок:

    ASP
    javascript
    PHP
    HTML

    В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа

    Атрибут checked устанавливает сразу элемент отмеченным

    Radio кнопка html:

    ASP
    Javascript
    PHP
    HTML

    radio кнопка html служит для единственного выбора из нескольких вариантов

    Атрибут checked устанавливает сразу элемент отмеченным

    Выпадающий список HTML

    Рассмотрим пример добавления выпадающего списка:

    • Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта
    • Атрибут size со значением «1» указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
    • Атрибут selected у пункта ( option ) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»

    Для больших и сложных списков есть возможность добавить подзаголовки — тег optgroup с атрибутом label (надпись):

    Для предоставления возможности выбора нескольких пунктов одновременно необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1 :

    Текстовая область в HTML

    Для ввода большого фрагмента текста служит элемент текстовая область:

    • Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
    • Атрибут rows определяет количество строк в элементе

    Другие элементы

    • Обычная кнопка

    Элемент кнопка-изображение

    Элемент загрузка файла

    Для прикрепления файла к форме существует специальный элемент управления:

    При его использовании значение кодировки формы (атрибут enctype у тега form ) должен иметь значение multipart/form-data

    Скрытое поле

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

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

    • Для элементов управления radio и checkbox удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:

    В примере создана надпись (тег label ) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.

    Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:

    Атрибут readonly делает текстовые документы доступными только для чтения (вносить и изменять текст нельзя):

    Для визуального оформления группы объектов можно использовать элемент fieldset :

    Книги HTML
    ASP
    javaScript

    Можно задать очередность передвижения по элементам клавишей TAB :

    Элемент будет первым в очереди переходов.

    Атрибут form в HTML

    Пояснения к примеру

    • action=»» — говорит о том, что обработка данных будет происходить на этой же странице.
    • — атрибут type=»radio» говорит о том, что нужно отобразить текст после этого кода, как кнопку выбора. Атрибут name и value в данном теге для нас сейчас играют маленькую роль, т.к. мы не изучаем сейчас php (см. уроки php).
    • — атрибут type=»text» говорит о том, что это будет текстовое поле. Здесь так же есть два важных атрибута: name (для php) и value (значение по умолчанию).
    • — атрибут type=»textarea» говорит о том, что это будет большое текстовое поле. Разница от предыдущего случая лишь в том, что он позволяет записывать большой объем текста.
    • — атрибут type=»submit» говорит о том, что это кнопка. В атрибуте value пишется то, что будет написано на кнопке.

    Более подробно про все эти элементы можно прочитать в 15 уроке: элементы тега , где рассмотрены радиокнопки, списки, флажки, текстовые поля, кнопки.

    Теперь рассмотрим подробно все атрибуты тега .

    Атрибуты и свойства тега

    1. Атрибут accept-charset=»Кодировка» — определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.

    2. Атрибут action=»URL» — адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.

    3. Атрибут autocomplete=»on/off» — задает или отключает автозаполнение формы. Может принимать два значения:

    • on — включить автозаполнение;
    • off — выключить автозаполнение;

    4. Атрибут enctype=»параметр» — задает способ кодирования данных. Может принимать следующие значения:

    • application/x-www-form-urlencoded — вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
    • multipart/form-data — данные не кодируются
    • text/plain — пробелы заменяются знаком +, буквы и другие символы не кодируются.

    5. Атрибут method=»POST/GET» — задает метод отправки. Может принимать два значения:

    • GET — передача данных в адресной строке (есть ограничение по объёму отправки данных)
    • POST — посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)

    Более подробное описание методов передачи через GET и POST читайте в уроках по PHP: использование методов GET и POST.

    6. Атрибут name=»имя» — задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.

    7. Атрибут novalidate — отменяет встроенную проверку данных формы на корректность ввода.

    8. Атрибут target=»параметр» — имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:

    • _blank — загружает страницу в новое окно браузера
    • _self — загружает страницу в текущее окно
    • _parent — загружает страницу во фрейм-родитель
    • _top — отменяет все фреймы и загружает страницу в полном окне браузера

    Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку.

    Контактные формы в HTML, тег form и его основные атрибуты

    Здравствуйте, уважаемые читатели сайта Uspei.com. В этом уроке успеем рассмотреть создание контактной формы при помощи html.

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

    Принципы работы формы HTML

    Давайте рассмотрим схему работы формы в HTML. Когда человек заходит на сайт и заполняет форму для сайта, получается примерно следующее:

    Т.е. человек заполнил три поля (Имя, e-mail и сообщение) и далее нажимает кнопку «отправить». В этот момент данные отправляются у нас некоему обработчику. Назовем этот обработчик formdata.php Обратите внимание на расширение файла! Он написан на языке php, и именно этот файл будет у нас заниматься обработкой данных, отправленных с формы. Что будет происходить с данными, зависит от того, что за код написан в файле-обработчике. Если, допустим, владелец сайта хочет, чтобы данные отправлялись в виде письма на его электронный ящик, то он прописывает специальную инструкцию в formdata.php для отправки данных на e-mail.

    Но можно, например, создать такую инструкцию, чтобы данные заносились в базу данных.

    Основные теги и атрибуты форм HTML

    В рамках данного урока мы займемся созданием html формы связи, а в следующих уроках коснемся создания обработчика на языке php. Форму для сайта в html мы будем создавать в новом файле, чтобы не путаться в коде. Давайте перейдем в notepad++ и создадим новый документ и сразу вставим в него шаблон html документа.

    Скачайте шаблон html документа html_page_template.

    Дадим документу название формы и сохраним файл под именем form.html.

    Формы создаются с помощью парного тега form примерно так же, как таблицы. У тега form есть обязательные атрибуты, которые мы должны указать.

    Во-первых, это тот самый обработчик, куда мы должны отправлять все данные. Поэтому нам надо его прописать. Атрибут называется action. Для этого атрибута пропишем название файла обработчика formdata.php

    И еще один важный атрибут – это атрибут method. Он отличает за то, каким способом будут отсылаться данные. Способов может быть два. О них мы поговорим в следующих уроках. А пока просто напишем значение POST.

    Также добавим форме имя. За это отвечает атрибут name. Дадим имя форме – form1.

    Теперь наша форма готова. В браузере конечно мы ничего пока не увидим, так как мы еще не добавили ни один элемент формы, но каркас у нас уже готов.

    Создание текстовых полей (тег )

    Продолжим урок с создания простого текстового поля. Если вы обратили внимание, в нашей HTML форме было два таких текстовых поля для ввода имени и e-mail адреса. Как же они создаются?

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

    Для нашего поля необходимо дать описание, чтобы посетителю было понятно, что необходимо ввести в поле. Для этого заключим наш тег input в абзац и в тег . Тег label сделает наше описание активным и таким образом, щелкнув на описание, у нас произойдет активация Input и курсор будет переключаться на него. Вот так наша строка будет выглядеть в HTML коде:

    Давайте разберем еще атрибуты для тега input. Следующий атрибут – это size. Без этого атрибута наше поле input имеет фиксированный стандартный размер в 20 символов. Если мы хотим сделать поле более широким, то необходимо указать атрибут size.

    Еще следует отметить такой атрибут, как ограничение на количество символов, которое можно ввести в поле. Допустим, мы хотим ограничить поле для ввода имени 10 символами. Чтобы это реализовать, мы добавляем атрибут maxlength.

    Теперь несмотря на то, что ширина поля позволяет ввести больше символов, мы не сможем превысить размер в 10 знаков.

    Илон Маск рекомендует:  Param параметры апплета (нет в html 2 0)

    Далее давайте пройдем поле для ввода пароля. Оно практически ничем не отличается, за исключением атрибута type. Для пароля type будет password. Поэтому скопируем предыдущую строку и введем необходимые изменения.

    Отличие поля password заключается в том, что вместо символов при вводе в поле выводятся круглые маркеры.

    Вот так будет выглядеть код, который мы набрали:

    А вот так будет выглядеть результат в браузере:

    До встречи! Успевайте всё и всегда на страницах блога Uspei.com

    Помоги проекту — подпишись на наш Яндекс.Дзен канал!

    Урок 9 Атрибуты Форм HTML5

    HTML5 Новые Атрибуты Форм

    Этот урок расскажет о некоторых атрибутах для элементов

    Попробуйте сами »

    Замечание: В некоторых браузерах вам потребуется активировать функцию автозаполнения, чтобы оно работало.

    Атрибут autofocus (Автофокус)

    Атрибут autofocus указывает, какое поле должно автоматически получать фокус ввода при загрузке страницы.

    Замечание: Атрибут autofocus аботает со всеми типами ввода .

    Пример

    Имя пользователя:

    Попробуйте сами »

    Атрибут form (Форма)

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

    Замечание: Атрибут form работает со всеми типами ввода .

    Атрибут form должен ссылаться на идентификатор id формы, которой принадлежит поле input:

    Пример

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

    Атрибуты Замены (Замещения, Подмены) Формы


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

    К атрибутам подмены формы относятся:

    • formaction — Заменяет атрибут формы action
    • formenctype — Переписывает атрибут формы enctype
    • formmethod — Замещает атрибут формы method
    • formnovalidate — Отменяет атрибут формы novalidate
    • formtarget — Заменяет атрибут формы target

    Замечание: Атрибуты замены формы работают со следующими типами ввода : submit и image.

    Пример

    Замечание: Эти атрибуты полезны для создания различных кнопок отправки.

    Атрибуты height (Высота) и width (Ширина)

    Атрибуты height и width указывают высоту и ширину изображения, используемого для типа ввода image.

    Замечание: Атрибуты height и width работают только с типом ввода : image.

    Пример

    Атрибут list (Список)

    Атрибут list указывает список опций для поля ввода. Элемент datalist представляет собой список вариантов для выбора в поле ввода input.

    Замечание: Атрибут list работает со следующими типами : text, search, url, telephone, email, date (и другие типы выбора даты и/или времени), number, range и color.

    Пример

    Веб страница:

    Попробуйте сами »

    Атрибуты min, max и step

    Атрибуты min, max и step используются для указания ограничений в полях ввода чисел или дат.

    Атрибут max определяет максимальное возможное значение в поле ввода.

    Атрибут min определяет минимальное возможное значение в поле ввода.

    Атрибут step указывает шаг в поле ввода (если step=»3″, то допустимыми числами будут -3,0,3,6, и т.д.).

    Замечание: Атрибуты min, max и step работают со следующими типами : типы ввода даты/времени (date, time и др.), number и range.

    Пример ниже показывает числовое поле, которое принимает значения между 0 и 10, с шагом 3 (допустимыми числами будут 0, 3, 6 и 9):

    Пример

    Атрибут multiple (Несколько)

    Атрибут multiple указывает, что в поле ввода могут быть выбраны несколько значений.

    Замечание: Атрибут multiple работает в типах : email и file.

    Пример

    Выбрать изображения:

    Попробуйте сами »

    Атрибут novalidate (Не Проверять)

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

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

    Замечание: Атрибут novalidate работает с:

    Попробуйте сами »

    Атрибут pattern (Шаблон, Образец)

    Атрибут pattern определяет шаблон, используемый для проверки поля ввода.

    В качестве шаблона используется регулярное выражение. Вы можете прочитать о регулярных выражениях в наших уроках JavaScript.

    Замечание: Атрибут pattern работает со следующими типами : text, search, url, telephone, email и password

    Пример ниже показывает текстовое поле, которое может содержать только три латинских буквы (никаких чисел или специальных символов):

    Пример

    Код страны:

    Попробуйте сами »

    Атрибут placeholder (Заполнитель)

    Атрибут placeholder показывает подсказку об ожидаемом значении поля ввода.

    Замечание: Атрибут placeholder работает с типами ввода : text, search, url, telephone, email и password

    Подсказка отображается в поле ввода, когда оно пустое, и исчезает, когда поле получает фокус:

    Пример

    Атрибут required (Обязательное Поле)

    Атрибут required указывает, что поле должно быть заполнено в обязательном порядке перед отправкой формы.

    Замечание: Атрибут required работает с типами : text, search, url, telephone, email, password, date, time (и другие типы выбора даты/времени), number, checkbox, radio и file.

    Урок 9 Атрибуты Форм HTML5

    HTML5 Новые Атрибуты Форм

    Этот урок расскажет о некоторых атрибутах для элементов

    Попробуйте сами »

    Замечание: В некоторых браузерах вам потребуется активировать функцию автозаполнения, чтобы оно работало.

    Атрибут autofocus (Автофокус)

    Атрибут autofocus указывает, какое поле должно автоматически получать фокус ввода при загрузке страницы.

    Замечание: Атрибут autofocus аботает со всеми типами ввода .

    Пример

    Имя пользователя:

    Попробуйте сами »

    Атрибут form (Форма)

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

    Замечание: Атрибут form работает со всеми типами ввода .

    Атрибут form должен ссылаться на идентификатор id формы, которой принадлежит поле input:

    Пример

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

    Атрибуты Замены (Замещения, Подмены) Формы

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

    К атрибутам подмены формы относятся:

    • formaction — Заменяет атрибут формы action
    • formenctype — Переписывает атрибут формы enctype
    • formmethod — Замещает атрибут формы method
    • formnovalidate — Отменяет атрибут формы novalidate
    • formtarget — Заменяет атрибут формы target

    Замечание: Атрибуты замены формы работают со следующими типами ввода : submit и image.

    Пример

    Замечание: Эти атрибуты полезны для создания различных кнопок отправки.

    Атрибуты height (Высота) и width (Ширина)

    Атрибуты height и width указывают высоту и ширину изображения, используемого для типа ввода image.

    Замечание: Атрибуты height и width работают только с типом ввода : image.

    Пример

    Атрибут list (Список)

    Атрибут list указывает список опций для поля ввода. Элемент datalist представляет собой список вариантов для выбора в поле ввода input.

    Замечание: Атрибут list работает со следующими типами : text, search, url, telephone, email, date (и другие типы выбора даты и/или времени), number, range и color.

    Пример

    Веб страница:

    Попробуйте сами »

    Атрибуты min, max и step

    Атрибуты min, max и step используются для указания ограничений в полях ввода чисел или дат.

    Атрибут max определяет максимальное возможное значение в поле ввода.

    Атрибут min определяет минимальное возможное значение в поле ввода.

    Атрибут step указывает шаг в поле ввода (если step=»3″, то допустимыми числами будут -3,0,3,6, и т.д.).

    Замечание: Атрибуты min, max и step работают со следующими типами : типы ввода даты/времени (date, time и др.), number и range.

    Пример ниже показывает числовое поле, которое принимает значения между 0 и 10, с шагом 3 (допустимыми числами будут 0, 3, 6 и 9):

    Пример

    Атрибут multiple (Несколько)

    Атрибут multiple указывает, что в поле ввода могут быть выбраны несколько значений.

    Замечание: Атрибут multiple работает в типах : email и file.

    Пример

    Выбрать изображения:

    Попробуйте сами »

    Атрибут novalidate (Не Проверять)

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

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

    Замечание: Атрибут novalidate работает с:

    Попробуйте сами »

    Атрибут pattern (Шаблон, Образец)

    Атрибут pattern определяет шаблон, используемый для проверки поля ввода.

    В качестве шаблона используется регулярное выражение. Вы можете прочитать о регулярных выражениях в наших уроках JavaScript.

    Замечание: Атрибут pattern работает со следующими типами : text, search, url, telephone, email и password

    Пример ниже показывает текстовое поле, которое может содержать только три латинских буквы (никаких чисел или специальных символов):

    Пример

    Код страны:

    Попробуйте сами »

    Атрибут placeholder (Заполнитель)

    Атрибут placeholder показывает подсказку об ожидаемом значении поля ввода.

    Замечание: Атрибут placeholder работает с типами ввода : text, search, url, telephone, email и password

    Подсказка отображается в поле ввода, когда оно пустое, и исчезает, когда поле получает фокус:

    Пример

    Атрибут required (Обязательное Поле)

    Атрибут required указывает, что поле должно быть заполнено в обязательном порядке перед отправкой формы.

    Замечание: Атрибут required работает с типами : text, search, url, telephone, email, password, date, time (и другие типы выбора даты/времени), number, checkbox, radio и file.

    HTML-форма и ее основные элементы

    HTML — форма – это специальный модуль , предназначенный для ввода и последующей отправки на обработку каких — то данных , к примеру , логина и пароля , информации о пользователе , сообщения и т . д . Чаще всего используются следующие виды форм – регистрация , авторизация , отправка сообщения , отправка комментария , отправка письма на почту , анкета .

    Вставка формы осуществляется напрямую в HTML — код страницы . Главный элемент формы называется form> . Уже внутрь него добавляются все остальные элементы – текстовые поля , « чекбоксы» , переключатели и т . д . У элемента form> имеется несколько атрибутов , один из которых является обязательным . Он называется action . В action указывается , где именно будет приниматься и обрабатываться информация , переданная посредством формы . Как правило , обработка происходит в стороннем PHP — файле . Пример использования атрибута – action =» obrabotchik . php «. Атрибут method позволяет задать метод передачи информации . По умолчанию ( если не прописывать атрибут ) будет указан метод GET . В данном случае информация передается напрямую через URL — адрес . Для каждого элемента формы будет создана пара следующего вида – « имя элемента = значение , которое в нем лежит ». Все эти пары , разделенные знаком « амперсанд » будут перечислены в адресной строке . Если прописать method =» POST » ( регистр не важен ), то данные будут передаваться не через URL , а через тело запроса ( в скрытом режиме ). В большинстве случаев используют именно POST . Пример создания формы:

    Атрибут form в HTML

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

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

    • при работе на стороне клиента необходимо задавать имя формы name , чтобы иметь возможность обращаться к элементам формы из сценария JavaScript;
    • отправка данных формы на сервер требует, как минимум, указания атрибута action , определяющего серверный сценарий обработки.

    Смысл, по крайней мере, двух атрибутов необходимо пояснить более подробно.

    Атрибут method

    Атрибут method имеет два основных возможных значения: get (по умолчанию) и post.

    Смысл этих значений следующий. При передаче данных методом get данные формы отправляются на сервер в заголовке запроса, а при использовании метода post – в теле запроса. Передача текстовых данных может осуществляться любым из этих методов. А вот бинарные данные могут быть отправлены только методом post. Это происходит в случае загрузки файла не сервер (всем понятный пример – приложение к электронному письму). Кстати, в этом случае необходимо указать enctype=”multipart/form-data” (см. далее примечения к атрибуту enctype).

    Итак, за исключением случая передачи бинарных данных, равным образом можно применять оба возможных метода. На сложность разработки серверного сценария, принимающего данные из формы, это никоим образом не влияет. Какой же метод предпочтителен? Имеет смысл внимательно рассмотреть имеющиеся в сети ресурсы и убедиться, что в подавляющем большинстве случаев применяется метод get (например, в поисковых системах). Можно ли считать это негласным эмпирическим правилом? Для ответа на этот вопрос следует сравнить методы get и post по крайней мере в трех аспектах: объем передаваемых данных, безопасность и удобство пользователя.

    1. Необходимо учитывать, что максимальный объем данных, передаваемых методом get , ограничен, в зависимости от настроек протокола, и в любом случае не может превышать 8192 Кб.
    2. Передача конфиденциальной информации методом get, несомненно, представляет определенную угрозу безопасности, так как get-строка остается в журналах всех промежуточных серверов и прокси-сервера.
    3. С другой стороны, можно задуматься, какой вариант удобнее пользователю информационного ресурса.

    При передаче методом get пользователь имеет удовольствие видеть данные формы в адресной строке. Символы, отличные от стандартной латиницы кодируются. Например, пробелу соответствует код %20 . Каждый из нас постоянно наблюдает такую ситуацию, работая с поисковыми системами. Зададим, например в Яndex ключевое словосочетание «язык HTML» и увидим в адресной строке:

    Слово «язык» закодировано последовательностью %FF%E7%FB%EA, а «HTML» передается как есть. Получив такой запрос, соответствующая серверная программа обратится к базе данных и, в конечном счете, сгенерирует и отправит браузеру список результатов поиска. Приятно ли смотреть на такую адресную строку? Нет. Зато пользователь может сохранить уникальную закладку на сгенерированную страницу.

    При передаче методом post данные формы также отправляются на сервер. При этом пользователь не видит в адресной строке ничего «лишнего». Зато появляются другие проблемы: попытка обновить страницу вызывает маловразумительное для большинства пользователей сообщение: «… обновление страницы невозможно без повторной отправки данных…». И закладку не сохранить.

    Резюме. По-видимому, в большинстве типичных задач следует выбирать заданный по умолчанию метод get во всех случаях, кроме передачи на сервер:

    • бинарных данных,
    • конфиденциальной информации,
    • данных большого объема.

    Атрибут enctype

    Этот атрибут имеет два возможных значения:

    • application/x-www-form-urlencoded (по умолчанию)
    • multipart/form-data

    Первое значение используется в абсолютном большинстве случаев. Нет смысла указывать его явно – оно и так предполагается по умолчанию. Второй же тип кодировки ( multipart/form-data ) указывается в единственном случае: при загрузке на сервер бинарного файла. При этом обязательно задание атрибута method=”post” .

    Формы в HTML

    Формы в HTML — это самая сложная, но с другой стороны, пожалуй самая интересная тема в HTML.

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

    Примером формы может служить гостевая книга, анкета, онлайн тест. Формы заполняют при регистрации на сайте, при оформлении заказов в интернет магазине и т.п.

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

    Затем данные, внесенные в форму, отправляются на сервер для обработки. Но HTML здесь бессилен — над обработкой формы уже работает программа или скрипт, который к ней привязывается. Такие программы обычно пишут на языке php или javascript.


    Атрибуты формы — тег .

    Атрибут action является обязательным для любой формы — он указывает адрес к файлу, который обслуживает форму (обрабатывает внесенные в нее данные).

    Атрибут method определяет способ отправки содержимого формы. Существует два метода — GET и POST . Сейчас не имеет смысла вникать в эти параметры, так как тема отправки информации методами GET и POST относится к языкам обработки данных (например, PHP). Достаточно знать, что именно метод передачи данных POST в большинстве случаях используется в формах.

    Атрибут name тега

    Однострочное текстовое поле для ввода текста. Атрибут size задает ширину поля в символах.

    «password» maxlength= «10» size= «20» >

    Текстовое поле для ввода пароля.
    Атрибут maxlength устанавливает максимальное количество символов, которое можно ввести

    «radio» name= «radio» value= «1» checked>

    «radio» name= «radio» value= «2» >

    «radio» name= «radio» value= «3» >

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

    «checkbox» name= «flag» value= «1» checked>

    «checkbox» name= «flag» value= «2» >

    «checkbox» name= «flag» value= «3» >

    Флажок.
    Возможен выбор нескольких вариантов. Атрибут checked определяет заранее помеченное поле.

    «button» value= «Кнопка» >

    Кнопка.
    Атрибут value устанавливает надпись на кнопке.

    «reset» value= «Сбросить» >

    Кнопка сброса.
    Возвращает поля формы к их первоначальному виду. Сброс внесенных данных.

    Кнопка для отправки внесенных данных.

    Поле для ввода имени пересылаемого файла.

    «image» src= «img/buttom.gif» >

    Кнопка-изображение.
    Служит также для отправки данных на сервер. Атрибут src указывает адрес файла с изображением.

    Скрытое поле — невидимое для пользователя.

    Раскрывающийся список — теги и

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

    Вид создаваемого списка зависит от значения атрибута size : при size= «1» (значение по умолчанию) список будет раскрывающимся.

    Иное значение атрибута size будет соответствовать количеству отображаемых пунктов списка. Например, при size= «3» , видимыми будут три элемента. Для просмотра остальных пунктов списка (если таковые есть) следует воспользоваться вертикальной полосой прокрутки, которая добавляется автоматически.

    По умолчанию возможен выбор лишь одного элемента списка. Добавление атрибута multiple к тегу позволяет выбрать несколько пунктов списка с помощью мыши и клавиш Ctrl и Shift.

    При наличии атрибута multiple , будут отображены все пункты списка или их часть (в зависимости от браузера), если атрибутом size не установлено определенное количество видимых пунктов.

    Обязательным элементом раскрывающегося списка является тег . Он располагается внутри тега и создает каждый пункт списка.

    При помощи атрибута name тега списку дается имя, а при помощи атрибута value тега элементу списка присваивают значение. Таким образом на сервер отправляется пара «имя=значение» — имя списка и значение выбранного элемента/ов.

    Атрибут selected тега определяет заранее выделенный пункт списка, а атрибут disabled блокирует элемент списка — его нельзя выбрать.

    HTML-формы. Взгляд бэкенд-разработчика

    При подготовке материала по Symfony Form я решил уделить некоторое внимание теоретической части по работе с формами со стороны клиента – что они из себя представляют, как ведут себя браузеры при отправке, в каком формате путешествуют, в каком виде поступают на сервер.

    Вводная часть несколько растянулась и в итоге вылилась в отдельную небольшую статью, которая, по моему мнению, может быть интересна и другим бэкенд-разработчикам (не только PHP или Symfony).

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

    Раньше работа с формами была в каком-то смысле проще: в том виде, в котором форма приходила к пользователю, в том же она отправлялась и обратно, но уже с заполненными полями. Бэкенд-разработчики точно знали какой набор данных им следует ожидать, всё было легко и предсказуемо. С широким распространением JS всё изменилось: сегодня уже никого не удивляет поведение приложения, при котором форма приходит с одним набором полей, а отправляется с совершенно иным, когда громоздкие формы имеют в своём составе небольшие динамические подформы, которые независимо от основной могут отправляться на сервер для обработки, когда выбранные файлы загружаются в фоновом режиме, в то время как пользователь заполняет остальную часть формы. Таким образом, всё большее количество логики переносится на сторону клиента, и это отлично, в первую очередь, конечно же, для пользователя. Для разработчика процесс работы с формами несколько усложнился. Но как бы тяжело ему не было, игнорировать развитие технологий сегодня невозможно, поэтому необходимо уметь эффективно их использовать.

    Бэкенд против Фронтенда

    Мы постоянно стремимся к автоматизации всего, с чем нам приходится работать, особенно рутинных задач, при этом пытаемся привнести в эти процессы некий порядок. Поэтому многих разработчиков несколько пугает динамичность на клиентский стороне, которая часто воспринимается ими как неконтролируемый хаос. Можно подумать, что у фронтенд-разработчиков развязаны руки, и они могут творить подобно художникам и скульпторам, их действия ничем не ограничены, а нам потом разбирать на сервере полёты их фантазии. Нередко так и случается, но это ошибочный, тупиковый путь. Это можно сравнить со schemaless-хранилищами данных: никто вас не ограничивает жёсткой структурой хранения данных, каждый из разработчиков в рамках одного проекта может придумать свой формат хранения, потом поменять его в зависимости от настроения, что в конечном счёте, скорее всего, приведёт к печальным последствиям. Если же вы ожидаете от своего продукта гибкости, легкой расширяемости и динамичного развития, вам необходимо будет придерживаться определённых правил, которые помогут поддерживать порядок в вашем приложении. То же самое вы в праве требовать и от фронтенд-разработчиков – творите, но придерживайтесь правил.

    Итак, что вам, как бэкенд-разработчику, необходимо понять и принять:

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

  • Не вините во всём фронтенд-разработчиков.
    Установите в компании, команде, проекте правила, и тогда у фронтенд-разработчиков будет не меньшая ответственность при работе с формами чем у вас. А ещё лучше, если кроме правил между всеми разработчиками будут доверительные отношения, а все решения будут приниматься в сотрудничестве.
  • Отправляем форму

    Отлично, мы каким-то образом сгенерировали HTML для некоторой формы и отправили её пользователю. Заполнив поля и, возможно, изменив структуру формы, пользователю необходимо отправить её на сервер для обработки. Каким образом он может это сделать? Есть разные способы, большинство из которых потребует выполнения скриптов. Рассмотрим основные:

    1. Нажатие на кнопку отправки формы.
    2. Вызов метода submit() у объекта формы.
    3. Сериализация полей формы.
    4. Создание и формирование произвольного запроса.

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

    Пусть работает браузер

    Для начала рассмотрим первую группу, оба способа которой мало чем отличаются друг от друга. В этом случае всю работу и ответственность на себя берёт браузер пользователя, причем действует он достаточно прямолинейно:

    1. Определяет форму, поля которой необходимо отправить.
    2. Определяет набор полей, которые подлежат отправке. В этот набор входят следующие элементы формы: button, input, keygen, object, select, textarea.
    3. Генерирует пары ключ=значение, где ключом является имя поля (атрибут name), а значением – содержимое данного поля.
    4. Создает и формирует запрос, который будет выполнен методом, указанным в атрибуте тега формы method и тело которого будет закодировано в зависимости от значения атрибута enctype.
    5. Отправляет запрос на сервер по адресу, указанному в атрибуте тега формы action.

    Определение отправляемой формы зависит от рассматриваемых нами способов. Если это нажатие на кнопку, форма определяется атрибутом form нажимаемой кнопки, а при его отсутствии – родительским для кнопки тегом form. Если же это вызов метода submit(), отправляемой является форма, связанная с объектом, для которого вызывается данный метод.

    Атрибуты formmethod, formenctype и formaction нажимаемой кнопки переопределяют соответственно значения атрибутов method, enctype и action родительской формы.

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

    Из всего списка наиболее интересен третий пункт – генерация пар ключ=значение. Каждый элемент формы должен иметь атрибут name, который будет использован браузером в качестве ключа. Рассмотрим на примере. Имеется следующая форма:

    В этом случае браузер сформирует две пары ключ=значение: nickname=ghost и password=123456. При отправке они будут склеены с помощью символа амперсанда (&), и в результате на сервер будет отправлен запрос, тело которого содержит строку:

    Получив такой запрос, PHP начнёт его разбор, примерный алгоритм которого можно посмотреть в описании функции parse_str. В результате разбора будут определены два поля и их значения, они будут помещены в суперглобальный массив $_POST, который примет следующий вид:

    На что в этом процессе следует обратить внимание:

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

  • Не все поля, которые содержатся в форме, будут отправлены в запросе.
    Например, есть типы полей, которые не будут включены в запрос, если они не были выбраны или не имеют введённого значения. Такими являются, например, следующие:
    • radio
    • checkbox
    • select с атрибутом multiple

    На данном правиле основан известный хак с полем типа hidden, которое размещается вместе с полем типа checkbox, для корректного определения его состояния при отправке формы. К концу данного списка станет понятно, где надо размещать скрытое поле и почему этот хак работает.

    Также в запрос не будут включены значения кнопок, как обычных, так и submit, которые не участвуют в отправке формы, т.е. те кнопки, по которым не было совершено нажатие. Таким образом, если отправка выполняется методом submit(), в запрос не будет включена ни одна кнопка.

    Не будут отправлены также поля, находящиеся в отключённом состоянии (имеющие атрибут disabled).

    Браузер никак не изменяет имена полей формы при генерации пар ключ=значение.
    Значение ключа в паре зависит исключительно от самого поля, а точнее от его атрибута name, и никакие родительские теги на нёго никак не влияют. Таким образом, не имеет значения, содержит ваш тег form атрибут name или нет. Это также важно для понимания.

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

    Многие предполагают, что браузер каким-то образом должен решить, какое одно из двух полей необходимо отправлять в запросе. Логика подсказывает, что отправлять необходимо последнее (в данном случае второе), которое перекрывает все предшествующие поля с тем же именем. Это предположение неверно!
    Браузер вообще не волнует, есть в форме какие-то конфликты имён или их нет. Непустое имя поля не является критерием исключения данного поля из отправляемого запроса. Другими словами, для браузера оба поля являются корректными и оба будут включены в набор отправляемых полей, причем в том порядке, в котором они представлены в форме.
    Таким образом, приведённая выше форма при отправке на сервер примет следующий вид:

    Именно такой запрос и придёт на наш сервер. Вы можете проверить это, прочитав значение php://input. Что же с этим запросом будет делать PHP? Всё как обычно – разбирает строку и формирует массив $_POST. Но, как мы знаем, ключи в массивах уникальны, поэтому первоначальное значение «John Doe» будет перезаписано значением «Mike Ross». В итоге мы получим следующий результат:

    Теперь должно стать понятно, как работает хак со скрытым полем для checkbox. Посмотрим на следующую форму:

    Видим два поля с одинаковыми именами. Если checkbox будет выбран, в запрос будут добавлены оба поля в том порядке, в котором они представлены в форме, а значит значение «0» поля hidden будет перезаписано значением «1» поля checkbox. Если же checkbox выбран не будет, то согласно пункту 2 его значение не отправляется, а значит в запросе будет только поле hidden со значением «0», которое и будет получено на сервере и помещено в массив $_POST.

    Разрешать конфликты имён полей должен разработчик.
    Этот пункт вытекает из предыдущего. Взглянем еще раз на рассмотренный нами пример формы с двумя полями fullname. Представим, что первое поле – это имя менеджера, второе – разработчика. На сервере нам нужны оба значения, но так как PHP перезаписывает одно значение другим, нам необходимо каким-то образом ему помочь корректно разобрать пришедшие данные. Логика подсказывает, что надо менять имена полей. Есть несколько вариантов:

      manager_fullname и developer_fullname – самый простой и очевидный. Имена полей теперь уникальны и не вызовут конфликта при записи в массив $_POST.

    manager[fullname] и developer[fullname] – в этом случае имена также уникальны, но разбор подобных ключей в PHP будет отличаться от первого варианта: если PHP встречает в ключе парные квадратные скобки, он интерпретирует их как массив.
    После разбора $_POST будет выглядеть следующим образом:

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

    fullname[] – интересный вариант: имена полей будут одинаковы, но так как в них содержатся квадратные скобки, PHP поймёт, что перед ним массив значений, и в этом случае поместит все значения в массив $_POST.
    Запрос в этом случае будет выглядеть так:

    Примерный алгоритм разбора такого запроса в PHP:

    Таким образом, массив $_POST будет содержать следующие значения:

    Этот вариант удобно использовать для набора значений неопределенного размера. Например, набор полей типа checkbox.

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

    Форма содержит список, в котором мы можем выбрать несколько вариантов. Допустим, мы выбирали Movies, Cooking и Golf. Можно предположить, что при отправке поля будет использован некий разделитель значений. На самом же деле запрос будет выглядеть следующим образом:

    Т.е. в браузере мы отправляем одно поле с тремя значениями, но серверная сторона видит это как отправку трех полей, которые содержат по одному значению. Очевидно, что согласно пункту 4 массив $_POST будет содержать только одно последнее значение golf, которое перезапишет первые два. Для решения этой проблемы необходимо воспользоваться советом из пункта 5 и изменить имя тега select на «hobbies[]».

  • Поля типа radio с одинаковым именем (атрибутом name) в пределах одной формы будут объединены в группу.
    В этом случае никаких конфликтов имён не будет, т.к. в группе можно выбрать/отметить только одно поле, значение которого и будет отправлено в запросе в паре с именем группы (атрибутом name выбранного поля). Все остальные поля данной группы отмечены не будут, а значит согласно пункту 2 не включаются в отправляемый запрос.
  • За всё ответит разработчик

    Кратко также рассмотрим вторую группу способов отправки форм. Эта группа отличается от первой тем, что созданием, формированием и отправкой запроса занимается непосредственно разработчик. Данная группа имеет лишь отдалённое отношение к рассматриваемой нами теме, так как не имеет жёсткой привязки к HTML-формам: разработчик может включать в запрос и исключать из него любые данные. Способ сериализации полей отличается от полностью произвольного запроса наличием в широко распространённых JS-фреймворках готовых алгоритмов, которые берут на себя большую часть работы. Эти способы удобны при отправке данных форм с использованием Ajax.

    Рассмотрим небольшой пример использования JS-библиотеки jQuery для формирования и отправки формы таким способом.

    Всю основную работу выполняет метод serialize(), который, используя имена и значения полей формы, генерирует следующую строку:

    Почему из пяти полей формы в запрос включаются только два? Поле email не включается, т.к. находится в отключённом состоянии (атрибут disabled), а поля photo и submit – т.к. метод serialize() данной JS-библиотеки не включает файлы и кнопки в набор полей при формировании строки запроса.

    Далее создаём Ajax-запрос с определёнными параметрами и отправляем нашу форму в виде полученной ранее строки. Тут важно понять, что при использовании данного способа от HTML-формы требуется только набор полей с их именами и значениями, все остальные параметры запроса определяет непосредственно разработчик. Таким образом, атрибуты action, method и enctype тега form игнорируются: при вызове метода ajax() мы явно указываем, что данные будут переданы методом POST в обработчик «server.php», а кодирование полей в данном методе по умолчанию – «application/x-www-form-urlencoded».

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

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

    К чему вся эта статья?

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

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

    HTML5 и его атрибуты для проверки формы

    2015-05-22 / Вр:13:29 / просмотров: 18549

    В этой статье я хочу рассказать, как можно проверить форму без использования php или javascript. На HTML5 есть возможность указывать, какое поле должно быть обязательным для заполнения, проверить правильность ввода в поле e-mail адрес, телефон, имя и т. д.

    Если вы создаете сайты и вам нужно сделать форму обратной связи, то эта статья будет находка:

    Итак, если вы не знаете языков программирования php или javascript, чтобы осуществить проверку формы, не беда – HTML5 справится с этим отлично.

    К примеру, у нас есть стандартная html форма:

    Если не заполнить ни одного поля, а нажать кнопку «Отправить!» , форма без проблем отправится на указанную почту в прописанном обработчике.
    Как же сделать проверку формы на заполнение полей ?

    1. Указать поле обязательным для заполнения с помощью атрибута «required» .

    Достаточно прописать атрибут «required» в том поле, которое вы считаете обязательным для заполнения. Для примера, давайте пропишем «required» к полю «email» :

    Как видите, поле «email» стало обязательным для заполнения и форма не отправится до тех пор, пока не внесете туда значение.

    2. Укажите атрибут «placeholder» , чтобы пользователь видел, что необходимо вводить в поле. Например, так:

    Заполните и для остальных полей:

    3. Чтобы предотвратить неправильное заполнение поля формы, нужно в атрибуте «type» заменить значение «text» на «email» . Например, было так:

    В результате, если пользователь, когда будет писать email адрес, не поставит « @ », ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ « @ ».

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

    формат ввода должен быть таким:

    4. Проверить, правильно ли заполнены поля с помощью атрибута «pattern» .
    Чтобы проверить значение элемента на основе регулярного выражения, используют атрибут «pattern» .

    Например, если нужно, чтобы имя в поле всегда писалось на русском языке или чтобы номер телефона был написан по определенному шаблону « +38(093) — 000 — 00 — 00 » и т .д., то атрибут «pattern» отлично справится с этой задачей.

    Итак, нужно чтобы пользователь ввел имя русскими буквами. Для этого пропишите в атрибуте «pattern» вот такое выражение:

    Объяснение: в квадратных скобках [ ] пишите, какие буквы должны вводиться в поле для имени. В моем примере можно вводить только русские буквы в любом регистре. Если нужно только латинскими, сделайте вот так:

    Выражение
    Описание
    [A-Z] Только заглавная латинская буква.
    [A-Za-z] Только латинская буква в любом регистре.
    [А-Яа-яЁё] Только русская буква в любом регистре.
    [A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.

    Цифра, что находится в фигурных скобках < >означает число вводимых символов. В моем примере не менее 4-х символов :

    Выражение
    Описание
    [A-Za-z] Не менее шести латинских букв.
    [A-Za-z] Шесть латинских букв.
    [А-Яа-яЁё] Не менее шести букв русского и латинского алфавита.
    [A-Za-zА-Яа-яЁё] Шесть букв русского и латинского алфавита.

    Если нужно проверить правильность заполнения email почты, пропишите в атрибуте «pattern» вот такое выражение:

    Объяснение: каждый проверяемый участок берется в круглые скобки ( ) .

    Итак, первый проверяемый участок до символа « @ ». В квадратных скобках [] я прописал, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках < >я прописал, что символов должно быть не менее одного. То есть, такой номер не пройдет « @ rambler.ru ».

    Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « @ ».

    Проверяем второй участок после символа « @ ». Открываем круглые скобки и в квадратных скобках прописываем снова, какие буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках « < >» я прописал, что символов должно быть не менее одного. Далее я закрываю проверяемый участок круглой скобкой и прописываю знак « . ».

    Проверяем третий участок после знака « . ». Открываем круглые скобки и в квадратных скобках прописываем снова, какие буквы должны вводиться в поле. В моем примере это только латинские буквы. В фигурных скобках « < >» я прописал, что символов должно быть от 2 до 8 . Я так решил, потому что доменных зон меньше 2 и больше 8 символов я не видел (ru, info, ua, biz, com).

    На этом проверка правильного заполнения поля email адреса закончилась.

    Или скажу так: вот шаблон адреса электронной почты, по которому нужно создать проверочный:

    Итак, в итоге поле «email» будет выглядеть вот так:

    Если нужно проверить на правильность заполнение поля телефона , пропишите в атрибуте «pattern» вот такое выражение:

    Для образца телефона:

    Для образца телефона:

    Я думаю, здесь объяснять ничего не нужно, так как все аналогично верхнему примеру .

    Итак, в итоге поле «tel» будет выглядеть вот так:

    В итоге вот такой получился код формы:

    Это еще не все, можно сделать подсказку пользователю, как правильно нужно заполнить поле, если он что-то ввел не так, как вам нужно.
    5. Подсказка в случае, если поле было заполнено не правильно.
    Если пользователь в поле ввел имя на латыни, например, «Stepa», а вам нужно на русском «Степа», можно написать всплывающую подсказку для пользователя и показать пример, как нужно заполнить.

    Вот так это будет выглядеть в коде:

    Вот так это будет выглядеть в коде:

    В итоге получилась вот такая форма с проверкой на правильное заполнение на HTML5 без использования php или javascript:

    Таблица регулярного выражения

    Выражение
    Описание
    \d [0-9] Одна цифра от 0 до 9.
    \D [^0-9] Любой символ кроме цифры.
    \s Пробел.
    [A-Z] Только заглавная латинская буква.
    [A-Za-z] Только латинская буква в любом регистре.
    [А-Яа-яЁё] Только русская буква в любом регистре.
    [A-Za-zА-Яа-яЁё] Любая буква русского и латинского алфавита.
    [0-9] Три цифры.
    [A-Za-z] Не менее шести латинских букв.
    [0-9] Не более трёх цифр.
    [0-9] От пяти до десяти цифр.
    ^[a-zA-Z]+$ Любое слово на латинице.
    ^[А-Яа-яЁё\s]+$ Любое слово на русском включая пробелы.
    ^[ 0-9]+$ Любое число.
    [0-9] Почтовый индекс.
    \d+(,\d<2>)? Число в формате 1,34 (разделитель запятая).
    \d+(\.\d<2>)? Число в формате 2.10 (разделитель точка).
    \d<1,3>\.\d<1,3>\.\d<1,3>\.\d IP-адрес

    Тему я еще не закрыл, ждите продолжения! Чтобы не пропустить новых статей, подписывайтесь на обновления блога.

    Илон Маск рекомендует:  System в Delphi
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL