Формы в HTML документах


HTML: Формы

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

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

type=»submit» Создает кнопку, при нажатии на которую браузер отправляет форму на сервер: Атрибут value задает текст, который будет отображен на кнопке, заменяя значение установленное по умолчанию. type=»radio» Создает элементы управления, позволяющие выбрать только один вариант из предложенных, то есть такие элементы управления являются взаимозаменяемыми. Они называются радио кнопками или переключателями: Попробовать »

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

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

type=»checkbox» Создает элементы управления, позволяющие пользователям отмечать любое количество вариантов или отменить выбор, не выбрав ни одно из предложенных значений. Такие элементы управления называют флажками. Попробовать »

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

Примечание: все допустимые значения атрибута type смотрите в нашем HTML справочнике в описании элемента .

Элемент

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

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

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

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

Элементы и

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

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

Элемент

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

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

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

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

HTML формы

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

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

Основные теги, используемые для создания HTML форм, — это тег

Тег – это основа всего мира форм. Он может быть десяти видов:

  • — стандартное текстовое поле. Также здесь может присутствовать атрибут value, который определяет текст по умолчанию, заданный в текстовом поле.
  • — то же текстовое поле, однако вводимые пользователем символы будут скрыты.
  • — создает поле выключателей (checkbox) или флажков, которые пользователь может либо включить, либо отключить. Также здесь можно использовать атрибут checked, который используется в формате и который задает начальное состояние флажка «включен».
  • — создает поле переключателей, которые очень похожи на флажки, однако в этом случае пользователь может выбрать только один объект в группе переключателей. Здесь также можно использовать атрибут checked, который задается аналогичным образом, как и в случае с флажками.
  • — создает поле ввода, которое показывает файлы на вашем компьютере подобно тому, как вы открываете или сохраняете документы в большинстве программ. Оно позволяет пользователям загружать файлы на сервер.
  • — создает кнопку отправки данных формы программе-обработчику. Можно самому задавать текст, который будет отображаться на кнопке отправки (то же самое можно сделать и с типами button и reset – см.ниже). Это делается при помощи атрибута value, например, .
  • — создает специальную кнопку отправки, в качестве которой будет использоваться активное изображение. При этом серверу кроме данных формы еще отправляются и координаты (x, y) нажатия мыши на изображение. Также необходимо указывать атрибут src, который играет ту же роль, что и в теге .
  • — создает кнопку, которая без дополнительного кода ничего не будет делать.
  • — создает кнопку, которая при нажатии на нее возвращает все поля формы к значениям по умолчанию.
  • — создает поле, которое не отображается в окне браузера. Оно используется для передачи различной вспомогательной информации, например, имени страницы, на которой находится пользователь, или электронный адрес, куда должна пересылаться форма.

Обратите внимание, что тег закрывает сам себя при помощи конструкции «/>».

При отправке данных формы посылается выбранный элемент списка.

Аналогично атрибуту checked в флажках и переключателях тег

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

Форма может иметь, например, следующий вид. (Внимание: форма не будет работать до тех пор, пока не будет реализован скрипт «contactus.php», указанный в атрибуте action тега

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

Формы в HTML-документах и их обработка.

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

текстовое поле (text)

многострочное поле (textarea)

поле с паролем (password)

скрытое поле (hidden)

кнопка для отправки формы (submit)

кнопка для очистки формы (reset)

поле для отправки файла (file)

кнопка с изображением (image)

Все управляющие элементы вводятся в форму с помощью тега , а их тип определяется параметром type.

Приведем небольшой пример вывода в форме элемента text.

Отображаться данная форма в браузере, будет следующим образом:

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

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

disabled — блокирует доступ и изменение элемента.

multiple — этот параметр позволяет одновременно выбирать сразу несколько элементов списка.

name — имя элемента для отправки на сервер или обращения через скрипты.

size — количество отображаемых строк списка.

value — значение элемента.

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

HTML-код этого списка:

Обработка форм.

Что бы увидеть результат заполнения формы, необходимо произвести её обработку. Для этого мы будем использовать PHP. Разберем на примере, как обрабатываются элементы формы. Предположим, что нам не обходимо создать анкету для рассмотрения кандидатур для приема на работу. Нам понадобится текстовое поле для ввода Ф.И.О., два переключателя для выбора пола, выпадающие списки числа, месяца и года рождения, многострочное текстовое поле для описания личностных качеств и соответственно две кнопки, отправка формы и сброс формы.

HTML-код нашей анкеты будет иметь следующий вид:

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

Теперь создадим обрабатывающий PHP-сценарий. Он создаётся в виде отельного файла с расширением .php и ссылка на этот файл прописывается в строке

Как сделать форму в HTML для сайта

Рассматривая основыные теги HTML мы не можем не затронуть такой важный элемент как формы. Часто на web-страницах необходима обратная связь. Например, заполнение анкеты на сайте, регистрация, авторизация, комментарии и т.д. Во всех этих случаях пользователь заполняет специальные области (поля формы) на странице, после чего происходит отправка данных на сервер. Для создания обратной связи используются формы. Форма это фрагмент HTML документа предназначенный для ввода информации пользователем.

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

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

Структура простейшей формы:

В каждой форме необходимо также наличие кнопки submit, предназначенной для отправки данных после заполнения формы.

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

Для создания текстового поля (textfield) существует параметр text. При этом используются параметры: name – имя поля; size – для поля в симолах; maxlength – максимально возможное количество символов в поле; value – информация, отображаемая в форме по умолчанию

Пример записи формы с двумя текстовыми полями:

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

В случае, если в текстовое поле необходимо ввести большое количество информации, например, комментарий используется форма текстовой области (textarea),которая создается при помощи тэга

Результат работы кода с текстовой областью представлен на рисунке.

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

Для того, чтобы элемент был выделен при загрузке страницы необходимо в тэге дописать атрибут selected. Различные возможности построения элемента списка и его код представлены на рисунке.

Аналогичным способом выбора являются элементы формы флажок (checkbox) и радиокнопка (radiobutton). Отличие этих элементов состоит в том, что флажок позволяет сделать множественный выбор, а радиокнопка только единичный.

Структура записи флажка и радиокнопки:

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

Еще одним элементом формы является кнопка, задаваемая при помощи атрибута typeтэга со значением button:

В указанном коде для создания кнопки присутствует параметр onclick, в котором как правило задается код на языке программирования для выполнения того или иного действия при нажатии на эту кнопку:

Для вывода сообщения в специальном окне используется команда на языке jаvascript – aler. Результат работы примера представлен на рисунке.

Мастер Йода рекомендует:  Меняемся баннерами и ссылками

Для вставки изображения в кнопку используется код, представленный в следующем примере:

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

Часто регистрация на сайте разбивается на несколько страниц и каждая последующая должна содержать в себе информацию из предыдущей. Для того чтобы скрыть передаваемую информацию используется элемент формы hidden:

Элемент формы hiddenбудет невидим в окне браузера.

Для загрузки файлов на сервер в формах имеется элемент file. Пример кода для загрузки файлов на сервер представлен ниже:

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

Form и input — теги и их атрибуты для создания различных HTML форм для сайта

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com. В продолжение изучения языка гипертекстовой разметки переходим к рассмотрению тегов form и input с их атрибутами (что представляют из себя эти составляющие HTML кода в общем случае), с помощью которых можно создавать самые разнообразные формы для сайта.

Какой бы тематики и наполнения не был тот или иной вебресурс, на нем с большой вероятностью будут встречаться формы в том или ином виде: текстовые поля, выпадающие меню, различные кнопки или переключатели. К слову, в одной из публикаций я уже повествовал об элементах, помогающих разнообразить формы с помощью тегов select, option, textarea, label, fieldset и legend.

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

HTML формы — как они создаются с помощью form и input

Как я уже сказал вначале, какая-нибудь вебформа, а то и сразу несколько, обязательно должны присутствовать на любом мало-мальски развитом вебсайте. Чтобы понять, насколько они важны в свете соответствия веб-ресурса современным требованиям, достаточно привести вам навскидку тройку объектов, где используются формы, основанные на тегах form и input, которые по одному названию не оставляют сомнений в своей необходимости проекту той или иной направленности:

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

Здесь form играет важнейшую роль, так как инициирует установку вебформы. Сам по себе он не выводит некую область на веб-странице, но служит контейнером, содержащим другие тэги.

В нашем случае (см.скриншот выше) в их число входит несколько input (этот ХТМЛ тэг является одиночным, иными словами, не имеет закрывающей составляющей), а также textarea, с разными наборами атрибутов. Каждый из них определяет свой элемент, входящий в форму.

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

Обратите внимание, что однострочные текстовые поля («Ваше имя», «Электронная почта», «Тема сообщения») выведены в том числе благодаря присутствию атрибутов name (c разными значениями «name», «email», «sub») и type («text») наиболее востребованного тега input.

Для многострочного поля применен тег textarea со своими параметрами. Кнопка «Отправить» реализована тем же input в совокупности с атрибутами value и type (со значением «submit»).

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

Если внешний вид формы мы можем создавать с помощью языка гипертекстовой разметки, то обеспечить передачу данных и их обработку средствами ХТМЛ, к сожалению, мы не в силах.

Для этого предназначена программа обработки форм (обработчик), выполняющая эту задачу. Она обычно реализуется в виде скрипта, написанного на языке PHP, содержание коего в каждом конкретном случае зависит от преследуемых целей. В предоставленном мною примере с обратной связью данную роль играет созданный для этого файл mail.php с таким содержимым:

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

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

Атрибуты тега form — action, method, name и другие

Как я уже отмечал выше, любая ХТМЛ форма заключается между открывающим и закрывающим тегами form, который является контейнером, содержащим другие теги. Form имеет ряд атрибутов, некоторые из которых могут принимать различные значения (параметры). Наиболее часто используемыми из них (смотрите третий скриншот вверх отсюда) являются следующие:

1. Action — путь до документа (URL), содержащего скрипт исполнения (обработчик веб-форм). Обязательный атрибут (в HTML5 таковым не является, поскольку пятая версия языка разметки предусматривает ситуации, когда данные для обработки отправляются на текущую страницу). В качестве значения используется абсолютный или относительный путь к файлу на сервере:

2. Method — c помощью этого атрибута обеспечивается способ передачи данных. Собственно, их всего два: get и post, которые и являются параметрами. Метод get (значение по умолчанию) используется для небольших сообщений посредством адресной строки браузера. Тогда как post предназначен для отправки большего объема данных закрытым способом.

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

Далее представлю вам и остальные атрибуты тега form:

4. Accept-charset — определяет кодировку, в которой сервер должен обрабатывать полученные данные. В качестве значения (параметра) данного атрибута выступает название используемого стандарта (UTF-8, Windows-1251 и т.д.).

5. Autocomplete [HTML5] — активирует автозаполнение формы браузером, который в этом случае оставляет в памяти содержание впервые заполняемых полей (чаще логина и пароля), а при необходимости в дальнейшем ввода этих данных автоматически их вставляет в нужные места. Имеет всего два параметра: on — автоматическое заполнение включено, off — выключено.

Замечу, что функция автоматического заполнения может быть вообще отключена в браузере самого пользователя. Тогда присутствие атрибута autocomplete=»on» в коде веб-формы поможет только в случае, если данная опция активирована в настройках обозревателя конкретного юзера.

6. Enctype — задает метод кодирования введенных в форму данных перед отправкой их на сервер. Может быть применено одно из трех значений:

  • application/x-www-form-urlencoded (параметр по умолчанию) — вместо пробелов применяется «+», кодируются все символы кроме букв латинского алфавита и цифр. Например, знаки кириллицы будут преобразованы в нечто, похожее на «%2F%3D%26%3F%2%3D%26%3D»;
  • text/plain — только пробелы заменяются знаком «+», буквы и другие символы кодировке не подлежат;
  • multipart/form-data — информация не кодируется. Данный параметр используется при отправлении файлов на сервер. При этом элемент загрузки файла в форме описывается тегом input с атрибутом type=»file» (подробнее о нем поговорим ниже).

Вот пример кода с применением атрибута enctype со значением «multipart/form-data»:

7. Noval >[HTML5] — это логический атрибут (значения отсутствуют), который отменяет проверку на корректность введенной пользователем информации, отправляемой на сервер:

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

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

8. Target. Результат обработки отправленных на сервер данных, внесенных юзером в форму, расположенную на странице, возвращается в форме HTML документа, который загружается в окно браузера, определяемое значением атрибута target:

  • _blank — в новое окно;
  • _self (параметр по умолчанию) — в то же окно;
  • _parent — во фрейм-родитель. Если таковой отсутствует, то в текущее окно (_self);
  • _top — в полное исходное окно, отменяя при этом все другие фреймы. При отсутствии фреймов в то же окно (_self);
  • framename — в именной фрейм, название которого задается с помощью его атрибута name ( );

Тег input и его атрибуты, расширяющие возможности форм

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

Атрибут type и формируемые им элементы — text (текстовое поле), button (кнопка), checkbox (чекбокс), radio (радиокнопка) и другие

ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
1. BUTTON Простая кнопка. Надпись оформляется с помощью параметра атрибута value.
2. CHECKBOX Чекбоксы. Позволяют выбрать галочкой один или сразу несколько необходимых вариантов, названия пунктов (A, B, C) реализованы с помощью атрибута value.
3. COLOR [HTML5] Управление палитрой цветов.
4. DATE [HTML5] Ввод календарной даты в формате DD.MM.YYYY (день, месяц и год).
5. DATETIME-LOCAL [HTML5] Выбор даты и времени в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты).
6. EMAIL [HTML5] Поле для ввода адреса электронной почты
ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
7. FILE Кнопка выбора файла для последующей загрузки его на сервер
ЗНАЧЕНИЕ ОПРЕДЕЛЕНИЕ И КОД ОТОБРАЖАЕМЫЙ ЭЛЕМЕНТ
8. HIDDEN Скрытое поле, которое не отображается, однако данные в обработчик передаются.
9. IMAGE Поле с картинкой. Нужно указать путь (относительный или абсолютный) до соответствующего изображения на сервере в качестве значения атрибута src. При нажатии картинку данные будут отправлены на сервер.
10. MONTH [HTML5] Ввод месяца и года в формате Month YYYY.
11. NUMBER [HTML5] Выбор отрицательного или положительного числа.
12. PASSWORD Текстовое поле, где символы показываются звездочками. Предназначено для скрытия вводимого пароля.
13. RADIO Переключатели (радиокнопки). Обычно используются при необходимости выбора одного варианта из предложенных. Для установки наименования каждой радиокнопки применен атрибут value.
14. RANGE [HTML5] Ползунок для выбора чисел в указанном диапазоне. Применяются следующие значения по умолчанию, если соответствующие атрибуты не указаны:

  • min = «0»
  • max = «100»
  • value = min + (max — min) / 2, или min, если max
15. RESET Кнопка для возврата данных к первоначальному значению.
16. SEARCH [HTML5] Однострочное поле для поиска.
17. SUBMIT Кнопка для отправки данных.
18. TEL [HTML5] Элемент для указания номера телефона
19. TEXT Текстовое поле для ввода символов
20. TIME [HTML5] Ввод времени в формате hh:mm.
21. URL [HTML5] Специальное поле для указания URL-адреса.
22. WEEK [HTML5] Выбор порядкового номера недели и года (Неделя NN, YYYY)

Если значение type не указано, то по умолчанию будет создано текстовое поле (type=»text»).

Какие еще атрибуты расширяют функционал input

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

В качестве примера создадим стандартную форму авторизации для ввода логина и пароля, где для каждого тега input пропишем уникальное название посредством атрибута name («login-x», «password-x», «submit1»). Вот как это будет выглядеть:

2. Accept — задает фильтрацию на виды файлов, которые можно загружать на сервер. Применим исключительно совместно с . Возможны следующий значения:

  • file_extension — расширение файла (.doc, .gif, .jpg, .png, .xls и т.д.);
  • audio/* — аудиофайлы (звуковые);
  • video/* — видеофайлы;
  • image/* — файлы изображений;
  • media_type — наименование MIME-типа (application/json, audio/mp4, image/gif и т.п.).

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

Загрузите видеоролик:

А вот с образец с возможным выбором изображений в форматах JPEG или PNG:

Загрузите картинку (формат JPEG или PNG):

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

3. Alt — применяется исключительно с целью создания альтернативного текста для графической кнопки «Отправить» (input type=»image»). Если по каким-то причинам изображение на страницу не загружено, то вместо него будет выведен фрагмент текста, описывающий эту картинку, он и является параметром данного атрибута.

Естественно, наряду с alt и type=»image» (см. таблицу параметров type выше) должен быть указан и атрибут src, где в качестве значения указан относительный либо абсолютный путь до картинки. Без лишних слов к примеру (слева — код, справа — вид кнопки без отображаемой картинки):

4. Autocomplete [HTML5] — дает возможность сохранять данные, введенные пользователями (два значения: on — автозаполнение включено, off — выключено). Если присутствие такого же атрибута в теге form регулирует автоматическое заполнение сразу для всех полей вебформы, то с помощью тега input можно его включить для одних элементов и отключить для других.

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

Но механизм автоматического заполнения (autocomplete=»on») будет работать только тогда, когда в браузерных настройках конкретного пользователя включен режим автосохранения (обычно в целях общей безопасности у большинства юзеров эта опция не активирована). Например, в веб-браузере Google Chrome он запускается так («Настройки» — «Пользователи» — «Пароли»):

5. Checked (нет значений) — устанавливает флажки (галочки) для чекбоксов (type=»checkbox») и радиокнопок, или переключателей (type=»radio»). Причем, в пределах одной вебформы можно отметить сколь угодно много чекбоксов (множественный выбор):

И только один переключатель (единичный выбор):

6. Formaction [HTML5] — работает исключительно в связке с type=»image» или type=»submit» тега input (кнопка отправки) и указывает путь до файла, который обрабатывает занесенные в веб-форму данные. Этот путь (URL) служит значением данного атрибута, который по своему действию аналогичен action для тега form, но имеет перед ним приоритет. То есть, при наличии различных параметров обоих атрибутов учитываться будет значение formaction:

Для этого примера вся информация будет обрабатываться именно скриптом, относительный путь до которого (formdata-y) описывается именно атрибутом formaction тега input. При этом элемент action=»formdata» игнорируется веб-браузером.

Еще 4 атрибута (7-10) для input, действия которых тождественны аналогичным элементам для основного тега

Введите ваше имя:

13. List [HTML5] — выводит варианты, которые можно выбирать из списка. Параметром является имя идентификатора id (глобальный атрибут) тега , который служит контейнером для набора тэгов option, каждый из которых определяет свой пункт списка:

14. Max [HTML5] — определяет максимальное значение при вводе числа либо даты, которые выступают в роли параметров. Используются целые положительные и отрицательные числа для атрибутов type=»number», type=»range», а также календарные даты в формате YYYY.MM.DD (год, месяц и день) для type=»date».

15. Min [HTML5] — устанавливает минимально возможное для выбора число или дату. В отношении значений действуют те же правила, что и для атрибута max.

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

Начало события (с 5 по 10 ноября 2020 г.):

Конец события (с 11 по 20 ноября 2020 г.):

Выберите число (от -5 до 5):

Действия следующих 6 атрибутов (пп. 16-21) тега input тождественны или почти совпадают с их воздействием применительно к тегу select.

16. Autofocus [HTML5] (параметры отсутствуют) — логический атрибут, который устанавливает фокус в поле сразу при загрузке вебстраницы, в результате чего можно вводить данные без щелчка по нему кнопкой мышки. Не может быть применен только к input type=»hidden».

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

18. Form [HTML5] — связывает элемент с формой, когда он располагается вне контейнера . Для связки к тэгу form добавляется глобальный атрибут ).

19. Multiple [HTML5] (параметров нет) — устанавливает возможность множественного выбора для пользователя и применяется только совместно с type=»file» и type=»email».

В случае использования поля для файловой загрузки возможно выбрать сразу несколько файлов с компьютера, задействовав клавиши Ctrl или Shift. Если же выводится поле для ввода адреса электронной почты (type=»email»), то вводить эмейлы следует через запятую.

20. Required [HTML5] (значения отсутствуют) — активирует обязательность внесения данных пользователем. Поэтому браузер блокирует отправку вебформы, если обязательное поле остается пустым и выводит соответствующее сообщение о необходимости его заполнения.

Данный атрибут не используется для графических и стандартных кнопок (type=»button | image»), а также для скрытого поля ввода (type=»hidden»).

21. Size — определяет ширину текстового поля в знаках (подходит лишь для элементов type с параметрами «email | password | search | tel | text | url»). Значение по умолчанию 20 символов.

Следующие четыре атрибута (22-25) для тега input несут практически тот же функционал, что и для многострочного поля textarea, но для полноты картины вкратце упомяну и их.

22. Maxlength [HTML5] — налагает лимит на максимальное количество символов, которое можно вводить при заполнении текстового поля. В случае попытки превысить это ограничение последует блокировка дальнейшего ввода. Этот атрибут применим исключительно для текстовых элементов с type=»email | password | search | tel | text | url».

23. Minlength [HTML5] — накладывает ограничение на минимальное число символов, требуемых ввести в текстовую область. Если последует попытка отправить данные, содержащие меньшее количество знаков, то появится коротенькое сообщение, в котором указано на необходимость дополнить содержание формы и будет дана информация о количестве уже введенных знаков. Условия использования точно такие же, как и в случае с maxlength.

24. Placeholder [HTML5] — можно поместить подсказку (она и будет служить параметром) прямо в текстовое поле, которая пропадет в тот момент, когда пользователь начнет вводить символы. Только для полей, которые формируются посредством параметров email, password, search, text, tel, url атрибута type тэга input.

25. Readonly (параметры отсутствуют) — указывает на то, что предварительно введенный в поле текст доступен только для чтения и копирования. Обычно применяется вместе со скриптами, где прописываются условия, выполнение которых может активировать этот элемент формы.

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

26. Pattern [HTML5] — в роли своего значения отражает регулярное выражение, на основании которого задаются правила ввода информации. При этом рекомендуется дополнительно добавить глобальный атрибут title, параметром которого внести разъяснительный текст для помощи юзерам при заполнении полей. Pattern применяется только для элементов email, password, search, text, tel, url. Разберемся на примере. Вот код упрощенной формы регистрации (с логином и паролем):

Для поля логина (type=»text») в качестве значения pattern прописано регулярное выражение [A-Za-z]<5,>, которое подразумевает использование знаков латинского алфавита, причем введено должно быть не менее пяти символов.

В отношении текстовой области для пароля (type=»password») задано значение [A-Za-z0-9]<8,>, определяющее ввод исключительно латиницы в любом регистре (большие и маленькие буквы), а также цифр, при этом общее количество всех знаков не должно быть меньше восьми.

При нарушении заданных условий ввода браузер не позволит отправить данные и выведет соответствующее предупреждение:

27. Src — определяет путь до изображения (URL, который является его значением) для отображения графической кнопки «image» (см.таблицу параметров input type выше).

28. Step [HTML5] — устанавливает шаг для элементов, предусматривающих выбор числовых значений (input type=»date | datetime-local | month | number | range | tel | time | week.»).

В качестве параметра может принимать любое целое или дробное число. По умолчанию step=»1″. Чтобы установить конечный диапазон ввода, можно опять-таки использовать атрибуты min и max, упомянутые чуть выше. Для наглядности в тестовую форму включим 2 элемента type=»number». Для первого выставим step=»2″, в для второго step=»0,1″:

Введите значение от -10 до 10:

Введите значение от 0 до 1:

29. Value — устанавливает значение элемента формы, которое будет передано обработчику. На сервер посылается пара «имя-параметр», где имя определяется атрибутом name тега input, а параметр — атрибутом value. При этом для различных элементов формы value будет играть разные роли:

  • для type=»button | reset | submit» — устанавливает текстовую надпись на кнопках;
  • для type=»checkbox | radio | image» — идентифицирует каждый чекбокс, переключатель или графическую кнопку при отправке и обработке данных на сервере;
  • для type=»password | text» — сразу при загрузке формы в поле выводит предварительный текст, который может быть изменен или полностью удален пользователем;
  • для type=»file» (загрузка файлов) не применяется, поскольку не влияет на этот элемент.

Пример использования для каждого из выше перечисленных вариантов:

Выберите CMS: WP Joomla

Здесь значение атрибута value определяет следующие составляющие каждого из элементов: выводит текстовый фрагмент для поля type=»text» («Ваше имя»), идентифицирует каждый из переключателей («1» и «2»), установленных с помощью type=»radio», а также активирует надпись на кнопке («Отправить»).

Пример создания красивой HTML формы

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

Обратите внимания, что для получения уникального оформления отдельные компоненты формы помещены в контейнеры div, к каждому из которых добавлены классы с наборами CSS свойств:

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

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

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

Естественно, в последующих публикациях продолжу описание основных тегов гипертекстовой разметки, поэтому не забывайте подписываться на обновление блога посредством e-mail. Также посмотрите для закрепления еще один урок Евгения Попова о создании контактной формы:

Интернет технологии (архив 2001-2010)

Цель работы: формирование умений создание форм с помощью HTML.

Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами.

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

Форма открывается тегом . HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой.

Формы в HTML

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

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

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

Чтобы приспособиться к этим потребностям, HTML предлагает интерактивные элементы управления формы:

  • текстовые поля (для одной или нескольких строк);
  • переключатели;
  • флажки;
  • выпадающие списки;
  • виджеты для загрузки;
  • кнопки отправки.

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

Элемент

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

Создание форм в HTML

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

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

И в этой статье Вы научитесь создавать абсолютно любые формы в HTML.

Сначала создайте простейшую HTML-страницу, в которую добавьте контейнер (тег

А теперь займёмся формой. Форма начинается с тега . У этого тега есть несколько атрибутов, которые очень желательно заполнять. Но для начала давайте создадим простейшую форму с атрибутами тега

Здесь у нас начинается описание формы, у которой есть следующие атрибуты:

1) Атрибут «name«. Значение этого атрибута означает имя HTML формы. Встаёт вопрос, зачем это надо? Ответ очень простой: если Вы будете использовать не одну форму, а несколько, то чтобы отличить одну форму от другой, необходимо задавать различные имена. А сами имена нужны для того, чтобы обращаться к формам, например, через JavaScript. Я Вам открою маленький секрет, который я Вам не советую использовать, но честности ради, скажу о нём. На самом-то деле, формы можно легко различать и без имён, поэтому, вообще говоря, имя формы совсем необязательно. Но я НАСТОЯТЕЛЬНО рекомендую давать формам имена, ведь Вам самим так будет проще понять, за что каждая из форм отвечает.

2) Атрибут «action«. Значение этого атрибута отвечает за путь к файлу скрипта, который будет обрабатывать форму. То есть мало ввести данные в форму, их же ведь ещё нужно соответствующим образом обработать, и вот как раз путь к этому файлу-обработчику и находится в значении атрибута «action«.

3) Атрибут «method«. У него может быть одно из двух очень популярных значения: «post» и «get«. Этот атрибут определяет способ отправки. Не буду вдаваться в подробности, просто скажу, что первый способ является скрытой отправкой данных, а второй открытой. Чтобы стало ещё понятнее, то давайте рассмотрим два адреса перехода:

В первом случае, пользователь не видит, что отправляет (метод «post«), а во втором он реально видит имена переменных и их значения (метод «get«). Вы, в конце статьи, можете попытаться отправить форму с помощью двух разных методов и убедиться в их различии. Но пока что скажу, что ГОРАЗДО чаще используют метод «post«, то есть скрытую отправку.

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

Первое, что мы добавим — это текстовое поле. Добавляется текстовое поле с помощью тега , а точнее с помощью атрибута этого тега «type» со значением «text«. Также перед созданием текстового поля рекомендуется написать, что это за поле, например, «Ваше имя«. Внутри тега

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

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

Уровень подготовки: Основы компьютерной грамотности, и базовые знания HTML.
Цель: Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.

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

Примечание: Вы можете найти этот пример в fieldset-legend.html (также посмотрите на результат).

Читая эту форму, экранный диктор произнесёт «Fruit juice size small» для первого элемента, «Fruit juice size medium» — для второго, «Fruit juice size large» — для третьего.

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

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

_element»>The element

As we saw in the previous article, The представляет собой подпись к элементу пользовательского интерфейса.»> element is the formal way to define a label for an HTML form widget. This is the most important element if you want to build accessible forms — when implemented properly, screenreaders will speak a form element’s label along with any related instructions. Take this example, which we saw in the previous article:

With the associated correctly with the via their for and id attributes respectively (the label for attribute references the id attribute of the corresponding widget), a screenreader will read out something like «Name, edit text».

If the label isn’t set up correctly, a screenreader will only read out something like «Edit text blank», which isn’t very helpful at all.

Note that a widget can be nested inside its представляет собой подпись к элементу пользовательского интерфейса.»> element, like so:

Even in such cases however, it is considered best practice to set the for attribute because some assistive technologies do not understand implicit relationships between labels and widgets.

Labels are clickable, too!

Another advantage of properly set up labels is that you can click the label to activate the corresponding widget, in all browsers. This is useful for examples like text inputs, where you can click the label as well as the input to focus it, but it is especially useful for radio buttons and checkboxes — the hit area of such a control can be very small, so it is useful to make it as big as possible.

Note: You can find this example in checkbox-label.html (see it live also).

Multiple labels

Strictly speaking, you can put multiple labels on a single widget, but this is not a good idea as some assistive technologies can have trouble handling them. In the case of multiple labels, you should nest a widget and its labels inside a single представляет собой подпись к элементу пользовательского интерфейса.»> element.

Let’s consider this example:

The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as «star» or «required«, depending on the screen reader’s settings — in any case, what will be spoken is made clear in the first paragraph).

  • In the first example, the label is not read out at all with the input — you just get «edit text blank», plus the actual labels are read out separately. The multiple elements confuse the screenreader.
  • In the second example, things are a bit clearer — the label read out along with the input is «name star name edit text», and the labels are still read out separately. Things are still a bit confusing, but it’s a bit better this time because the input has a label associated with it.
  • The third example is best — the actual label is read out all together, and the label read out with the input is «name star edit text».

Note: You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We’d love to hear about your experiences too.

Note: You can find this example on GitHub as required-labels.html (see it live also). don’t run the example with 2 or 3 of the versions uncommented — screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

Common HTML structures used with forms

Beyond the structures specific to HTML forms, it’s good to remember that forms are just HTML. This means that you can use all the power of HTML to structure an HTML form.

elements are also commonly used, as are HTML lists (the latter is most common for structuring multiple checkboxes or radio buttons).

In addition to the используется для группировки нескольких элементов управления без веб-форм.»> element, it’s also common practice to use HTML titles (e.g.

Above all, it is up to you to find a style that you find comfortable to code with, and which also results in accessible, usable forms.

Active learning: building a form structure

Let’s put these ideas into practice and build a slightly more involved form structure — a payment form. This form will contain a number of widget types that you may not yet understand — don’t worry about this for now; you’ll find out how they work in the next article (The native form widgets). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

  1. To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.
  2. First of all, apply the CSS to the HTML by adding the following line inside the HTML содержит машиночитаемую информацию (metadata) о документе, например его заголовок, скрипты и страницы стилей.»> :
  3. Next, start your form off by adding the outer
  4. Inside the Hide Newsletter Sign-up

Формы в HTML-документах и их обработка.

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

текстовое поле (text)

многострочное поле (textarea)

поле с паролем (password)

скрытое поле (hidden)

кнопка для отправки формы (submit)

кнопка для очистки формы (reset)

поле для отправки файла (file)

кнопка с изображением (image)

Все управляющие элементы вводятся в форму с помощью тега , а их тип определяется параметром type.

Приведем небольшой пример вывода в форме элемента text.

Отображаться данная форма в браузере, будет следующим образом:

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

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

disabled — блокирует доступ и изменение элемента.

multiple — этот параметр позволяет одновременно выбирать сразу несколько элементов списка.

name — имя элемента для отправки на сервер или обращения через скрипты.

size — количество отображаемых строк списка.

value — значение элемента.

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

HTML-код этого списка:

Обработка форм.

Что бы увидеть результат заполнения формы, необходимо произвести её обработку. Для этого мы будем использовать PHP. Разберем на примере, как обрабатываются элементы формы. Предположим, что нам не обходимо создать анкету для рассмотрения кандидатур для приема на работу. Нам понадобится текстовое поле для ввода Ф.И.О., два переключателя для выбора пола, выпадающие списки числа, месяца и года рождения, многострочное текстовое поле для описания личностных качеств и соответственно две кнопки, отправка формы и сброс формы.

HTML-код нашей анкеты будет иметь следующий вид:

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

Теперь создадим обрабатывающий PHP-сценарий. Он создаётся в виде отельного файла с расширением .php и ссылка на этот файл прописывается в строке

Добавить комментарий