— HTML — Дока
- Кратко
- Пример
- Как понять
- Как пишется
- Атрибуты
- type
- value
- Прочие атрибуты
- Подсказки
- Ещё пример
- На практике
- Дока Дог советует
Кратко
Скопировано
Тег <input>
позволяет создавать интерактивные элементы на сайте — поле для ввода текста, кнопка, ползунок, переключатель и другие.
Пример
Скопировано
Создадим поле для ввода текста в одну строчку и ограничим количество допустимых символов в нём:
<label for="name">Введите название (от 4 до 8 символов):</label><input type="text" name="name" required minlength="4" maxlength="8" size="10">
<label for="name">Введите название (от 4 до 8 символов):</label>
<input
type="text"
name="name"
required
minlength="4"
maxlength="8"
size="10"
>
Как понять
Скопировано
<input>
— это контейнер для интерактивных элементов, с помощью которых пользователь может ввести данные, что-то выбрать, поставить галочку или нажать кнопку.
Как пишется
Скопировано
Если хочется, чтобы введённые или выбранные в <input>
данные отправились на сервер, нужно поместить этот тег в <form>
либо связать этот элемент с формой через атрибут id
.
Атрибут type
определяет, какой вид примет элемент <input>
и какую функцию будет выполнять: например, для создания поля с паролем мы напишем type
, чтобы сделать переключатель — type
, а для создания кнопки — type
.
Благодаря огромному количеству вариантов и функций, которые задаются через type
и другие атрибуты, <input>
стал одним из самых полезных и сложных тегов в HTML.
Атрибуты
Скопировано
К элементу можно применить все глобальные атрибуты.
type
Скопировано
type
— тип элемента <input>
: текстовое поле, кнопка, флажки выбора и так далее. Если не указать его, то элемент будет обычным текстовым полем text
в одну строку.
Типы для ввода данных разных форматов:
text
— поле для ввода текста в одну строку. Если попробовать вставить текст из нескольких абзацев, то они всё равно сложатся в одну строчку.email
— поле для ввода имейла. Браузер проверит, есть ли в нём знак «@» и домен.search
— поле для поиска.tel
— поле для ввода номера телефона.url
— поле для ввода URL-адреса.password
— ввод пароля. По мере ввода символы будут меняться на звёздочки ***. Можно задать минимальное и максимальное количество символов с помощью атрибутовminlength
иmaxlength
.number
— ввод числа.
Типы для различных кнопок:
submit
— простая кнопка для отправки формы.button
— обычная кнопка.image
— кнопка «Отправить» в виде картинки. Чтобы задать адрес картинки, используйте атрибутsrc
, а для альтернативного текста — атрибутalt
. Чтобы скорректировать размер изображения в пикселях, используйте атрибутыheight
иwidth
.reset
— кнопка, которая сбрасывает всё, что пользователь ввёл в поля текущей формы ранее.
Типы для ввода дат:
date
— ввод даты без времени: год, месяц и дата.datetime
— ввод даты и времени в текущем часовом поясе, когда зоны UTC не указываются.- local month
— ввод месяца и года, без указания часового пояса.week
— ввод номера недели.time
— ввод времени без указания часового пояса.
Элементы форм:
checkbox
— флажки, или чекбокс, с несколькими вариантами на выбор.radio
— круглая кнопка-переключатель для выбора одного из нескольких вариантов.range
— ползунок для выбора чисел из заданного диапазона.color
— виджет для выбора цвета. Иногда его называют колорпикер (от английского colorpicker).file
— выбор файла для отправки.
И отдельно стоит значение hidden
. Поле ввода с этим значением атрибута type
не видно на странице, но в то же время оно отправляет своё значение на сервер.
Большое преимущество установки правильного значения для type
— в мобильных браузерах будет появляться «специальная» клавиатура, упрощающая и улучшающая пользовательский опыт. Так, для <input type
у пользователя отобразится клавиатура, содержащая лишь цифры и специальные символы, нужные для корректного ввода номера телефона. Пример такой клавиатуры можно увидеть на картинке ниже:
value
Скопировано
value
— значение элемента <input>
, которое отправляется на сервер в формате «имя=значение». Имя задаётся атрибутом name
, а значение — value
. Например, <input type
.
- Если
<input>
— кнопка (<input type
), то= "button | reset | submit"> value
будет надписью на ней. Значениеvalue
для кнопки (<input type
) не передаётся на сервер.= "reset"> - Если
<input>
— кнопка в виде картинки (<input type
), то= "image"> value
будет передано в виде двух значений координат нажатия относительно изображенияимя
и. x имя
, где. y имя
— это значение атрибутаname
. - Если — текстовое поле (
<input type
), то= "password | text"> value
задаст текст, который появится в этом поле при загрузке страницы. Пользователь сможет его удалить или отредактировать. - Если вы вставляете флажок или переключатель (
<input type
), то= "checkbox | radio"> value
задаст уникальное значение элемента, по умолчаниюon
.
Прочие атрибуты
Скопировано
name
— уникальное имя элемента. Обычно имя нужно, чтобы связать<input>
с формой и отправить данные на сервер.required
— делает поле для ввода обязательным для заполнения. Пользователь не сможет нажать «Отправить», пока не введёт сюда данные. А если попробует, то браузер выведет сообщение о необходимости заполнить поле.disabled
— отключает элемент. Пользователь не сможет, например, ввести текст или выбрать нужный параметр, а сам элемент будет отображаться в сером цвете, как неактивный.autocomplete
— разрешает автозаполнение. Автозаполнение — это когда браузер предлагает сохранить, например, пароль или номер банковской карты, чтобы данные подставлялись при следующем входе. Подробнее можно прочитать в статье проautocomplete
.autofocus
— фокусируется на элементе<input>
сразу после загрузки страницы. Это значит, что пользователю не нужно специально нажимать на этот элемент, чтобы начать в нём что-то писать. В фокусе может быть только один элемент на странице. Но это не может быть элемент типаhidden
.form
— связывает отдельно стоящий элемент<input>
с формой. Для этого укажите в качестве значения имя идентификатора, который задан нужному тегу<form>
. Например, такform
. Этот атрибут позволяет разместить= "special - form" <input>
в любом месте на странице за пределами<form>
. Если его не указать, элемент<input>
будет связан с ближайшей формой.list
— связывает<input>
с элементом<datalist>
через его ID. В элементе<datalist>
указывают значения, которые пользователь может выбрать, когда вбивает текст в пустое поле. Допустим, вы ввели букву «М» в поле ввода города, и браузер предложил варианты из<datalist>
: «Москва», «Минск» и так далее. Этот атрибут не подходит для таких типов<input>
, какhidden
,password
,checkbox
,radio
,file
и любых кнопок.readonly
— не позволяет пользователю как-либо изменять элемент, оставляя его при этом рабочим. Применимо только для текстовых полей.step
— указывает шаг, с которым будет изменяться значение поля. Задаётся в числовом формате и работает с любым из перечисленных типов:number
,range
,date
иdatetime
.- local min
,max
— указывают минимальные и максимальные числовые значения соответственно для полей с типамиnumber
иrange
. Минимальные и максимальные значения даты в форматеГГГГ
для полей с типами- ММ - ДД date
иdatetime
.- local size
— указывает ширину поля для ввода в символах.placeholder
— это короткая подсказка (слово или фраза), предназначенная для помощи пользователю при вводе данных, когда поле для ввода пустует.pattern
— задаёт регулярное выражение, по которому проверяется значение элемента<input>
.multiple
— указывает, что пользователь может выбрать больше одного значения.
Подсказки
Скопировано
💡 Чтобы даже те, кто использует специальные средства для чтения с экрана (скринридеры), могли точно понять, что делает тот или иной <input>
, используйте этот тег в паре с label
.
Ещё пример
Скопировано
Вот так будет выглядеть простая форма, собранная из нескольких элементов <input>
. Мы поместили их все в контейнер <form>
, чтобы данные, которые введёт пользователь, можно было отправить на сервер:
<form name="test" method="post" action="input1.php"> <label> Текстовое поле в одну строчку: <input type="text" size="40"> </label> <fieldset> Радиокнопки: <label> <input type="radio" name="browser" value="ie"> Вариант 1 </label> <label> <input type="radio" name="browser" value="opera"> Вариант 2 </label> <label> <input type="radio" name="browser" value="firefox"> Вариант 3 </label> </fieldset> <label> Большое текстовое поле: <textarea name="comment" cols="40" rows="3"></textarea> </label> <div> <input type="reset" value="Очистить"> <input type="submit" value="Отправить"> </div></form>
<form name="test" method="post" action="input1. php">
<label>
Текстовое поле в одну строчку:
<input type="text" size="40">
</label>
<fieldset>
Радиокнопки:
<label>
<input type="radio" name="browser" value="ie">
Вариант 1
</label>
<label>
<input type="radio" name="browser" value="opera">
Вариант 2
</label>
<label>
<input type="radio" name="browser" value="firefox">
Вариант 3
</label>
</fieldset>
<label>
Большое текстовое поле:
<textarea name="comment" cols="40" rows="3"></textarea>
</label>
<div>
<input type="reset" value="Очистить">
<input type="submit" value="Отправить">
</div>
</form>
Открыть демо в новой вкладкеНа практике
Скопировано
Дока Дог советует
Скопировано
🛠 У <input>
есть несколько полезных CSS-псевдоклассов. Например, <input>
может иметь разные стили в обычном, сфокусированном и выключенном виде. А если между этими видами добавлять анимацию, можно сделать даже красиво. Например, как поля в Bootstrap, когда ты нажимаешь на <input>
, он начинает плавно подсвечиваться обводкой.
🛠 Если вы используете <input type
или <input type
, можно сами инпуты вообще скрыть: переключение будет работать при нажатии на лейбл. Так можно сделать очень красивые чекбоксы и радиокнопки на чистом CSS. Например, я как-то сделал чекбоксы на сайте в стиле классических переключалок из iOS.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
Атрибут novalidate
ctrl + alt + ←
→
<textarea>
ctrl + alt + →
Ввод HTML — имя и идентификатор
спросил
Изменено 1 год, 7 месяцев назад
Просмотрено 422к раз
Разница между атрибутами id и name в HTML (22 ответа)
Закрыт 3 года назад.
При использовании тега HTML
, в чем разница между использованием атрибутов name
и id
, особенно то, что я обнаружил, что они иногда называются одинаково?
- HTML
- HTML-ввод
0
В HTML4.01:
Имя Атрибут
Идентификатор Атрибут
- Действителен для любого элемента, кроме
,
- Каждый идентификатор должен быть уникальным на страницепри отображении в браузере,который может быть или не быть в одном и том же файле
- Может использоваться в качестве ссылки привязки в URL
- Ссылка в CSS или URL-адресе со знаком
#
- Ссылается в JavaScript с
getElementById()
и jQuery на$(#
) - Использует то же пространство имен,что и атрибут имени
- Должен содержать хотя бы один символ
- Должен начинаться с буквы
- Не должно содержать ничего,кроме букв,цифр,знаков подчеркивания(
_
),тире(–
),двоеточий(:
)или точек(.
) - Нечувствителен к регистру
В(X)HTML5 все то же самое,кроме:
Имя Атрибут
- Недействительно для
- XHTML говорит, что все буквы должны быть строчными, но большинство браузеров не следуют этому .
Идентификатор Атрибут
- Действителен для любого элемента
- XHTML говорит, что все буквы должны быть строчными, но большинство браузеров не следуют этому .
Этот вопрос был написан, когда HTML4.01 был нормой, а многие браузеры и функции отличались от сегодняшних.
10
Атрибут имени используется для публикации, например. веб-сервер. Идентификатор id в основном используется для CSS (и JavaScript). Предположим, у вас есть такая настройка:
Чтобы получить значение с помощью PHP при публикации вашей формы, он будет использовать атрибут
$_POST["message_name"];
Идентификатор используется для стилизации, как было сказано ранее, когда вы хотите использовать определенный контент CSS.
#message_id { цвет фона: #cccccc; }
Конечно, вы можете использовать одно и то же наименование для атрибута id и name . Эти двое не будут мешать друг другу.
Кроме того, имя можно использовать для большего количества элементов, например, когда вы используете переключатели. Затем имя используется для группировки ваших переключателей, поэтому вы можете выбрать только один из этих вариантов.
И в этом очень конкретном случае я могу дополнительно сказать, как используется id , потому что вам, вероятно, понадобится метка с вашим переключателем. Метка имеет атрибут для , который использует идентификатор вашего ввода, чтобы связать эту метку с вашим вводом (когда вы щелкаете метку, кнопка проверяется). Пример можно найти ниже
5
Идентификаторы должны быть уникальными
. ..внутри дерева элементов DOM страницы, чтобы каждый элемент управления был индивидуально доступен по его идентификатору
на стороне клиента (на странице браузера) по
- JavaScript-скрипты, загруженные на страницу
- стилей CSS, определенных на странице
Наличие неуникальных идентификаторов на вашей странице по-прежнему будет отображать вашу страницу, но определенно не будет действительным. Браузеры довольно снисходительны при анализе недопустимого HTML. но не делай этого только потому что
кажется что работает.
Имена довольно часто уникальны, но могут использоваться совместно
...внутри страницы DOM между несколькими элементами управления одного типа (подумайте о переключателях), поэтому, когда данные отправляются на сервер POST, отправляется только определенное значение. Поэтому, когда у вас есть несколько переключателей на вашей странице, только выбранное значение
отправляется обратно на сервер, даже если есть несколько связанных элементов управления переключателями с одним и тем же именем
.
Дополнение к отправке данных на сервер : когда данные отправляются на сервер (обычно с помощью HTTP-запроса POST), все данные отправляются в виде пар «имя-значение»
, где имя — этоимя
входного HTML-элемента управления. и значение является его значением, введенным/выбранным пользователем. Это всегда справедливо для не-Ajax-запросов. В запросах Ajax пары имя-значение могут быть независимыми от элементов управления вводом HTML на странице, потому что разработчики могут отправлять на сервер все, что захотят. Довольно часто значения также считываются из элементов управления вводом, но я просто пытаюсь сказать, что это не обязательно так.
Когда имена могут дублироваться
Иногда бывает полезно, чтобы имена были общими для элементов управления любого типа ввода формы. Но когда? Вы не указали, какой может быть ваша серверная платформа, но если вы использовали что-то вроде ASP. NET MVC, вы получаете преимущество автоматической проверки данных (клиент и сервер), а также привязку отправленных данных к сильным типам. Это означает, что эти имена должны совпадать с именами свойств типа.
Теперь предположим, что у вас есть такой сценарий:
- у вас есть представление со списком элементов одного типа Пользователь
- обычно работает с одним элементом за раз, поэтому он будет вводить данные только с одним элементом и отправлять их на сервер .
Таким образом, модель вашего представления (поскольку она отображает список) имеет тип IEnumerable
, но ваша серверная сторона принимает только один элемент типа SomeType
.
Как насчет совместного использования имен?
Каждый элемент заключен в свой собственный элемент FORM
, а входные элементы внутри него имеют одинаковые имена, поэтому, когда данные поступают на сервер (из любого элемента), они правильно привязываются к строковому типу, ожидаемому действием контроллера.
Этот конкретный сценарий можно увидеть на моем мини-сайте Креативных историй. Вы не поймете язык, но вы можете проверить эти многочисленные формы и общие имена. Неважно, что ID
также дублируются (что является нарушением правил), но это можно решить. Просто в данном случае это не имеет значения.
-
имя
идентифицирует форма поля * ; поэтому они могут совместно использоваться элементами управления, которые представляют несколько возможных значений для такого поля (переключатели, флажки). Они будут представлены как ключи для значений формы. -
id
идентифицирует элементов DOM ; так что они могут быть нацелены на CSS или JavaScript.
* имя также используется для идентификации локальных якорей , но это устарело, и в настоящее время предпочтительным способом для этого является 'id'.
0
имя
— это имя, которое используется при передаче значения (в URL-адресе или в публикуемых данных). id
используется для однозначно идентифицирует элемент для стилей CSS и JavaScript.
id
также можно использовать в качестве якоря. Раньше для этого использовалось <имя
, но вы также должны использовать id
для якорей. имя
предназначено только для публикации данных формы.
имя используется для отправки формы в DOM (объектная модель документа).
ID используется для уникального имени элементов управления HTML в DOM, особенно для JavaScript и CSS.
Имя определяет, каким будет имя атрибута после отправки формы. Поэтому, если вы хотите прочитать этот атрибут позже, вы найдете его под «именем» в запросе POST или GET.
Принимая во внимание, что идентификатор используется для обращения к полю или элементу в JavaScript или CSS.
Идентификатор используется для уникальной идентификации элемента в JavaScript или CSS.
Имя используется при отправке формы. При отправке формы будут отправлены только поля с именем.
Атрибут name
на входе используется его родительским HTML
s для включения этого элемента в качестве члена формы HTTP в запрос POST
или строки запроса в запрос GET
.
id
должен быть уникальным, поскольку он должен использоваться JavaScript для выбора элемента в DOM для манипуляции и использования в селекторах CSS.
6
Надеюсь, вам будет полезен следующий краткий пример:
<голова> <скрипт> функция checkGender () { если (document.getElementById ('мужской'). проверено) { alert("Выбранный пол: "+document.getElementById('мужской').value) } иначе, если (document.getElementById('женский').checked) { alert("Выбранный пол: "+document.getElementById('женский'). value) } еще{ alert("Пожалуйста, выберите свой пол") } } скрипт> голова> <тело>Выберите свой пол:
<форма> Мужской
Женщина
форма> тело>
В коде обратите внимание, что оба атрибута «имя» одинаковы для определения необязательности между «мужской» и «женский», но «идентификаторы» не равны, чтобы различать их.
Добавление некоторых фактических ссылок на документацию W3C, которые авторитетно объясняют роль атрибута «имя» в элементах формы. (Что бы это ни стоило, я прибыл сюда, когда изучал, как именно Stripe.js работает для реализации безопасного взаимодействия с платежным шлюзом Stripe. В частности, что заставляет элемент ввода формы отправляться обратно на сервер или предотвращает его подается?)
Применяется следующая документация W3C:
HTML 4: https://www. w3.org/TR/html401/interact/forms.html#control-name Раздел 17.2 Элементы управления
HTML 5: https://www. .w3.org/TR/html5/forms.html#form-submission-0 и https://www.w3.org/TR/html5/forms.html#constructing-the-form-data-set Раздел 4.10.22.4 Создание набора данных формы.
Как поясняется здесь, элемент ввода будет отправлен браузером тогда и только тогда, когда он имеет действительный атрибут 'name'.
Как уже отмечалось, атрибут 'id' однозначно идентифицирует элементы DOM, но не участвует в отправке обычной формы. (Хотя 'id' или другие атрибуты, конечно, могут использоваться JavaScript для получения значений формы, которые JavaScript может затем использовать для представления Ajax и т. д.)
Одна странность в отношении предыдущих ответов/комментаторов касается в том же пространстве имен. Насколько я могу судить по спецификациям, это относилось к некоторым устаревшим видам использования атрибута name (не к элементам формы). Например https://www.w3.org/TR/html5/obsolete. html:
"Авторы не должны указывать атрибут name для элементов. Если атрибут присутствует, его значение не должно быть пустой строкой и не должно быть равным значению любого из идентификаторов в домашнем поддереве элемента, отличном от собственного элемента. Идентификатор, если он есть, и не быть равным значению любого из других атрибутов имени элемента в домашнем поддереве элемента. Если этот атрибут присутствует и элемент имеет идентификатор, то значение атрибута должно быть равно идентификатору элемента. . В более ранних версиях языка этот атрибут предназначался для указания возможных целей для идентификаторов фрагментов в URL-адресах. Вместо этого следует использовать атрибут id».
Очевидно, что в этом особом случае есть некоторое совпадение между значениями id и name для тегов 'a'. Но это, по-видимому, особенность обработки идентификаторов фрагментов, а не из-за общего разделения пространства имен идентификаторов и имен.
Интересный случай использования одного и того же имени: input
элементы типа checkbox
вот так:
По крайней мере, если ответ обрабатывается PHP, если вы установите оба флажка, ваши данные POST будут отображаться:
$myfruit[0] == 'apple' && $myfruit[1] == 'orange'
Я не знаю, произойдет ли такое построение массива с другими серверными языками, или если значение атрибута name
обрабатывается только как строка символов, и это случайность синтаксиса PHP, что Массив с отсчетом от 0 строится на основе порядка данных в ответе POST, а именно:
myfruit[] яблоко мойфрукт [] апельсин
С идентификаторами такого не проделываешь. Пара ответов в разделе «Каковы допустимые значения атрибута id в HTML?» кажется, цитирует спецификацию для HTML 4 (хотя они не дают цитаты):
Токены ID и NAME должны начинаться с буквы ([A-Za-z]) и могут за которым следует любое количество букв, цифр ([0-9]), дефисов ("-"), символы подчеркивания ("_"), двоеточия (":") и точки (".").
Так символов [
и ]
недействительны ни в идентификаторах, ни в именах в HTML4 (они будут в порядке в HTML5). Но, как и во многих других случаях, связанных с html, то, что он недействителен, не означает, что он не будет работать или бесполезен.
Если вы используете JavaScript/CSS, вы должны использовать 'id' элемента управления, чтобы применить к нему любые элементы CSS/JavaScript.
Если вы используете имя , CSS не будет работать для этого элемента управления. Например, если вы используете календарь JavaScript, прикрепленный к текстовому полю, вы должны использовать id текстового элемента управления, чтобы назначить ему календарь JavaScript.
1
Очень активный вопрос . Заработайте 10 репутации (не считая бонуса ассоциации), чтобы ответить на этот вопрос. Требование к репутации помогает защитить этот вопрос от спама и отсутствия ответа.
HTML-форма — javatpoint
следующий → ← предыдущая HTML-форма — это раздел документа , который содержит такие элементы управления, как текстовые поля, поля пароля, флажки, переключатели, кнопка отправки, меню и т. д. HTML-форма позволяет пользователю вводить данные, которые должны быть отправлены на сервер для обработки, такие как имя, адрес электронной почты, пароль, номер телефона и т. д. . Зачем использовать форму HTMLHTML-формы необходимы, если вы хотите собрать некоторые данные о посетителе сайта. Например: если пользователь хочет приобрести некоторые товары в Интернете, он/она должен заполнить форму, такую как адрес доставки и данные кредитной/дебетовой карты, чтобы товар можно было отправить на указанный адрес. Синтаксис формы HTML
Элемент HTML Примечание. Элемент |