Html какой тег определяет имя элемента управления формы

Имена

HTML-тег

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

Синтаксис

Базовый пример синтаксиса тега с несколькими атрибутами:

Пример, содержащий три элемента в стандартной форме:

Примеры

Базовая форма

Ниже приводится форма, которая используется для ввода имени/фамилии пользователя. Используются три тега input type : для имени и фамилии, один для кнопки отправки:

Атрибут form

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

Радио-кнопки (переключатели)

Связанные с формой элементы

Тег input рассматривается как связанный с формой элемент. Так как он может принадлежать определенной форме.

Ниже приводится список связанных с формой элементов HTML :

Атрибуты

Существует три типа тега input атрибутов : связанные с конкретным элементом, глобальные и связанные с событием.

Атрибуты, связанные с конкретным элементом

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

АтрибутОписание
acceptЗадает разделенный запятыми список типов контента, которые принимает сервер.
Допустимые значения:

Можно указать и любые MIME-типы, и любые соответствующие расширения. Например,altАльтернативный текст. Указывает на текст, который будет использоваться в случае, если браузер пользователя не может отобразить элемент управления.autocompleteПредотвращает использование браузером автоматического заполнения для этого элемента управления. Может оказаться полезным для конфиденциальных данных, таких как платежные данные и тому подобное.
Допустимые значения:

autofocusАвтоматически выделяет фокусом ввода данный элемент управления при загрузке страницы. Это позволяет начать использовать элемент управления без предварительного выбора. В документе должно быть не более одного элемента с указанным атрибутомautofocus.
Если атрибут присутствует, его значение должно быть пустой строкой или значением, соответствующим значению ASCII без учета регистра для канонического имени атрибута, без пробела в начале или в конце (например, autofocus или autofocus=»autofocus»).
Обязательными значениями атрибута для тега input являются :
ЗначениеТип данныхТип элемента управления
hiddenПроизвольная строка.Не определено.
textТекст без разрывов строк.Текстовое поле.
searchТекст без разрывов строк.Текстовое поле.
TelТекст без разрывов строк.Текстовое поле.
urlПолный URL-адрес.Текстовое поле.
emailАдрес электронной почты или список адресов электронной почты.Текстовое поле.
passwordТекст без разрывов строк (конфиденциальная информация).Текстовое поле, в котором скрываются вводимые данные (например, пароль скрывается с помощью звездочек (******) или другим аналогичным способом).
datetimeДата и время (год, месяц, день, час, минута, секунда, доля секунды) с часовым поясом, установленные в UTC.Элемент ввода даты.
dateДата (год, месяц, день) без часового пояса.Элемент ввода даты.
monthДата, состоящая из года и месяца без часового пояса.Элемент ввода месяца.
weekДата, состоящая из номера недели и недели, без часового пояса.Элемент ввода недели
timeВремя (час, минута, секунды, доли секунды) без часового пояса.Элемент ввода времени.
datetime-localДата и время (год, месяц, день, час, минута, секунда, доля секунды) без часового пояса.Элемент ввода даты и времени.
numberЧисловое значение.Текстовое поле или счетчик.
rangeЧисловое значение, с дополнительной семантикой, при которой точное значение не важно.Элемент ввода диапазон или аналогичный.
colorЦвет RGB с 8-битными красными, зелеными и синими компонентами.Элемент выбора цвета.
checkboxНабор из нуля или более значений из предопределенного списка.Чекбокс.
radioПеречень значений.Радиокнопка.
fileНоль или больше файлов, каждый из которых имеет MIME-тип и, опционально, имя файла.Метка и кнопка.
submitПронумерованное значение с дополнительной семантикой, согласно которой оно должно быть последним выбранным значением, после чего инициируется кнопка отправки данных формы.Кнопка.
imageКоордината, связанная с конкретным размером изображения, с дополнительной семантикой, согласно которой она должна быть последним выбранным значением, после чего инициируется кнопка отправки данных формы.Кликабельное изображение или кнопка.
resetНе определено.Кнопка.
buttonНе определено.Кнопка.

Глобальные атрибуты

Атрибуты обработчика событий

Атрибуты обработчика событий тега input typ e позволяют вызывать скрипт из HTML-разметки. Скрипт вызывается, когда происходит определенное « событие ». Каждый атрибут обработчика события связан с другим событием.

Ниже приведены стандартные атрибуты обработчика событий HTML5 :

Различия между HTML 4 и HTML 5

В HTML5 были введены следующие атрибуты:

В HTML 5.1 и WHATWG HTML Living Standard был введен следующий атрибут:

Спецификации

Вот официальные спецификации для элемента.

В чем разница?

Источник

HTML Формы

Для сбора пользовательских данных используется HTML форма. Затем вводимые пользователем данные могут быть отправлены на сервер для обработки.

Пример

Элемент

HTML форма содержит элементы формы.

Элемент

Элемент отображается несколькими способами, в зависимости от атрибута type.

Вот несколько примеров:

TypeОписание
Определяет однострочное поле ввода текста
Определяет переключатель (для выбора одного из многих вариантов)
Определяет кнопку отправки (для отправки формы)

Вы узнаете гораздо больше о типах ввода позже в этом уроке.

Текстовое поля

определяет однострочное поле ввода для ввода текста.

Пример

Форма с двумя полями ввода текста:

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

Примечание: Сама форма не видна. Также обратите внимание, что ширина поля ввода по умолчанию составляет 20 символов.

Элемент

Обратите внимание на использование элемента в приведенном выше примере.

Тег определяет метку для многих элементов формы.

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

Кнопки radio

определяет радиокнопки.

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

Пример

Форма с переключателями:

Именно так приведенный выше HTML код будет отображаться в браузере:

Мужчина
Женщина
другое

Кнопка submit

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

Обработчик форм обычно представляет собой страницу на сервере со скриптом для обработки входных данных.

Обработчик форм задается в окне формы атрибутом action.

Пример

Форма с кнопкой отправки:

Именно так приведенный выше HTML код будет отображаться в браузере:

Атрибут action

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

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

В приведенном выше примере данные формы отправляются на страницу на сервере под названием «/action_page.php». Эта страница содержит серверный скрипт, который обрабатывает данные формы:

HTML Упражнения

Вот список всех атрибутов

Спасибо, за вашу помощь!

Ваше сообщение было отправлено в SchoolsW3.

Источник

Элемент Form

Описание

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

Кроме этого HTML тег form представляет собой контейнер для других элементов управления. Ниже приведен их перечень:

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

Примеры

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

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

Атрибут target определяет вывод результатов в новом окне/вкладке. Страница, на которой будут выведены результаты обработки, специально предназначена для того, чтобы вы поняли механизм работы форм. Скрипт формы выполняется на сервере до вывода результатов.

Обратите внимание, что мы используем для атрибута method значение « GET » просто для разнообразия. Это позволит при открытии нового окна с результатами обработки данных формы увидеть в адресной строке браузера пару имя / значение.

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

Атрибуты

Специальные атрибуты тега form :

ACCEPT-CHARSET

Разделенный пробелами список кодировок символов, которые должны использоваться в форме. Список должен быть отсортирован по приоритетности.

Пример

AUTOCOMPLETE

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

Пример

ENCTYPE

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

Пример

METHOD

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

Пример

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

Пример

ACCEPT

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

Источник

Читайте также:  Сложные имена существительные 6 класс примеры
Оцените статью
Имя, Названия, Аббревиатуры, Сокращения
Adblock
detector