Тег html input: HTML-тег | HTML/xHTML

HTML тег input | назначение, синтаксис, атрибуты, примеры

Последнее обновление: 27. 02.2009

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

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

<form action="...">
<input type="..."/>
</form>

Атрибуты

Основные Вспомогательные События

accept	список типов содержимого, через запятую, которые сервер-обработчик формы будет корректно обрабатывать
acceskey	указываем горячую клавишу
align	задает выравнивание поля в форме bottom — нижняя граница поля выравнивается по окружающему тексту (по умолчанию) left — по левому краю окна. Текст обтекает справа middle — центр картинки по базовой линии текущей строки right — по правому краю окна. Текст обтекает слева top — верх поля выравнивается по самому высокому элементу строки
alt	альтернативный текст для кнопки с изображением
border	толщина рамки. Отсутствует в спецификации HTML 4.01!
checked	флаг. Определяет переключатель как установленный <input type=»checkbox» checked/>
class	определяет имя используемого класса
dir	определяет направление символов: ltr — слева направо rtl — справа налево
disabled	флаг. Делает элемент неактивным
hspace	отступ по горизонтали (по умолчанию 0) Отсутствует в спецификации HTML 4.01!
id	уникальный индетификатор
ismap	флаг, определяющий, что картинка является картой-изображением
lang	определяет язык отображаемого документа
maxlength	задает максимальное количество символов, которое может ввести пользователь в текстовое поле
name	уникальное имя элемента
onblur	потеря фокуса элементом
onclick	щелчек на элементе
ondblclick	двойной щелчек на элементе
onchange	потеря фокуса элементом при условии, что его содержимое изменилось
onfocus	получение фокуса элементом
onkeydown	нажатие клавиши, когда элемент имеет фокус
onkeypress	нажатие и освобождении клавиши, когда элемент имеет фокус
onkeyup	освобождение ранее нажатой клавиши, когда элемент имеет фокус
onmousedown	нажатие кнопки мыши, когда элемент имеет фокус
onmousemove	движение указателя мыши, когда элемент имеет фокус
onmouseout	смещение указателя мыши с элемента
onmouseover	помещение указателя мыши на элемент
onmouseup	освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус
onselect	выделение какого-либо текста в текстовом поле
readonly	флаг. Запрещает изменение данных поля пользователем
size	ширина текстового поля в символах
src	URL файла с изображением
style	задает встроенную таблицу стилей
tabindex	порядок обхода элементов с помощью Tab
title	всплывающая подсказка
type	тип элемента управления button — кнопка checkbox — флаг file — поле для ввода имени файла hidden — скрытое поле. На странице не отображается image — кнопка с изображением password — текстовое поле в котором символы показываются звездочками radio — переключатели. Выбор одного варианта из нескольких range — слайдер (отсутствует в спецификации HTML 4.01, поддерживает Opera, Safari и Chrome) reset — кнопка возврата данных формы к значениям по умолчанию search — поле поиска (отсутствует в спецификации HTML 4.01, поддерживает Safari и Chrome) submit — кнопка для отправки данных на сервер text — текстовое поле
usemap	применяет к изображению карту <MAP>
value	значение элемента
vspace	отступ по вертикали (по умолчанию 0) Отсутствует в спецификации HTML 4. 01!

Пример

Флаг

<input type="checkbox" checked="checked"/> флаг

Переключатель

<input type="radio"/> переключатель

Поле для отправки файла

<input type="file" value="имя файла"/>

Обычное текстовое поле

<input type="text" value="Логин"/>

Поле для ввода пароля

<input type="password" value="пароль"/>

Кнопка

<input type="button" value="Обычная кнопка"/>

Неактивная кнопка

<input type="button" value="Неактивная кнопка" disabled="disabled"/>

Рекомендации по использованию

• должен быть закрыт слешем (<input…/>)
• обязательных атрибутов нет
• по умолчанию тег <input> имеет тип type=»text»
• в таблицах стилей явно указывайте цвет фона полей, т. к. по умолчанию в браузере цвет фона полей может отличаться от белого
• в больших формах используйте атрибут tabindex для последовательного tab-обхода полей
• хорошим тоном является указание атрибута maxlength, чтобы пользователь не мог ввести заведомо больше символов, чем отведено в базе данных для этого поля (согласовывается с или задается программистами)
• некотрые браузеры подсвечивают поля в фокусе (Chrome, Safari)

Твой код:

Результат:

Формы. Теги форм

Формы есть на всех сайтах, которые предоставляют возможность поиска по сайту или имеют страницу (блок) «Контакты». Создаются формы с помощью тега <form> и ряда тегов <input>, которые имеют разный атрибут type, и в зависимости от него отвечают за разные поля ввода или другие элементы (радиокнопки, флажки).

Рассмотрим, как формируются поля форм и как можно использовать плагин Emmet для ускорения набора кода форм в вашем редакторе кода.

Тег form

Итак, основной тег <form> — является блочным (имеет свойство display: block). Закрывающий тег обязателен. Размещать внутри тега <form> можно любые другие html-теги, которые, как правило, служат для форматирования полей формы и их  заголовков.

Основными атрибутами являются action=»путь к php-файлу» и method=»get|post»:

Emmet abbr: form <form action=»contact.php»></form> Emmet abbr: form:get <form action=»» method=»get»></form> Emmet abbr: form:post <form action=»» method=»post»></form>

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

Метод get или post определяет, каким образом будут отправлены данные. Метод GET (get) отправляет данные, записывая их в адресной строке браузера. Длина такой строки невелика, поэтому большие сообщения или изображение таким способом отправить не удастся. Метод POST (post) отправляет данные скрытым способом + позволяет передать достаточно весомые данные (сообщение, изображение, zip-архив). Размер передаваемой информации зависит от настроек сервера. Обычно это от 2 до 16 Мб.

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

Вы наверняка сталкивались с заполнением полей с подписью Имя (Логин), Email, Пароль и, возможно загружали что-либо с помощью кнопки «Обзор» в текстовом поле. Все они формируются с помощью тега <input>. Рассмотрим для них аббревиатуры Emmet:

Emmet abbr: input <input type=»text» /> Emmet abbr: inp <input type=»text» name=»» /> Emmet abbr: input:text, input:t ( аналогично inp) <input type=»text» name=»» /> Emmet abbr: input:hidden, input:h (аналог [type=hidden]) <input type=»hidden» name=»» /> Emmet abbr: input:search (аналог inp[type=search]) <input type=»search» name=»» /> Emmet abbr: input:email (аналог inp[type=email]) <input type=»email» name=»» /> Emmet abbr: input:url (аналог inp[type=url]) <input type=»url» name=»» /> Emmet abbr: input:password, input:p (аналог inp[type=password]) <input type=»password» name=»» /> Emmet abbr: input:file, input:f (аналог inp[type=file]) <input type=»file» name=»» />

Среди перечисленных полей большинство относится к спецификации HTML4. HTML5 ввел такие поля, как search, url, email соответственно для полей, предназначенных для поиска информации, ввода адреса сайта или email-a.

Внутри этих полей реализована проверка правильности ввода, например, соответствие email-адреса общепринятому, т.е. наличие символа @, например. Если вы введете неверный email или url, браузер подсветит это поле красным (как правило) и при нажатии на кнопку отправки формы попросит вас корректно ввести адрес почты или адрес сайта, который начинается с http://.

Желательно еще добавлять в  поле атрибут required, т.е. обязательный, для того чтобы это поле было заполнено пользователем.

Теги кнопок

Кнопки, как правило, завершают любую форму. Добавляются в форму с помощью тега <input>. Они бывают нескольких типов (атрибут type):

• submit — отправляет форму на сервер. Пожалуй, главная кнопка в форме.
• reset — очищает поля формы до значений по умолчанию. Сейчас используется все реже и реже.
• button — обычная кнопка, с которой, как правило, связан код на JavaScript.
• image — аналог кнопки submit, но с атрибутом src=»путь к файлу изображения», который позволяет указать картинку, которая будет заменять кнопку. Был очень актуален до CSS3, т.к. позволял сделать кнопку-изображение с закругленными краями и градиентом. Сейчас используется редко, т.к. возможности CSS3 уже позволяют сделать очень многое с помощью правил форматирования.

Также вы можете использовать тег <button>, который в обычном виде является аналогом тега <input type=»button»>, но может также иметь свой атрибут type=»submit» | «reset» | «image», соответствующие аналогичным в теге <input>.

Рассмотрим применение Emmet для вставки тегов кнопок:

Emmet abbr: input:submit, input:s <input type=»submit» value=»» /> Emmet abbr: input:reset (аналог input:button[type=reset]) <input type=»reset» value=»» /> Emmet abbr: input:button, input:b <input type=»button» value=»» /> Emmet abbr: input:image, input:i <input type=»image» src=»» alt=»» /> Emmet abbr: button:submit, button:s, btn:s (аналог button[type=submit]) <button type=»submit»></button> Emmet abbr: button:reset, button:r, btn:r (аналог button[type=reset]) <button type=»reset»></button> Emmet abbr: button:disabled, button:d, btn:d (аналог button[disabled. ]) <button disabled=»disabled»></button>

Флажки (checkboxes)

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

Для оформления флажков часто используются теги label. Поскольку элемент типа checkbox  также является одним из вариантов тега input, то текст, который размещен рядом с флажком, как бы к нему не относится. А тег label позволяет указать принадлежность текста инпуту — для этого в label записывается атрибут for cо значением в виде id соответствующего <input type=»checkbox»>. С одной стороны, тег label при клике на тексте позволяет выделить соответствующий флажок, с другой — label помогают в форматировании внешнего вида текста. Для них часто задают margin, padding, font-family, color и др. css-свойства.

Обратите внимание, как в разметке использованы теги input и label, а также на css-правила для label в тегах <style>:

<style> . form-line { margin-bottom: 10px; } label { display: inline-block; vertical-align: top; margin-left: 10px; } </style> <form name=»langForm»> <div> <input type=»checkbox» name=»lang1″ value=»ru» checked> <label for=»lang1″>Русский</label> </div> <div> <input type=»checkbox» name=»lang2″ value=»ua» checked> <label for=»lang2″>Украинский</label> </div> <div> <input type=»checkbox» name=»lang3″ value=»by»> <label for=»lang3″>Белорусский</label> </div> <div> <input type=»checkbox» name=»lang4″ value=»en»> <label for=»lang4″>Английский</label> </div> <div> <input type=»checkbox» name=»lang5″ value=»gr»> <label for=»lang5″>Немецкий</label> </div> <div> <input type=»checkbox» name=»lang6″ value=»fr»> <label for=»lang6″>Французский</label> </div> </form>

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

<input type=»checkbox» name=»lang1″ value=»ru» checked> <label for=»lang1″>Русский</label>

Emmet аббревиатуры для checkbox и label:

input:checkbox, input:c <input type=»checkbox» name=»|»> label <label for=»|»></label>

Для оформления checkbox-ов существует довольно много рецептов и плагинов. Большая часть из них собрана в этой статье.

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

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

Отличие переключателей от флажков заключается не только во внешнем виде.

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

<form name=»jobForm»> <div> <input type=»radio» name=»job»> <label for=»job1″>Работаю постоянно</label> </div> <div> <input type=»radio» name=»job»> <label for=»job2″>Работа временная или сезонная</label> </div> <div> <input type=»radio» name=»job»> <label for=»job3″>Не работаю</label> </div> <div> <input type=»radio» name=»job»> <label for=»job4″>Сижу дома с ребенком</label> </div> <div> <input type=»radio» name=»job»> <label for=»job5″>Учусь</label> </div> </form>

Обратите внимание, что у всех <input type=»radio»> атрибут name=»job», а вот id разные, т. к. они связаны с тегом label.

Emmet аббревиатуры для radio:

input:radio, input:r, inp[type=radio] <input type=»radio» name=»|»>

Кстати, предыдущий пример можно полностью оформить в виде тегов с помощью аббревиатуры Emmet. Придется только текст в label дописать:

form[name=»jobForm»]>.form-line*5>input:r[name=job][id=»job$»]+label[for=»job$»]

Скопируйте аббревиатуру и нажмите клавишу Tab в самом конце (без пробела), чтобы ее раскрыть.

Пример оформления радио-кнопок и флажков из статьи:

See the Pen Using Pseudo Elements for Input Styling by Alex Bergin (@abergin) on CodePen.

Просмотров: 214

Html формы для сайта — теги Form, Input и Select, Option, Textarea, Label и другие для создания элементов вебформ

23 января 2021

1. Зачем нужны и как работают формы на современных сайтах
2. Тег Input
3. Input с различными значениями для Type
4. Другие атрибуты тэга Input и примеры их использования
5. Выпадающие списки, текстовые области и другие формы
6. Select и Option — тэги выпадающих списков
7. Атрибуты тега Option
8. Textarea — создание текстового поля в форме
9. Label — для чего нужен этот Html тэг в форме
10. Fieldset и Legend — разбиваем форму на части

Приветствую вас, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня я хочу поговорить о такой неотъемлемой составляющей верстки любого сайта, как HTML формы. Какой бы не был движок вашего сайта (cms), на нем обязательно будут в том или ином виде использоваться формы, созданные с помощью тегов Form и Input, а так же атрибутов и параметров Button, Checked, Value, Checkbox, Radio, Checkbox, Submit.

Ну, и еще можно добавить к этому элементы для создания выпадающих списков и текстовых полей — Select, Option, Textarea, Label, Fieldset, Legend.

Зачем нужны и как работают формы на современных сайтах

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

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

Да, хочу еще напомнить, что мы уже успели рассмотреть много материалов на тему языка гипертекстовой разметки, например, узнали принципы формирования цветов в Html, трех видов списков на тегах ul, ol, li, dl) и принципы создания таблиц на тегах Tr, Th, Td, Table.

По своей сути формы состоят из элементов, для создания которых внутри основного контейнера из тегов Form вставляют различные тэги — Checked, Value, Checkbox, Radio, Checkbox, Submit и др. Нам лишь нужно будет расположить ее код в любом удобном для этого месте шаблона сайта, указав с помощью тегов и их атрибутов, как она должна будет выглядеть.

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

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

Например, в случае обратной связи пользователь, после того как заполнит поле со своим именем, введет свой E-mail и текст сообщения, а затем нажмет на кнопку отправки, будет вправе надеяться на отправку данных из формы на E-mail автора сайта. Но реализовать такое с помощью только одного языка гипертекстовой разметки (здесь читайте что такое Html, теги и валидатор W3C), к сожалению, не возможно.

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

Обычно программа обработки представляет из себя скрипт, написанный на языке PHP. Поэтому в атрибуте Action тэга Form вы должны будете прописать путь к файлу этого скрипта, лежащего на сервере вашего хостинга. Приведу в качестве примера подписку на RSS ленту моего блога посредством E-mail:

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

Теги Form и Input для создания кнопок, чекбоксов и радиокнопок

Любая форма должна быть заключена в открывающий и закрывающий тэги Form. Это своеобразный контейнер для их создания. У этого тега имеется ряд обязательных и необязательных атрибутов:

1. Name – уникальное имя, которое нужно указывать, если в Html файле, где вы что-то делаете, будет использоваться несколько вебформ
2. Action – обязательный атрибут указывающий путь к скрипту, которому будут переданы данные из нее для дальнейшей обработки
3. Method – с помощью него вы можете изменить метод передачи данных из этой вебформы скрипту файла обработчика. Если вы его не укажете, то по умолчанию будет использоваться метод Get, который, собственно говоря, предназначен в основном для переменных и коротких сообщений, и к тому же открытым способом передавая данные через адресную строку браузера. Для передачи данных форм скрипту обработчика все же лучше использовать метод POST, предназначенный специально для передачи текстовых сообщений закрытым способом

Рассмотрим остальные тэги, позволяющие создавать разнообразные вебформы. Самый универсальный – это Input. Внутри него обязательно прописывают атрибут Type, который определяет, что именно будет из себя представлять HTML форма, созданная с помощью этого тэга.

C помощью Input и Type можно создавать следующие элементы:

1. однострочные текстовые поля (Type=»Text»)
2. поля для ввода пароля (Type=»Password»)
3. чекбоксы (Type=»Checkbox»)
4. радиокнопки (Type=»Radio»)
5. скрытые поля (Type=»Hidden»)
6. обычные кнопки (Type=»Button»)
7. кнопки для отправки данных в обработчик (Type=»Submit»)
8. кнопки для приведения вебформы к исходному состоянию (Type=»Reset»)
9. поля для загрузки файлов на сервер (Type=»File)
10. кнопки с изображением (Type=»Image»)

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

Примеры форм, созданных на Input с различными значениями для Type

Другие атрибуты тэга Input и примеры их использования

Рассмотрим, для чего нужны остальные атрибуты:

1. Name – в случае, если данные должны быть отправлены в скрипт программы обработчика, то вы должны обязательно указать параметр для атрибута Name. Под этим именем данные, отправленные из формы, будут фигурировать в программе обработчика информации.
2. Size — с помощью него задается размер поля создаваемой вебформы. Значение указывается в количестве символов, которое сможет поместиться в данном поле. Если Size не указан, то ширина будет принята по умолчанию равной 24 символам
3. Maxlength — по умолчанию количество символов, которое можно будет ввести в Html форму, не ограничено, но с помощью Maxlength можно задать это ограничение. Больше символов, чем в нем будет указано, вам ввести в поле не удастся
4. Value — с помощью него можно задать, что именно будет написано по умолчанию в поле или же на кнопке отправки данных
5. Checked — это атрибут-флаг, который можно вставить в Input для радиокнопок (radio) или же для чекбоксов (checkbox). В этом случае данная радиокнопка или чекбокс будут активными при загрузке страницы с вебформой (в них уже будет стоять галочка)

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

Теперь давайте рассмотрим создание вебформы с радиокнопками (Radio):

Обратите внимание, что в этой форме два раза используется тег Input – по разу для создания каждой из двух радиокнопок. Причем, в каждом из них прописан атрибут Name с одинаковым значением (rezultat), а значение Value разное (YES и NO).

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

Рассмотрим пример создание вебформы с чекбоксами (Checkbox):

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

Select, Option, Textarea, Label, Fieldset, Legend — выпадающие списки, текстовые области и другие элементы вебформ

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

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

Причем, все составляющие ее элементы (вроде Select, Option, Textarea, Label, Fieldset, Legend) представляют собой уже законченные заготовки (контейнеры), для вставки которых достаточно будет лишь использовать нужный тег с нужными атрибутами и параметрами.

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

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

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

Хотя, данные можно отправить не только на сервер, но и, например, по электронной почте на адрес, заданный в атрибуте Action тэга Form. При отправке из Html данных на E-mail у пользователя, заполняющего поля, после нажатия им на кнопку отправки данных, запустится почтовая программа используемая на его компьютере по умолчанию.

Открывающий тег Form в таком случае должен выглядеть примерно так:

<form action="mailto:[email protected]" enctype="text/plain">

Select и Option — тэги выпадающих списков

Все элементы вебформы, которые создают поля с выпадающими списками, формируются одинаковым образом. Сначала задается контейнер поля со списком с помощью открывающего и закрывающего Html тега Select. А затем внутри этого контейнера создаются отдельные контейнеры с пунктами (элементами) этого списка. Это делается с помощью открывающих и закрывающих тэгов Option.

Получается примерно так:

Но это упрощенная конструкция, т.к. у Select и Option имеется ряд атрибутов, которые определяют свойства и внешний вид создаваемого поля с выпадающим списком.

1. Name — вы должны задать уникальное имя для данного элемента вебформы, создаваемого с помощью Select. Это имя будет передано на сервер в программу обработчик данных в качестве имени для переменной. В качестве значения этой переменной будет передано значение атрибута Value (задается в Option для каждого пункта) того пункта выпадающего списка, который выберет пользователь.
2. Size — с помощью него можно задать количество отображаемых пунктов. Иначе говоря, с помощь Size можно задать высоту списка, измеряемую в количестве отображаемых строк. Если вы не указываете в явном виде значение Size в теге Select, то будет использоваться значение высоты выпадающего списка по умолчанию, при этом она будет разной в случае отсутствия или присутствия в Select атрибута Multiple:
   1. Если Multiple в Select присутствует, то высота выпадающего списка в вебформе будет по умолчанию равна количеству его элементов. Т.е. будут показаны все элементы выпадающего списка с множественным выбором. См. пример множественного ниже. Если атрибут Size в Select задать меньше количества пунктов, то справа появится полоса прокрутки.
   2. Если Multiple в Select отсутствует, то высота выпадающего списка в вебформе будет по умолчанию равна одной строке. Т.е. видна будет только одна строка, а остальные пункты будут доступны только при нажатии на кнопку лифта (справа). См. пример приведенный ниже
3. Multiple — приписывание данного атрибута в теге Select позволит вам создать выпадающий список с возможность одновременного выбора нескольких пунктов. Подробнее об этом атрибуте читайте ниже.

Формы с выпадающими списками можно разделить на два варианта. В первом варианте вы сможете выбрать только один элемент (строку) поля с выпадающим списком, во втором варианте — удерживая Ctrl или Shift сможете выбрать одновременно несколько из имеющихся пунктов.

При этом во втором варианте будут отправлены на сервер данные о всех выбранных пунктах. Какой именно выпадающий список будет создан, определяется наличием или отсутствием в тэге Select атрибута Multiple.

Multiple указывается в Select без параметра, т.к. пишется просто Multiple и все. Если он присутствует, то будет создана вебформа выпадающего списка с возможностью множественного выбора (удерживая Ctrl или Shift).

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

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

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

Если в тэге Select атрибута Multiple не будет, то выбрать можно будет только один элемент этого выпадающего списка (строку).

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

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Атрибуты тега Option

1. SelectED — он определяет, какой пункт выпадающего списка будет выделен. Т.е. будет отображаться с одним видимым пунктом. В случае же списка с множественным выбором (если в Select присутствует атрибут Multiple) можно будет с помощью указания SelectED в Html теге Option выделить сразу несколько пунктов.
2. Value — на сервер из вебформы поля выпадающего списка будет отправлена пара значений — имя для переменной и значение этой переменной. Так вот, имя для переменной берется из атрибута Name тэга Select, а значение этой переменной будет взято из Value тега Option, но только того пункта (или пунктов, в случае множественного выбором), который выбрал пользователь перед тем, как нажать кнопку отправки данных.

   SelectLabelSelectEDKtoNaNovenkogo.ruLegend

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

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

Например так:

LabelSelectSelectEDKtoNaNovenkogo.ruLegend

Textarea — создание текстового поля в форме

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

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

<form>
<textarea rows=»3″ cols=»15″ name=»textt»>Что вы можете сообщить о себе?</textarea>
</form>

Вместе с Textarea можно использовать следующие атрибуты:

1. Name — вы задаете имя для этого элемента вебформы. Оно будет передано на сервер в программу обработчика данных
2. Cols — вы можете задать с помощью него ширину создаваемого многострочного поля в символах.
3. Rows — задаем высоту создаваемого многострочного поля (в строках). Если строк у текста, вводимого пользователем, окажется больше, чем высота многострочного поля для текста, то справа от поля в вебформе появится полоса прокрутки.
4. Readonly — запрет пользователям на изменение или добавление своего текста в это поле (только для чтения).
5. Disabled — пользователь, так же как в случае с атрибутом Readonly, не сможет изменить содержимое текстового поля в вебформе, но оно изменит свой цвет на серый, обозначающий его неактивность.

Label — для чего нужен этот Html тэг в форме

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

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

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

Но как связать элемент Html формы и текст? Для этого нужно дописать в атрибут ID с уникальным параметром, а текст нужно окружить открывающим и закрывающим тэгами Label. И это еще не все. В открывающем теге Label нужно прописать атрибут For, параметр которого должен быть точно таким же, как и у атрибута ID в Html теге элемента формы. Получается примерно так:

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

Fieldset и Legend — разбиваем форму на части

Вы, наверное, часто видели, что большие формы в Html бывают разбиты на группы (Fieldset), которые обведены в рамочку и у каждой такой группы имеется свой заголовок (Legend). Реализуется это с помощью всего двух тэгов: Fieldset и Legend. Они парные, т.е. у них должны быть в обязательном порядке открывающий и закрывающий.

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

Вот пример создания групп с помощью Fieldset и Legend:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Тип ввода HTML Атрибут

❮ HTML тег

Пример

HTML-форма с двумя полями ввода; одно текстовое поле и одна кнопка отправки:

Дополнительные примеры «Попробуйте сами» ниже.

Определение и использование

Атрибут типа определяет тип элемент для отображения.

Если атрибут типа не указан, типом по умолчанию является «текст».

Поддержка браузера

Синтаксис

Значения атрибутов

Значение	Описание
кнопка	Определяет кнопку, на которую можно нажимать (обычно используется с JavaScript для активации скрипта)
флажок	Определяет флажок
цвет	Определяет палитру цветов
дата	Определяет элемент управления датой (год, месяц, день (без времени))
локальная дата и время	Определяет дату и время (год, месяц, день, время (без часового пояса)
электронная почта	Определяет поле для адреса электронной почты
файл	Определяет поле выбора файла и кнопку «Обзор» (для загрузки файлов).
скрыто	Определяет скрытое поле ввода
изображение	Определяет изображение как кнопку отправки
месяц	Определяет месяц и год (без часового пояса)
номер	Определяет поле для ввода числа
пароль	Определяет поле пароля
радио	Определяет переключатель
диапазон	Определяет элемент управления диапазоном (например, ползунок).
сброс	Определяет кнопку сброса
поиск	Определяет текстовое поле для ввода строки поиска
представить	Определяет кнопку отправки
тел	Определяет поле для ввода телефонного номера
текст	По умолчанию. Определяет однострочное текстовое поле
время	Определяет элемент управления для ввода времени (без часового пояса)
url	Определяет поле для ввода URL
неделя	Определяет контроль недели и года (без часового пояса)

Другие примеры

Тип ввода: кнопка

Кнопка, активирующая JavaScript при нажатии:

Тип ввода: флажок

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

У меня велосипед


У меня есть машина


У меня есть лодка

Тип ввода: цвет

Выберите цвет из палитры цветов:

Выберите свой любимый цвет:

Тип ввода: дата

Определите элемент управления датой:

День рождения:

Тип ввода: datetime-local

Определите дату и время (без часового пояса):

День рождения (дата и время):

Тип ввода: электронная почта

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

Введите свой адрес электронной почты:

Тип ввода: файл

Определите поле выбора файла и кнопку «Обзор». .. «кнопка (для загрузки файлов):

Выберите файл:

Тип ввода: скрытый

Определите скрытое поле (невидимое для пользователя).

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

Тип ввода: изображение

Определить изображение как кнопку отправки:

Тип ввода: месяц

Определите месяц и год (без часового пояса):

День рождения (месяц и год):

Тип ввода: число

Определите поле для ввода номера (вы также можете установить ограничения на то, какие номера принимаются):

Количество (от 1 до 5):

Используйте следующие атрибуты, чтобы указать ограничения:

• max — указывает максимально допустимое значение
• мин — указывает минимально допустимое значение
Шаг
• — задает допустимые интервалы номеров
Значение
• — указывает значение по умолчанию

Тип ввода: пароль

Определите поле пароля (символы замаскированы):

Пароль:

Тип входа: радио

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

Мужской


Female


Другое

Тип ввода: диапазон

Определите элемент управления для ввода числа, точное значение которого не имеет значения (например, ползунок). Диапазон по умолчанию — от 0 до 100. Однако вы можете установить ограничения на числа принимаются с атрибутами min, max и step:

Объем (от 0 до 50):

Используйте следующие атрибуты, чтобы указать ограничения:

• max — указывает максимально допустимое значение
• мин — указывает минимально допустимое значение
Шаг
• — задает допустимые интервалы номеров
Значение
• — указывает значение по умолчанию

Тип входа: сброс

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

Совет: Осторожно пользуйтесь кнопкой сброса! Это может раздражать пользователей, которые случайно активируют кнопку сброса.

Тип ввода: поиск

Определите поле поиска (например, поиск по сайту или поиск Google):

Искать в Google:

Тип ввода: представить

Тип входа: тел.

Определите поле для ввода номера телефона:

Введите свой номер телефона:

Тип ввода: текст

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

Имя:


Фамилия:

Тип ввода: время

Определите элемент управления для ввода времени (без часового пояса):

Выберите время:

Тип ввода: url

Определите поле для ввода URL:

Добавьте свою домашнюю страницу:

Совет: Safari на iPhone распознает тип ввода URL-адреса и изменяет экранную клавиатуру в соответствии с ним (добавляет. com вариант).

Тип ввода: неделя

Задайте контроль недели и года (без часового пояса):

Выберите неделю:

: элемент Input (ввод формы) — HTML: язык разметки гипертекста

 

   Фрукты:  dir" value = "cherry"> 
  


 

Строка, определяющая элемент

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

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

Примечание: Ввод может быть связан только с одной формой.

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

  <специалист по данным>
   # ff0000 
   # ee0000 
   # dd0000 
   # cc0000 
   # bb0000 





  Текст   
  Цвет   
  Диапазон   
  Число   
  URL   
  

Действует на текст , поиск , url , тел , электронная почта , дата , месяц , неделя , время , datetime-local , номер , диапазон и цвет .

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

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

См. Элемент .

макс

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

Существует особый случай: если тип данных периодический (например, для дат или времени), значение max может быть ниже значения min , что указывает на то, что диапазон может быть циклическим; например, это позволяет указать временной диапазон от 22:00 до 4:00.

макс. Длина

Действителен для текста , поиска , url , tel , email и пароля , он определяет максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в поле .Это должно быть целое число 0 или больше. Если не указано maxlength или указано недопустимое значение, поле не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength .

Входные данные не пройдут проверку ограничения, если длина текста, введенного в поле, превышает maxlength UTF-16 code units. По умолчанию браузеры запрещают пользователям вводить больше символов, чем разрешено атрибутом maxlength .Для получения дополнительной информации см. Проверка на стороне клиента.

мин

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

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

Существует особый случай: если тип данных периодический (например, для дат или времени), значение max может быть ниже значения min , что указывает на то, что диапазон может быть циклическим; например, это позволяет указать временной диапазон от 22:00 до 4:00.

мин. Длина

Действителен для текста , поиска , url , tel , email и пароля , он определяет минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести в запись поле. Это должно быть неотрицательное целое число, меньшее или равное значению, заданному параметром maxlength . Если не указана минимальная длина или указано недопустимое значение, вход не имеет минимальной длины.

Входные данные не пройдут проверку ограничения, если длина текста, введенного в поле, меньше минимальной длины кодовых единиц UTF-16, что препятствует отправке формы. Для получения дополнительной информации см. Проверка на стороне клиента.

кратное

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

наименование

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

Что в имени

Считайте имя обязательным атрибутом (даже если это не так). Если для ввода не указано имя или имя пусто, значение ввода не отправляется с формой! (Отключенные элементы управления, неотмеченные переключатели, снятые флажки и кнопки сброса также не отправляются.)

Есть два особых случая:

1. _charset_ : при использовании в качестве имени элемента

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

isindex : По историческим причинам имя isindex недопустимо.

имя и радио-кнопки

Атрибут name создает уникальное поведение для переключателей.

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

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

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

HTMLFormElement.elements

Когда элементу ввода присвоено имя , это имя становится свойством элемента формы HTMLFormElement.элементы недвижимость. Если у вас есть вход, имя которого установлено как гость , а другое имя - размера шляпы , можно использовать следующий код:

  let form = document.querySelector («форма»);

пусть guestName = form.elements.guest;
let hatSize = form.elements ["размер шляпы"];
  

При запуске этого кода guestName будет HTMLInputElement для поля guest , а hatSize будет объектом для поля размера шляпы .

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

Действительно для электронной почты , пароля , тел и текста ввод только типов .Определяет, какая часть ввода отображается. В основном создает тот же результат, что и установка свойства width CSS с некоторыми особенностями. Фактическая единица измерения значения зависит от типа ввода. Для пароля и текста это количество символов (или em единиц) со значением по умолчанию 20 , а для других - пикселей с. Ширина CSS имеет приоритет над атрибутом размера.

- HTML: язык разметки гипертекста

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

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

  пусть theText = myTextInput.ценность;
  

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

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

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

список

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

maxlength

Максимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести во ввод текста .Это должно быть целочисленное значение 0 или больше. Если maxlength не указана или указано недопустимое значение, ввод text не имеет максимальной длины. Это значение также должно быть больше или равно значению minlength .

Входные данные не пройдут проверку ограничения, если длина текстового значения поля больше maxlength UTF-16 code units long. Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

minlength

Минимальное количество символов (в единицах кода UTF-16), которое пользователь может ввести во ввод текста . Это должно быть неотрицательное целое число, меньшее или равное значению, заданному параметром maxlength . Если не указана минимальная длина или указано недопустимое значение, ввод текста не имеет минимальной длины.

Входные данные не пройдут проверку ограничения, если длина текста, введенного в поле, меньше minlength UTF-16 кодовых единиц.Проверка ограничений применяется только тогда, когда значение изменяется пользователем.

образец

Атрибут шаблона , если он указан, представляет собой регулярное выражение, которому должно соответствовать входное значение , чтобы значение прошло проверку ограничения. Это должно быть допустимое регулярное выражение JavaScript, используемое типом RegExp и описанное в нашем руководстве по регулярным выражениям; флаг 'u' указывается при компиляции регулярного выражения, так что шаблон обрабатывается как последовательность кодовых точек Unicode, а не как ASCII.Вокруг текста шаблона не следует указывать косую черту.

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

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

Дополнительные сведения и пример см. В разделе «Указание рисунка».

заполнитель

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

Если содержимое элемента управления имеет одну направленность (LTR или RTL), но должно представлять заполнитель с противоположной направленностью, вы можете использовать символы форматирования двунаправленного алгоритма Unicode, чтобы переопределить направленность внутри заполнителя; см. Переопределение двунаправленного текста с помощью управляющих символов Unicode в Алгоритме двунаправленного текста Unicode для этих символов.

только для чтения

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

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

размер

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

Это означает, что , а не , устанавливает ограничение на количество символов, которые пользователь может ввести в поле. Он лишь приблизительно указывает, сколько людей можно увидеть одновременно.Чтобы установить верхний предел длины входных данных, используйте атрибут maxlength .

проверка орфографии

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

ложный

Отключить проверку орфографии для этого элемента.

истина

Включить проверку орфографии для этого элемента.

"" (пустая строка) или без значения

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

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

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

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

автозамена Этот API не стандартизирован.

Расширение Safari, атрибут автозамены - это строка, которая указывает, следует ли активировать автоматическое исправление, когда пользователь редактирует это поле. Допустимые значения:

по

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

выкл

Отключить автоматическое исправление и замену текста.

mozactionhint Этот API не стандартизирован.

Расширение Mozilla, поддерживаемое Firefox для Android, которое дает подсказку о том, какое действие будет выполнено, если пользователь нажмет клавишу Enter или Return при редактировании поля. Эта информация используется, чтобы решить, какую метку использовать на клавише Enter на виртуальной клавиатуре.

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

элементы типа text создают базовые однострочные входы. Вы должны использовать их везде, где вы хотите, чтобы пользователь вводил однострочное значение, и нет более конкретного типа ввода, доступного для сбора этого значения (например, если это дата, URL, адрес электронной почты или поисковый запрос, вы У меня есть варианты получше).

Базовый пример

  
  

     Выберите имя пользователя: 
    
  
  

     Отправить 
  
  

Это выглядит так:

При отправке на сервер будет отправлена ​​пара имя / значение данных: uname = Chris (если перед отправкой в ​​качестве входного значения было введено «Chris»). Вы должны не забыть включить атрибут name в элемент , иначе значение текстового поля не будет включено в отправленные данные.

Установка заполнителей

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

  <форма>
  

     Выберите имя пользователя: 
    
  
  

     Отправить 
  
  

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

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

Размер физического элемента ввода

Физическим размером поля ввода можно управлять с помощью атрибута size . С его помощью вы можете указать количество символов, которое вводимый текст может отображать одновременно. Это влияет на ширину элемента, позволяя указать ширину в символах, а не в пикселях. В этом примере, например, ширина ввода составляет 30 символов:

  <форма>
  

     Выберите имя пользователя: 
    
  
  

     Отправить 
  
  

элементы типа text не имеют автоматической проверки, примененной к ним (поскольку базовый ввод текста должен быть способен принимать любую произвольную строку), но есть некоторые доступные параметры проверки на стороне клиента, которые мы ' Обсудим ниже.

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

Примечание по стилю

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

  div {
  нижнее поле: 10 пикселей;
  положение: относительное;
}

input + span {
  отступ справа: 30 пикселей;
}

input: invalid + span: after {
  позиция: абсолютная; содержание: '✖';
  отступ слева: 5 пикселей;
}

input: valid + span: after {
  позиция: абсолютная;
  содержание: '✓';
  отступ слева: 5 пикселей;
}  

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

Требуется ввод данных

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

  <форма>
  

     Выберите имя пользователя: 
    
     
  
  

     Отправить 
  
  

Это выглядит так:

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

Длина входного значения

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

В приведенном ниже примере требуется, чтобы вводимое значение состояло из 4–8 символов.

  <форма>
  

     Выберите имя пользователя: 
    
     
  
  

     Отправить 
  
  

Это выглядит так:

Если вы попытаетесь отправить форму, содержащую менее 4 символов, вы получите соответствующее сообщение об ошибке (которое различается в зависимости от браузера).Если вы попытаетесь ввести более 8 символов, браузер вам не позволит.

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

Указание шаблона

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

Пример ниже ограничивает значение 4-8 символами и требует, чтобы оно содержало только строчные буквы.

  <форма>
  

     Выберите имя пользователя: 
    
     
    
 Имена пользователей должны быть в нижнем регистре и иметь длину от 4 до 8 символов. 
  
  

     Отправить 
  
  

Это выглядит так:

Таблицы BCD загружаются только в браузер

Тег HTML

Тег используется в элементе

и определяет поля для ввода пользователем. Тип поля (текст, флажок, переключатель, поле пароля и т. Д.) Определяется значением атрибута type. Тег не имеет текстового содержания, он содержит только атрибуты.

Он принадлежит к группе тегов, называемой элементами формы.

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

Синтаксис¶

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

Пример тега HTML : ¶

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

Пример HTML-тега с HTML-тегом : ¶

  

  
    
  
  
    

       Ваше имя: 
      
      

      

       Ваша фамилия: 
      
      

      

       Введите свой адрес электронной почты: 
      
      

      

      
    
  
  

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

Result¶

Attributes¶

Основным атрибутом, определяющим тип поля ввода, является type. Если атрибут отсутствует, значение по умолчанию - «текст».

Тег также поддерживает глобальные атрибуты и атрибуты событий.

Значения атрибута type¶

Как оформить тег ?

Общие свойства для изменения визуального веса / выделения / размера текста в теге :

• Свойство CSS font-style задает стиль шрифта. нормальный | курсив | косой | начальная | наследовать.
• Свойство CSS font-family определяет приоритетный список из одного или нескольких имен семейств шрифтов и / или родовых имен семейств для выбранного элемента.
• Свойство CSS font-size устанавливает размер шрифта.
• Свойство CSS font-weight определяет, должен ли шрифт быть жирным или толстым.
• Свойство CSS text-transform управляет регистром текста и заглавными буквами.
• Свойство CSS text-decoration задает украшение, добавленное к тексту, и является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Раскрашивание текста в теге :

• Свойство цвета CSS описывает цвет текстового содержимого и оформления текста.
• Свойство CSS background-color устанавливает цвет фона элемента.

Стили макета текста для тега :

• Свойство CSS text-indent задает отступ первой строки в текстовом блоке.
• Свойство CSS text-overflow указывает, как пользователь должен сообщить о переполненном содержимом, которое не отображается.
• CSS свойство white-space определяет, как обрабатывается белое пространство внутри элемента.
• Свойство CSS word-break указывает, где строки должны быть разорваны.

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

---

Тег HTML: input | HTML Dog

input не имеет содержимого и поэтому не требует закрывающего тега.

Атрибут	Описание	Возможные значения
наименование	Имя элемента управления формы, которое нужно связать с его значением.	Текст (без пробелов).
тип	Тип элемента управления формы.	текст : Текстовое поле - текст без разрывов строки. (по умолчанию) пароль : текстовое поле с закрытым вводом . флажок : флажок / флажок. радио : Радиокнопка - позволяет выбрать один элемент управления в группе, имеющей одно и то же значение атрибута name . отправить : кнопка «Отправить» - отправить форму. сброс : Кнопка сброса - сбрасывает элементы управления в форме к их начальным значениям по умолчанию. скрытый : скрытый элемент управления , который не может быть доступен напрямую пользователю, но значение которого отправляется вместе с остальными данными формы. изображение : изображение , которое при нажатии или ином выборе отправляет форму.Координаты точки в пикселе, по которой происходит щелчок по изображению, станут значением элемента управления. файл : Загрузка файла - позволяет выбрать локальный файл для отправки. кнопка : Кнопка без поведения по умолчанию. поиск : текстовое поле для строк поиска . tel : Текстовое поле для телефонных номеров . url : текстовое поле для абсолютных URL-адресов . email : текстовое поле для адресов электронной почты . дата : Дата элемент управления выбором. время : Время управление выбором. число : текстовое поле или счетчик для числовых значений . диапазон : Ползунок или аналогичный для выбора числового значения из потенциально неточного диапазона . цвет : Цветной колодец , с 8-битным значением sRGB.
значение	Начальное значение.	В зависимости от типа.
проверено	Устанавливает флажок или радио Тип , который будет отмечен по умолчанию.	Нет.
макс. Длина	Максимальное количество допустимых символов в значении.	Номер.
мин. Длина	Минимальное количество допустимых символов в значении.	Номер.
SRC	Используется и требуется, если тип image . Расположение файла изображения, который будет использоваться.	URL.
альтернативный	Используется и требуется, если тип изображение .Альтернативный текст, который заменит изображение, если изображение, указанное в src , недоступно.	Текст.
ширина	Используется, если тип изображение . Ширина изображения в пикселях.	Номер.
высота	Используется, если тип изображение . Высота изображения в пикселях.	Номер.
принять	Используется, если тип файл . Указывает, какие типы файлов принимаются.	Один экземпляр или список, разделенный запятыми: аудио / * : аудиофайлы. видео / * : видео файлы. изображение / * : файлы изображений. Тип MIME, например application / pdf . Определенные расширения файлов, например .pdf .
отключен	Отключает элемент управления формой.	Нет.
только чтение	Делает элемент управления формой неизменяемым пользователем.	Нет.
автозаполнение	Должен ли браузер реализовывать автозаполнение для элемента управления или нет.
автофокус	Указывает, что элемент управления формы должен фокусироваться на загрузке страницы. Следует использовать только в одном элементе управления формы на странице.	Нет.
имя	Добавляет дополнительное поле для отправки, содержащее направление значения элемента управления формы.	Текст (без пробелов). Например, dirname = "this.dir" добавит this.dir = ltr (слева направо) или this.dir = rtl (справа налево) к отправленным данным.
форма	Явно связывает элемент управления с элементом формы , внутри которого он может или не может быть вложен.Если он отсутствует, элемент управления будет связан с его предком формы .	Текст, соответствующий значению , формирует атрибут id элемента .
формация	Используется, если тип отправить или изображение . Адрес, на который должны быть отправлены данные формы. Переопределит атрибут действия элемента form .	URL.
метод формы	Используется, если тип отправить или изображение .Метод HTTP, с помощью которого должны быть отправлены данные формы. Переопределит атрибут метода элемента form .	get : привязывает значения формы к URL-адресу, на который она отправляется. Используется для простой отправки данных, например, для поисковых запросов. post : Незаметно отправляет данные формы в теле отправленного HTTP-запроса. Используется для более подробной или безопасной отправки данных, например, для контактных форм.
тип	Используется, если тип отправить или изображение . Тип MIME, используемый для кодирования данных формы. Переопределит атрибут enctype элемента form .	application / x-www-form-urlencoded : По умолчанию. multipart / form-data : когда в форме используется элемент input input. текст / простой : основной текст.
форма новалидата	Используется, если тип отправить или изображение . Указывает, что форма не должна проверяться перед отправкой. Переопределит атрибут novalidate элемента form .	Нет.
форма цели	Используется, если тип отправить или изображение .Контекст просмотра, в котором должен открываться целевой URL отправленной формы. Переопределит атрибут target элемента form .	_self : открывается в текущем окне / вкладке. _blank : открывается в новом окне / вкладке.
перечень	Связывает элемент управления формы со списком параметров, предлагаемых пользователю.	Текст, соответствующий значению атрибута id элемента datalist .
макс	Используется, когда тип дата , время , номер или диапазон . Максимальное значение.	Номер.
мин	Используется, когда тип дата , время , номер или диапазон .Минимальное значение.	Номер.
шаг	Используется, когда тип дата , время , номер или диапазон . Шаги, с которыми значение может быть увеличено или уменьшено.	Номер или любой .
кратно	Используется, если тип — электронная почта или файл . Указывает, что пользователь может ввести более одного значения.	Нет.
узор	Регулярное выражение, по которому можно проверить значение.	Регулярное выражение.
заполнитель	Видимая подсказка относительно того, какие данные следует ввести пользователю.	Текст.
требуется	Указывает, что поле формы необходимо заполнить.	Нет.
размер	Количество символов в элементе управления текстового типа, которое пользователь должен увидеть во время редактирования.	Номер.
Глобальные атрибуты

Тег ввода HTML — Tutorial Republic

Тема: Справочник по тегам HTML5 Назад | След.

Описание

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

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

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

Размещение:	Рядный
Содержимое:	Нет.Это пустой элемент.
Начальный / конечный тег:	Начальный тег: требуется , Конечный тег: запрещено
Версия:	HTML 2, 3.2, 4, 4.01, 5

---

Синтаксис

Базовый синтаксис тега задается следующим образом:

HTML: ; XHTML:

В следующем примере показан тег в действии.

  

     Имя: 
    
    
    
  

Совет: Используйте элемент HTML , чтобы определить метки для элементов управления вводом.Это сделает форму более доступной для пользователя.

---

Атрибуты, специфичные для тегов

В следующей таблице показаны атрибуты, относящиеся к тегу .

Атрибут	Значение	Описание
тип	кнопка флажок цвет дата datetime datetime-local электронная почта файл скрыто изображение месяц номер пароль радио диапазон сброс поиск отправить тел текст время url	Задает тип создаваемого элемента управления.См. Руководство по HTML-формам, Новые типы ввода HTML5, чтобы узнать больше об элементах управления вводом.
принять	расширение файла тип содержимого аудио / * видео / * изображение / *	Задает типы файлов, которые принимает сервер (только для type = "file" ).
выровнять	слева справа вверху посередине внизу	Устаревший Определяет выравнивание входного изображения (для type = "image" ).
альтернативный	текст	Задает альтернативный текст, который будет использоваться, когда изображение недоступно (для type = "image" ).
автозаполнение	на откл	Указывает, включена ли функция автозаполнения в браузере для элемента ввода.
автофокус	автофокус	Этот логический атрибут указывает, что элемент ввода должен автоматически получать фокус при загрузке документа.
проверено	проверено	Этот логический атрибут указывает, что элемент управления выбран по умолчанию (для type = "radio" или type = "checkbox" ).
отключен	отключен	Этот логический атрибут отключает элемент управления для ввода или взаимодействия пользователя.
форма	идентификатор формы	Задает элемент , с которым связан элемент ввода (его владелец формы ).
формация	URL	Задает URL-адрес программы, которая обрабатывает информацию, представленную на входе (для type = "submit" и type = "image" ).
тип	приложение / x-www-form-urlencoded multipart / form-data text / plain	Указывает, как данные формы должны кодироваться при отправке данных формы на сервер (для type = "submit" и type = "image" ).
метод формы	получить пост	Задает метод HTTP, который браузер будет использовать для отправки данных формы (для type = "submit" и type = "image" ).
форма новалидата	форма новалидата	Этот логический атрибут указывает, что элемент управления формы не должен проверяться при отправке (для type = "submit" и type = "image" ).
форма цели	_blank _self _parent _top framename	Указывает цель для отображения ответа, полученного после отправки формы (для type = "submit" и type = "image" )
высота	пикселей	Задает высоту изображения, отображаемого в виде кнопки (только для type = "image" ).
перечень	идентификатор списка данных	Обращается к списку предопределенных опций, предлагаемых пользователю. Значение должно быть id элемента на той же странице.
макс	номер дата-время	Задает максимальное значение для элемента управления вводом, которое не должно быть меньше его минимального ( мин. атрибут) значения.
макс. Длина	номер	Задает максимальное количество символов, которое пользователь может ввести в поле ввода.
мин.	номер дата-время	Задает минимальное значение для элемента управления вводом, которое не должно быть больше его максимального ( макс. атрибут) значения.
мин. Длина	номер	Задает минимальное количество символов, которое пользователь должен ввести в поле ввода.
кратно	кратно	Этот логический атрибут указывает, может ли пользователь ввести более одного значения.
наименование	текст	Присвойте имя элементу управления вводом.
узор	регулярное выражение	Задает регулярное выражение, по которому проверяется значение входного элемента.
заполнитель	текст	Дает подсказку пользователю о том, что можно ввести в элемент управления вводом.Текст-заполнитель не должен содержать разрывов строки.
только чтение	только чтение	Этот логический атрибут указывает, что пользователь не может изменить значение элемента управления.
требуется	требуется	Этот логический атрибут указывает, что пользователь должен заполнить значение перед отправкой формы.
размер	номер	Устанавливает начальную ширину элемента управления вводом в символах. Если не указано, используется значение по умолчанию 20 .
SRC	URL	Задает расположение изображения для использования в качестве кнопки отправки (для type = "image" ).
шаг	номер дата-время	Работает с атрибутами min и max , чтобы ограничить приращения, с которыми может быть установлено числовое значение или значение даты и времени.
значение	текст	Задает начальное значение элемента управления вводом.
ширина	пикселей	Задает ширину изображения, отображаемого в виде кнопки (только для type = "image" ).

---

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

Как и все другие теги HTML, тег поддерживает глобальные атрибуты в HTML5.

---

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML5.

---

Совместимость с браузером

Тег поддерживается во всех основных современных браузерах.

Базовая поддержка - Firefox 1+ Google Chrome 1+ Internet Explorer 2+ Apple Safari 1+ Опера 2.1+

---

Дополнительная литература

См. Руководство по: HTML-формы.

Другие теги, связанные с формами:

,

, , , </code>, <code> <select> </code>, <code> <optgroup> </code>, <code> <опция> </code>, <code> <кнопка> </code>.</p> <h2><span class="ez-toc-section" id="HTML-2"> HTML: тег </span></h2> <hr/> <p> В этом руководстве по HTML объясняется, как использовать элемент HTML, называемый тегом <strong> <input> </strong>, с синтаксисом и примерами. </p> <h3><span class="ez-toc-section" id="i-86"> Описание </span></h3> <p> Тег <strong> <input> HTML </strong> - это элемент управления вводом, который предоставляет пользователям интерактивный элемент управления для ввода данных. Традиционно тег <input> находится внутри тега <form> и может представлять текстовые поля, флажки, раскрывающиеся списки, кнопки и другие входные данные, просто установив соответствующий атрибут <code> типа </code>.Этот тег также обычно называют элементом <input>. </p> <h3><span class="ez-toc-section" id="i-87"> Синтаксис </span></h3> <p> В HTML синтаксис тега <strong> <input> </strong>: </p><pre> <code> <body> <form action = "" method = "get"> Компания: <input type = "text" name = "company"> <br> Адрес: <input type = "text" name = "address"> <br> <input type = "submit" value = "Submit"> </form> </body> </code> </pre><h4><span class="ez-toc-section" id="i-88"> Пример вывода </span></h4><pre> </pre><h3><span class="ez-toc-section" id="i-89"> Атрибуты </span></h3> <p> В дополнение к глобальным атрибутам, ниже приводится список атрибутов, относящихся к тегу <input>: </p> <table> <thead> <tr> <th> Атрибут </th> <th> Описание </th> <th> Совместимость с HTML </th> </tr> </thead> <tbody> <tr> <td> автозаполнение </td> <td> Значение <code> на </code> или <code> на </code>, чтобы указать, может ли браузер автоматически заполнять значения в элементах ввода на основе значений, ранее введенных в форму </td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> автофокус </td> <td> Логическое значение, указывающее, что входные данные должны иметь фокус ввода при загрузке страницы, если пользователь не отменяет это. </td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> отключен </td> <td> Логическое значение, указывающее, что пользователь не может взаимодействовать с вводом. </td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> форма </td> <td> Значение, указывающее форму, которой принадлежит ввод. Это <code> id </code> <form> в том же документе.</td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> список </td> <td> <code> id </code> <datalist>, который предоставил список предлагаемых значений для ввода </td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> наименование </td> <td> Имя входа </td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> требуется </td> <td> Логическое значение, указывающее, требуется ли ввод. Перед отправкой формы необходимо заполнить необходимые данные.</td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> тип </td> <td> Тип входа. Это может быть одно из следующих значений: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time. , url, неделя </td> <td> HTML 4.01, HTML5 </td> </tr> <tr> <td> значение </td> <td> Начальное значение входа </td> <td> HTML 4.01, HTML5 </td> </tr> </tbody> </table> <h3><span class="ez-toc-section" id="i-90"> Примечание </span></h3> <ul> <li> HTML-элемент <input> находится внутри тега <body>.Тег <input> обычно находится внутри тега <form>. </li> <li> Установив атрибут <code> type </code>, элемент <input> может стать текстовыми полями, флажками, переключателями, раскрывающимися списками, кнопками, полями пароля и многим другим! </li> </ul> <h3><span class="ez-toc-section" id="i-91"> Совместимость с браузером </span></h3> <p> Тег <input> имеет базовую поддержку в следующих браузерах: </p> <ul> <li> Хром </li> <li> Android </li> <li> Firefox (Gecko) </li> <li> Firefox Mobile (Gecko) </li> <li> Internet Explorer (IE) </li> <li> Edge Mobile </li> <li> Opera </li> <li> Opera Mobile </li> <li> Safari (WebKit) </li> <li> Safari Mobile </li> </ul> <h3><span class="ez-toc-section" id="i-92"> Пример </span></h3> <p> Мы обсудим тег <input> ниже, исследуя примеры использования тега <input> в HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1. </p> <h4><span class="ez-toc-section" id="HTML5"> HTML5 Документ </span></h4> <p> Если вы создали новую веб-страницу в HTML5, ваш тег <input> может выглядеть так: </p><pre> <code> <! Doctype html> <html> <head> <meta charset = "UTF-8"> <title> Пример HTML5 от www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="_1"> Заголовок 1 </span></h2> <form action = "" method = "get"> Компания: <input type = "text" name = "company"> <br> Адрес: <input type = "text" name = "address"> <br> <input type = "submit" value = "Submit"> </form> </body> </html> </code> </pre><p> В этом примере документа HTML5 мы использовали тег <form> для создания HTML-формы.Эта форма содержит два элемента управления <input> для компании и адреса, а также элемент управления <input> для кнопки отправки. </p> <h4><span class="ez-toc-section" id="HTML_401"> HTML 4.01 Переходный документ </span></h4> <p> Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег <input> может выглядеть так: </p><pre> <code> <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8"> <title> HTML 4.01 Переходный пример от www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="_1-2"> Заголовок 1 </span></h2> <form action = "" method = "get"> Компания: <input type = "text" name = "company"> <br> Адрес: <input type = "text" name = "address"> <br> <input type = "submit" value = "Submit"> </form> </body> </html> </code> </pre><p> В этом примере переходного документа HTML 4.01 мы использовали тег <form> для создания HTML-формы. Эта форма содержит два элемента управления <input> для компании и адреса, а также элемент управления <input> для кнопки отправки.</p> <h4><span class="ez-toc-section" id="_XHTML_10"> Переходный документ XHTML 1.0 </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег <input> может выглядеть так: </p><pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8" /> <title> XHMTL 1.0 Transitional Example by www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="_1-3"> Заголовок 1 </span></h2> <form action = "" method = "get"> Компания: <input type = "text" name = "company" /> <br /> Адрес: <input type = "text" name = "address" /> <br /> <input type = "submit" value = "Submit" /> </form> </body> </html> </code> </pre><p> В этом примере переходного документа XHTML 1.0 мы использовали тег <form> для создания HTML-формы. Эта форма содержит два элемента управления <input> для компании и адреса, а также элемент управления <input> для кнопки отправки.</p> <h4><span class="ez-toc-section" id="_XHTML_10-2"> Строгий документ XHTML 1.0 </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег <input> может выглядеть так: </p><pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8" /> <title> Строгий пример XHTML 1.0 от www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="_1-4"> Заголовок 1 </span></h2> <form action = "" method = "get"> <div> Компания: <input type = "text" name = "company" /> <br /> Адрес: <input type = "text" name = "address" /> <br /> <input type = "submit" value = "Submit" /> </div> </form> </body> </html> </code> </pre><p> В этом XHTML 1.0 Пример строгого документа, мы использовали тег <form> для создания HTML-формы. Эта форма содержит два элемента управления <input> для компании и адреса, а также элемент управления <input> для кнопки отправки. </p> <h4><span class="ez-toc-section" id="XHTML_11"> XHTML 1.1, документ </span></h4> <p> Если вы создали новую веб-страницу в XHTML 1.1, ваш тег <input> может выглядеть так: </p><pre> <code> <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns = "http: // www.w3.org/1999/xhtml "> <head> <meta http-Equiv = "Content-Type" content = "text / html; charset = UTF-8" /> <title> XHTML 1.1 Пример с сайта www.techonthenet.com </title> </head> <body> <h2><span class="ez-toc-section" id="_1-5"> Заголовок 1 </span></h2> <form action = "" method = "get"> <div> Компания: <input type = "text" name = "company" /> <br /> Адрес: <input type = "text" name = "address" /> <br /> <input type = "submit" value = "Submit" /> </div> </form> </body> </html> </code> </pre><p> В этом XHTML 1.1 Пример документа, мы использовали тег <form> для создания HTML-формы. Эта форма содержит два элемента управления <input> для компании и адреса, а также элемент управления <input> для кнопки отправки. </p> . </div> </div> </div> </article> <nav class="navigation post-navigation" aria-label="Записи"> <h2 class="screen-reader-text">Навигация по записям</h2> <div class="nav-links"><div class="nav-previous"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/asessor-v-yandekse-otzyvy-sotrudnikov-asessor-yandeks-otzyvy-o-rabote-kak-otozvatsya-na-vakansiyu-asessor-yandeksa-chem-mogut-byt-polezny-instrukcii-dlya-asessorov.html" rel="prev">Асессор в яндексе отзывы сотрудников – Асессор Яндекс — отзывы о работе. Как отозваться на вакансию асессор «Яндекса». Чем могут быть полезны инструкции для асессоров</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/obuchenie-programmirovaniyu-java-s-nulya-java-bystryj-start-osnovy-yazyka-java-na-primere-razrabotki-nebolshoj-igry-obuchenie-programmirovaniyu-onlajn-na-geekbrains-geekbrains.html" rel="next">Обучение программированию java с нуля – Java. Быстрый старт. Основы языка Java на примере разработки небольшой игры | Обучение программированию онлайн на GeekBrains | GeekBrains</a></div></div> </nav><div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/teg-html-input-html-teg-html-xhtml.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required>

Имя *

Email *

Сайт