Input тег: Тег HTML поле для ввода, кнопка – : The Input (Form Input) element — HTML: Hypertext Markup Language

HTML тег input

Тег <input> определяет поле HTML формы, куда пользователь может вводить данные.

Тег <input> используется внутри тега <form> для декларации элементов управления вводом, которые позволяют пользователям вводить какие-либо данные.

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

Тег <input> не может содержать какой-либо контент, он может содержать только атрибуты.

Для определения метки для элемента <input> используется элемент <label>.

Разница между HTML 4.01 и HTML5

В HTML5 атрибут align не поддерживается.

В HTML5 у тега <input> появилось несколько новых атрибутов, а у атрибута type несколько новых значений.

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

В HTML тег <input> - одиночный элемент без закрывающего тега. В XHTML тег <input> необходимо закрывать должным образом, а именно — <input />.

Атрибуты тега <input>

Атрибут Описание
accept Определяет тип файлов, которые принимает сервер
align Определяет горизонтальное выравнивание содержимого элемента
alt Определяет альтернативный текст, если элемент не удается отобразить
autocomplete Включает/отключает автозаполнение элемента
autofocus Автоматически передает фокус элементу
checked Включает/выключает элемент ввода
disabled Отключает поле ввода
form Определяет к какой форме относится элемент ввода
formaction Определяет, куда будут отправлены данные формы
formenctype Определяет способ кодировки отправляемых на сервер данных формы
formmethod Определяет метод отправки на сервер данных формы
formnovalidate Отключает встроенную проверку корректности введенных данных формы
formtarget Определяет, куда загружать ответ сервера после отправки данных формы
height
Определяет высоту элемента ввода
list Ссылается на элемент со списком предопределенных значений
max Определяет максимально допустимое для ввода значение
maxlength Определяет максимальное количество символов допустимое для ввода в текстовое поля
min Определяет минимально допустимое для ввода значение
multiple Позволяет в элемент <input> вводить больше одного значения
name Определяет имя элемента ввода
pattern Определяет регулярное выражение, по которому проверяются вводимые данные
placeholder Определяет "заполнитель" для текстового поля
readonly Определяет, что поле формы должно быть только для чтения
required Определяет поле формы, как обязательное для заполнения
size Определяет ширину в символах элемента ввода
src Определяет URL изображения для элемента ввода
step Определяет шаг изменения числа для элемента ввода
type Определяет тип элемента ввода
value Определяет значение для элемента ввода
width Определяет ширину элемента ввода

Общие атрибуты

Тег <input> поддерживает общие атрибуты и атрибуты-события.

HTML пример

HTML форма с тремя полями ввода данных — двумя текстовыми и одной кнопкой отправки данных:


<form action='demo_form.asp'>
   Имя: <input type="text" name="fname"><br>
   Фамилия: <input type="text" name="lname"><br>
   <input type="submit" value="Отправить">
</form>

Атрибут list тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут list (HTML тега <input>) определяет список предопределенных вариантов, который будет предложен пользователю. Значение атрибута должно соответствовать идентификатору элемента <datalist>.

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

Синтаксис:

<input list =  "datalist_id">

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

ЗначениеОписание
datalist_idЗначение атрибута должно соответствовать идентификатору элемента <datalist>.

Отличия HTML 4.01 от HTML 5

Атрибут считается новым в HTML 5.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Пример использования атрибута list HTML тега <input>.</title>
	</head>
	<body>
		<form action = "#"> <!-- адрес передачи данных при отправке формы (относительный, либо абсолютный URL)-->
			<fieldset> <!--группируем элементы формы-->
				<legend>Составление маршрута</legend> <!--заголовок для элемента <fieldset> -->
				Город отправления:
				<select> <!--раскрывающийся список-->
					<option  label = "Владивосток">
					<option  label = "Анапа">
					<option  label = "Москва">
					<option  label = "Смоленск">
					<option  label = "Якутск">
				</select>
					<p>Аэропорт назначения:
						<input type = "text" list = "airports"> <!-- ссылаемся на список предопределенных вариантов --> 
					</p>
				<datalist id = "airports"> <!--Список предопределенных вариантов для ввода-->
					 <option value = "VVO" label = "Владивосток">
					 <option value = "MEM" label = "Анапа">
					 <option value = "VKO" label = "Москва Внуково">
					 <option value = "LNX" label = "Смоленск">
					 <option value = "YKS" label = "Якутск">
				</datalist>	
				<input type = "submit" value = "подтвердить"> <!--кнопка отправки формы -->
			</fieldset>
		</form>
	</body>
</html>

В этом примере используются раскрывающийся список (<select>) и список предопределенных вариантов для ввода (<datalist>). Список предопределенных вариантов мы подключили атрибутом list внутри однострочного текстового поля (тег <input>).

Элементом списков выступает тег <option>. Если в списках используется атрибут label, то текст надписи, которая указывает значение параметра берется из него. Если значение атрибута label не указано, то этим значением выступает содержимое элемента <option>, при этом необходимо использовать закрывающий элемент </option>.

Обращаю Ваше внимание, что если в списке предопределённых вариантов (<datalist>) используется атрибут value, то поиск осуществляется по нему, если атрибут отсутствует, то по содержимому элемента, при этом необходимо использовать закрывающий элемент </option>.

Результат нашего примера:

Пример использования атрибута list HTML тега <input>.HTML тег <input>

Атрибут src тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут src (HTML тега <input>) задает URL-адрес изображения, которое используется в качестве кнопки отправки.

Атрибут используется только с элементами управления, которые определяют графическую кнопку "отправить форму" (<input type = "image">). Является обязательным атрибутом.

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

Синтаксис:

<input src = "URL"> 

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

ЗначениеОписание
URLОпределяет URL-адрес изображения, которое используется в качестве кнопки отправки. Допускается использование как абсолютных, так и относительных адресов.

Отличия HTML 4.01 от HTML 5

Нет.

Пример использования

<!DOCTYPE html>
	<html>
	<head>
		<title>Пример использования атрибута src HTML тега <input></title>
	</head>
	<body>
		<form>
			Login: <input type = "text" name = "login"><br><br>
			<input type = "image" src = "../../images/right2.png" alt = "submit" width = "40" height = "40">
		</form>
	</body>
</html>

В данном примере мы создали элемент управления, который определяют графическую кнопку "отправить форму" (<input type = "image">). В атрибуте src элемента мы указали относительный путь к файлу с изображением, в атрибуте alt указали альтернативный текст, для того случая если изображение по каким-то причинам не будет загружено. Размеры изображения в пикселях мы задали с использованием атрибутов width (ширина) и height (высота).

Результат нашего примера:

Пример использования атрибута src HTML тега <input> (путь к файлу с изображением).HTML тег <input>

Атрибут multiple тега | HTML справочник

HTML тег <input>

Значение и применение

Логический атрибут multiple (HTML тега <input>) указывает, что пользователь может ввести более одного значения в элементе (только для <input type = "file"> и <input type = "email">).


При использовании <input type = "file">, чтобы выбрать несколько файлов необходимо при выборе зажать кнопку Shift, или Ctrl. Если логический атрибут multiple отсутствует, то вы сможете выбрать только один файл, независимо от того зажат у вас Shift, или Ctrl. Если атрибут указан, то текст кнопки изменяется с "выберите файл" на "выбрать файлы", после выбора браузер отображает количество выбранных файлов.

При использовании <input type = "email"> необходимо перечислить несколько адресов электронной почты через запятую. Если логический атрибут multiple отсутствует, то браузер выведет сообщение, что поле не может содержать символ "," (запятая).


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

Синтаксис:

<input multiple = "multiple">

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

ЗначениеОписание
multipleЗначение атрибута требуется только в XHTML.

Отличия HTML 4.01 от HTML 5

Атрибут multiple считается новым в HTML 5.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута multiple HTML тега <input></title>
	</head>
	<body>
		<form> <!-- создаем форму -->
			<input type = "file" name = "files" multiple> <!--поле для выбора файлов -->
			<input type = "email" name = "emails" multiple> <!-- поле для ввода адресов электронной почты -->
			<input type = "submit" value = "отправить"> <!-- кнопка для отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>). Внутри формы мы поместили три элемента управления <input>, которые позволяют выбрать несколько файлов, указать несколько адресов электронной почты и отправить нашу форму. Обратите внимание, что без логического атрибута multiple мы могли бы выбрать только один файл, и указать только один адрес электронной почты.

Результат нашего примера:

Пример использования атрибута multiple HTML тега <input>HTML тег <input>

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *