HTML Input атрибутов

value Атрибут

value атрибута задает начальное значение для поля ввода:

readonly для readonly атрибутов

readonly для (cannot be changed) readonly атрибут указывает , что поле ввода только для чтения (cannot be changed) :

readonly для readonly атрибута не требуется значение. Это то же самое, как писать только для чтения = «ReadOnly».

disabled Атрибут

disabled атрибут указывает , что поле ввода отключено.

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

Элементы для инвалидов не будут представлены.

disabled атрибут не требуется значение. Это то же самое, как написание отключена = «отключено».

size Атрибут

size атрибут определяет размер (in characters) для поля ввода:

maxlength Атрибут

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

С maxlength атрибут, управляющий вход не будет принимать больше допустимого количества символов.

Атрибут не дает никакой обратной связи. Если вы хотите, чтобы предупредить пользователя, вы должны написать код JavaScript.

HTML5 Атрибуты

HTML5 добавлены following атрибуты : <input> :

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

и following атрибуты <form> :

• autocomplete
• novalidate

autocomplete Атрибут

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

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

Tip: Можно иметь autocomplete "on" для формы, и "off" для конкретных полей ввода, или наоборот.

autocomplete атрибут работает с <form> и следующий <input> типов: text, search, url, tel, email, password, datepickers, range, and color .

пример

HTML - форма с autocomplete на (and off for one input field) :

<form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Попробуй сам "

Совет: В некоторых браузерах может потребоваться активировать autocomplete функцию для этой работы.

novalidate Атрибут

novalidate атрибут является <form> атрибут.

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

пример

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

<form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Попробуй сам "

autofocus Атрибут

autofocus атрибут является логическим атрибутом.

Когда присутствует, он указывает , что <input> элемент должен автоматически получать фокус при загрузке страницы.

пример

Пусть "First name" поле ввода автоматически получить фокус при загрузке страницы:

First name:<input type="text" name="fname" autofocus>

Попробуй сам "

form Атрибут

form атрибут определяет один или более образует <input> элемент принадлежит.

Tip: Для того, чтобы обратиться к более чем одной формы, используйте разделенный пробелами список form ids .

пример

input field находится за пределами HTML - формы (but still a part of the form) - (but still a part of the form) :

<form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Попробуй сам "

formaction Атрибут

formaction атрибут указывает URL - адрес файла , который будет обрабатывать входной контроль , когда форма была отправлена.

formaction атрибут отменяет action атрибута <form> элемента.

formaction атрибут используется с типом = «отправить» и введите = «изображение».

пример

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

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

Попробуй сам "

formenctype Атрибут

formenctype атрибут указывает , как форма-данные должны быть закодированы при подаче его на сервер (only for forms with method="post" ) .

formenctype атрибут переопределяет enctype атрибут <form> элемента.

formenctype атрибут используется с type="submit" и type="image" .

пример

Отправить form-data , которые по умолчанию закодированных (the first submit button) , и кодируются как "multipart/form-data" (the second submit button) :

<form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Попробуй сам "

formmethod Атрибут

formmethod атрибут определяет метод HTTP для отправки form-data в URL действия.

formmethod атрибут переопределяет method атрибут <form> элемента.

formmethod атрибут может использоваться с type="submit" и type="image" .

пример

Кнопка второго представить переопределяет метод HTTP формы:

<form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

Попробуй сам "

formnovalidate Атрибут

novalidate атрибут является логическим атрибутом.

Когда присутствует, он указывает , что <input> элемент не должен быть подтверждено при представлении.

formnovalidate атрибут переопределяет novalidate атрибут <form> элемента.

formnovalidate атрибут может использоваться с type="submit" .

пример

Форма с двумя кнопки отправки (with and without validation) :

<form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Попробуй сам "

formtarget Атрибут

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

formtarget атрибут переопределяет target атрибут <form> элемента.

formtarget атрибут может использоваться с типом = «отправить» и введите = «изображение».

пример

Форма с двумя кнопки отправки, с различными целевыми окнами:

<form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

Попробуй сам "

На height и width Атрибуты

На height атрибуты и ширина указать высоту и ширину <input> элемента.

На height и width атрибуты используются только с <input type="image"> .

пример

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

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Попробуй сам "

list атрибутов

list атрибутов относится к <datalist> элемент , который содержит предварительно определенные параметры для <input> элемента.

пример

<input> элемент с предварительно определенными значениями в <datalist> :

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Попробуй сам "

В min и max Атрибуты

min и max атрибутов указать минимальное и максимальное значение для <input> элемента.

min и max атрибуты работы со следующими типами входов: number, range, date, datetime, datetime-local, month, time and week .

пример

<Вход> элементы с минимальным и максимальным значениями:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

Попробуй сам "

multiple Attribute

multiple атрибут является логическим атрибутом.

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

multiple атрибут работает со следующими типами входов: по email , а file .

пример

Поле для загрузки файла, который принимает несколько значений:

Select images: <input type="file" name="img" multiple>

Попробуй сам "

pattern Атрибут

pattern атрибут определяет регулярное выражение , которое в <input> значение элемента сверяется.

pattern атрибут работает со следующими типами входов: text, search, url, tel, email, and password .

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

Tip: Узнайте больше о регулярных выражениях в нашем JavaScript учебнике.

пример

Поле ввода , которое может содержать только три буквы (no numbers or special characters) :

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Попробуй сам "

placeholder Атрибут

placeholder атрибут указывает подсказку , которая описывает ожидаемое значение поля ввода (a sample value or a short description of the format) .

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

placeholder атрибут работает со следующими типами входов: text, search, url, tel, email, and password .

пример

Поле ввода с текстом заполнителя:

<input type="text" name="fname" placeholder="First name">

Попробуй сам "

required Атрибут

required атрибут является логическим атрибутом.

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

required атрибут работает со следующими типами входов: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file .

пример

Требуемое поле ввода:

Username: <input type="text" name="usrname" required>

Попробуй сам "

step Атрибут

step атрибут указывает интервалы номер юридического для <input> элемента.

Пример: если шаг = "3", юридические цифры могут быть -3, 0, 3, 6 и т.д.

Tip: step атрибут может быть использован вместе с max и min атрибутов для создания диапазона допустимых значений.

step атрибут работает со следующими типами входов: number, range, date, datetime, datetime-local, month, time and week - number, range, date, datetime, datetime-local, month, time and week и number, range, date, datetime, datetime-local, month, time and week .

пример

Поле ввода с заданными интервалами юридического номера:

<input type="number" name="points" step="3">

Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4»