Функция input() в python, ввод данных с клавиатура

Подсказывающий текст

Поддержка подсказывающего текста

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
—	4.0+	4.0+	4.0+	11.0+	4.0+	—

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

Вы, наверное, видели подсказывающий текст ранее. Например, Mozilla Firefox включает подсказывающий текст в адресной строке с надписью «Поиск в закладках и журнале».

Когда вы щелкаете по адресной строке, подсказывающий текст исчезает.

Вот как вы можете включить подсказывающий текст в свои формы.

<form>
<input name=»q» placeholder=»Поиск в закладках и журнале»>
<input type=»submit» value=»Поиск»>
</form>

Браузеры, которые не поддерживают атрибут placeholder, его просто игнорируют. Без вреда и нарушений.

Спроси профессора Маркапа

☞В. Могу я использовать HTML разметку для атрибута ? Я хочу вставить картинку или, может, изменить цвета.

О. Атрибут может содержать только текст, никакого HTML-кода. Однако есть специальные расширения CSS, которые позволяют вам установить стиль текста в некоторых браузерах.

Accessibility concerns

When including inputs, it is recommended to add labels along side. This is so those who use assistive technologies can tell what the input is for. For more information about labels in general see .

The following is an example of how to associate the with an element in the above style. You need to give the an attribute. The then needs a attribute whose value is the same as the input’s .

<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas">

Interactive elements such as form input should provide an area large enough that it is easy to activate them. This helps a variety of people, including people with motor control issues and people using non-precise forms of input such as a stylus or fingers. A minimum interactive size of 44 by 44 is recommended.

• Understanding Success Criterion 2.5.5: Target Size | W3C Understanding WCAG 2.1
• Target Size and 2.5.5 | Adrian Roselli
• Quick test: Large touch targets — The A11Y Project

Input Type Reset

defines a reset button
that will reset all form values to their default values:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit» value=»Submit»>  <input type=»reset»></form>

This is how the HTML code above will be displayed in a browser:

If you change the input values and then click the «Reset» button, the form-data will be reset to the default values.

HTML Tutorial

HTML HOMEHTML IntroductionHTML EditorsHTML BasicHTML ElementsHTML AttributesHTML HeadingsHTML ParagraphsHTML StylesHTML FormattingHTML QuotationsHTML CommentsHTML Colors
Colors
RGB
HEX
HSL

HTML CSSHTML Links
Links
Link Colors
Link Bookmarks

HTML Images
Images
Image Map
Background Images
The Picture Element

HTML TablesHTML Lists
Lists
Unordered Lists
Ordered Lists
Other Lists

HTML Block & InlineHTML ClassesHTML IdHTML IframesHTML JavaScriptHTML File PathsHTML HeadHTML LayoutHTML ResponsiveHTML ComputercodeHTML SemanticsHTML Style GuideHTML EntitiesHTML SymbolsHTML EmojisHTML CharsetHTML URL EncodeHTML vs. XHTML

Окно поиска

Итак, поиск. Не только поиск от Google или Yahoo (ну, те тоже). Подумайте о любом окне поиска, на любой странице, на любом сайте. Амазон имеет окно поиска, Яндекс имеет окно поиска, большинство блогов тоже. Как они сделаны? <input type=»text»>, как и любое другое текстовое поле в сети. Давайте это исправим.

Поиск нового поколения

<form>
<input name=»q» type=»search»>
<input type=»submit» value=»Найти»>
</form>

В некоторых браузерах вы не заметите никакого отличия от обычного текстового поля. Но если вы используете Safari на Mac OS X, это будет выглядеть так.

Нашли разницу? Поле ввода имеет закругленные углы! Я знаю, знаю, вы вряд ли можете сдержать свои чувства. Но подождите, это еще не все! Когда вы начнете вводить в поле type=»search» Safari вставит небольшую кнопку «x» с правой стороны окна. Нажатие на «x» очищает содержимое поля. Google Chrome, который имеет под капотом ту же технологию, ведет себя так же. Обе эти маленькие хитрости выглядят и ведут себя аналогично родному поиску в iTunes и других клиентских приложениях Mac OS X.

Apple.com использует <input type=»search»> для поиска по своему сайту, чтобы помочь сайту передать «маколюбное» ощущение. Но здесь нет ничего специфичного для Маков. Это просто код, так что каждый браузер на любой платформе может выбрать, как отображать в соответствии с соглашениями платформы. Как и со всеми другими новыми типами, браузеры, которые не признают type=»search» будут относиться к нему как type=»text», так что нет абсолютно никаких причин не начать использовать type=»search» для всех ваших окон поиска прямо сегодня.

Профессор Маркап говорит

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

input {
-webkit-appearance: textfield;
}

Спасибо Джону Лейну за обучение меня этому трюку.

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled
selected>Choose your option</option>  <option value=»1″>Option
1</option>  <option value=»2″>Option 2</option>  <option
value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>   
<input class=»w3-input w3-border» type=»text» placeholder=»One»> 
</div>  <div class=»w3-third»>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-third»>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>   
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

❮ Previous
Next ❯

Code Example

The most basic form field

The element is the fundamental form element for gathering user info through forms. The vast majority of form fields are the element, and there are only a handful of form field types — , for example — that are actually a different element. From range sliders to date selectorsto submit buttons, the element covers a lot of different cases.

Because of that, it also has a huge number of attributes and potential values. Many of them are only applicable to certain types of inputs. There are a handful that are universally important, though:

• The attribute determines the type, or style, of the element. This is the most important attribute, as it determines everything else about how the element behaves.
• The is used in conjunction with the attribute to send user data to the server.
• Setting the attribute in your HTML document allows you to pre-specify the content of the input field, or its default value
• Both and stop the user from editing the value of the input, but there are some important difference to know about.
• Including the stops the form from accepting submission if the field has no value.

See the lists below for more details about options.

Adam Wood

See also

• Other form-related elements: <form> (en-US), <button> (en-US), <datalist> (en-US), <legend> (en-US), <label> (en-US), <select> (en-US), <optgroup> (en-US), <option> (en-US), <textarea> (en-US), <keygen> (en-US), <fieldset> (en-US), , <progress> (en-US) and <meter> (en-US).
• Form constraint validation
• Cross-browser HTML5 placeholder text
• The CSS (en-US) property
• In certain cases (typically involving non-textual inputs and specialized interfaces), the element is a replaced element. When it is, the position and size of the element’s size and positioning within its frame can be adjusted using the CSS (en-US) and properties

Notes

If you want to present a custom error message when a field fails to validate, you need to use the available on (and related) elements. Take the following form:

The basic HTML form validation features will cause this to produce a default error message if you try to submit the form with either no valid filled in, or a value that does not match the .

If you wanted to instead display custom error messages, you could use JavaScript like the following:

The example renders like so:

In brief:

• We check the valid state of the input element every time its value is changed by running the method via the event handler.
• If the value is invalid, an event is raised, and the event handler function is run. Inside this function we work out whether the value is invalid because it is empty, or because it doesn’t match the pattern, using an block, and set a custom validity error message.
• As a result, if the input value is invalid when the submit button is pressed, one of the custom error messages will be shown.
• If it is valid, it will submit as you’d expect. For this to happen, the custom validity has to be cancelled, by invoking with an empty string value. We therefore do this every time the event is raised. If you don’t do this, and a custom validity was previously set, the input will register as invalid, even if it current contains a valid value on submission.

Note: Firefox supported a proprietary error attribute — — for many versions, which allowed you set custom error messages in a similar way. This has been removed as of version 66 (see bug 1513890).

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

Firefox uses the following heuristics to determine the locale to validate the user’s input (at least for ):

• Try the language specified by a / attribute on the element or any of its parents.
• Try the language specified by any Content-Language HTTP header or
• If none specified, use the browser’s locale.

You can use the attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a «Next» label, you can do this:

The result is:

Note the «Next» key in the lower-right corner of the keyboard.

Colors

Feel free to use your favorite styles and colors:

Input Form

Example

<div class=»w3-container w3-teal»>  <h2>Input Form</h2></div><form class=»w3-container»>  <label class=»w3-text-teal»><b>First Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <label class=»w3-text-teal»><b>Last Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <button class=»w3-btn w3-blue-grey»>Register</button></form>

Hoverable inputs

The w3-hover-color classes adds a background color to the input field on mouse-over:

Example

<input class=»w3-input w3-hover-green» type=»text»><input class=»w3-input
w3-border w3-hover-red» type=»text»><input class=»w3-input
w3-border w3-hover-blue» type=»text»>

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled
selected>Choose your option</option>  <option value=»1″>Option
1</option>  <option value=»2″>Option 2</option>  <option
value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>   
<input class=»w3-input w3-border» type=»text» placeholder=»One»> 
</div>  <div class=»w3-third»>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-third»>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>   
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

❮ Previous
Next ❯

Валидация форм

Поддержка валидации форм

IE	Firefox	Safari	Chrome	Opera	iPhone	Android
—	4.0+	5.0+	6.0+	9.0+	—	—

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

Есть две большие проблемы, связанные с проверкой адреса электронной почты на JavaScript:

1. Некоторое количество ваших посетителей (вероятно, около 10%) не включают JavaScript.
2. Вы получите адрес неправильно.

Серьезно, вы получите адрес неправильно. Определение того, что набор случайных символов это корректный адрес электронной почты невероятно сложно. Чем сильнее вы смотрите, тем сложнее становится. Я уже говорил, что это очень, очень сложно? Не проще ли повесить эту головную боль на ваш браузер?

HTML5 также предлагает проверку веб-адресов с полем и чисел с

Проверка чисел принимает во внимание значения атрибутов min и max, поэтому браузеры не позволят вам отправить форму, если вы вводите слишком большое число

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

Не проверяй меня

Браузеры медленно включают поддержку проверки форм в HTML5. Firefox 4 будет иметь полную поддержку. К сожалению, Safari и Chrome реализуют лишь частично: они проверяют элементы форм, но не выводят никаких видимых сообщений, когда поля формы не проходит проверку. Другими словами, если вы введете неверную (или неправильно составленную) дату в , Safari и Chrome не отправит форму, но и не будет говорить вам, почему это не сделали. Они будут устанавливать фокус на поле, которое содержит недопустимое значение, но не отображать сообщение об ошибке, как Opera или Firefox 4.

Input Type Date

The is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

Example

<form>  <label for=»birthday»>Birthday:</label>  <input
type=»date» id=»birthday» name=»birthday»></form>

You can also use the and attributes to add restrictions to dates:

Example

<form>  <label for=»datemax»>Enter a date before
1980-01-01:</label>  <input type=»date» id=»datemax» name=»datemax»
max=»1979-12-31″><br><br>  <label for=»datemin»>Enter a date after
2000-01-01:</label>  <input type=»date» id=»datemin» name=»datemin»
min=»2000-01-02″></form>

Числа как счетчики

Следующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -1? Нет, я имел в виду число между 1 и 10,7 ½? Нет, нет, не дробь, тупица. π? Теперь вы просто выбрали иррациональное число.

Хочу заметить, у вас не часто спрашивают «просто число». Более вероятно, что будут просить число в определенном диапазоне. Вы можете только захотеть, чтобы в пределах этого диапазона были определенные типы чисел — может быть, целые числа, но не дроби или десятичные числа или что-то более экзотическое, например, кратные 10. HTML5 все это охватывает.

Выбрать число, почти любое

<input type=»number»
min=»0″
max=»10″
step=»2″
value=»6″>

Рассмотрим по одному атрибуту.

• type=»number» означает, что это числовое поле.
• min=»0″ указывает минимально допустимое значение для этого поля.
• max=»10″ является максимально допустимым значением.
• step=»2″ в сочетании с минимальным значением определяет допустимые числа в диапазоне: 0, 2, 4 и так далее, вплоть до максимального значения.
• value=»6″ значение по умолчанию. Должно выглядеть знакомым, этот же атрибут всегда используется для определения значений полей формы. Я упоминаю здесь об этом для отправной точки, что HTML5 основывается на предыдущих версиях HTML. Вам не нужно переучиваться, чтобы делать то, что вы уже делали.

Это код числового поля. Имейте в виду, что все эти атрибуты являются необязательными. Если у вас задан минимум, но не максимум, можете указать атрибут min, но не max. По умолчанию значение шага равно 1 и вы можете опустить атрибут step, пока не понадобится другое значение шага. Если нет значения по умолчанию, то атрибут value может быть пустой строкой или даже вообще опущен.

Но HTML5 не останавливается на достигнутом. За ту же самую низкую, низкую цену свободы вы получаете эти удобные методы JavaScript.

• input.stepUp(n) повышает значение поля на n.
• input.stepDown(n) понижает значение поля на n.
• input.valueAsNumber возвращает текущее значение как число с плавающей точкой (свойство input.value это всегда строка).

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

В настольной версии Оперы поле type=»number» отображается как счетчик с небольшими стрелками вверх и вниз, которые можно нажать для изменения значений.

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

Как и со всеми другими полями ввода, что я обсуждал в этой главе, браузеры, которые не поддерживают type=»number», будут относиться к нему как к type=»text». Значение по умолчанию будет отображаться в поле (так как оно хранится в атрибуте value), но другие атрибуты, такие как min и max будут игнорироваться. Вы можете свободно реализовать их самостоятельно или использовать JavaScript-фреймворк, который уже реализует управление счетчиком. Вначале проверьте встроенную поддержку HTML5, как здесь.

if (!.inputtypes.number) {
// нет встроенной поддержки для поля type=number
// может попробовать Dojo или другой JavaScript-фреймворк
}

Input Type Submit

defines a button for
submitting form data to a form-handler.

The form-handler is typically a server page with a script for processing
input data.

The form-handler is specified in the form’s
attribute:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit» value=»Submit»></form>

This is how the HTML code above will be displayed in a browser:

If you omit the submit button’s value attribute, the button will get a default text:

Example

<form action=»/action_page.php»>  <label for=»fname»>First
name:</label><br>  <input type=»text» id=»fname» name=»fname»
value=»John»><br>  <label for=»lname»>Last name:</label><br> 
<input type=»text» id=»lname» name=»lname» value=»Doe»><br><br> 
<input type=»submit»></form>

Input Cards

Header

Example

<div class=»w3-card-4″><div class=»w3-container
w3-green»>  <h2>Header</h2></div><form class=»w3-container»><label>First Name</label><input class=»w3-input»
type=»text»>
<label>Last Name</label><input class=»w3-input»
type=»text»></form></div>

Colored Labels

Use any of the w3-text-color classes to color your labels:

Example

<form class=»w3-container»><label
class=»w3-text-blue»><b>First Name</b></label>
<input class=»w3-input w3-border» type=»text»> 
<label
class=»w3-text-blue»><b>Last Name</b></label>
<input class=»w3-input w3-border» type=»text»><button class=»w3-btn
w3-blue»>Register</button> </form>

Add the w3-border class to create bordered inputs:

Example

<input class=»w3-input w3-border»
type=»text»>

Rounded Borders

Use any of the w3-round classes to create rounded borders:

Example

<input class=»w3-input w3-border w3-round»
type=»text»><input class=»w3-input w3-border
w3-round-large»
type=»text»>

Borderless Input

The w3-input class has a bottom border by default. If you want a borderless input, add the w3-border-0 class:

Example

<form class=»w3-container w3-light-grey»>  <label>First
Name</label>  <input class=»w3-input w3-border-0″ type=»text»>  <label>Last Name</label>  <input class=»w3-input
w3-border-0″ type=»text»></form>

Input Form

Example

<div class=»w3-container w3-teal»>  <h2>Input Form</h2></div><form class=»w3-container»>  <label class=»w3-text-teal»><b>First Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <label class=»w3-text-teal»><b>Last Name</b></label> 
<input class=»w3-input w3-border w3-light-grey» type=»text»>  <button class=»w3-btn w3-blue-grey»>Register</button></form>

Hoverable inputs

The w3-hover-color classes adds a background color to the input field on mouse-over:

Example

<input class=»w3-input w3-hover-green» type=»text»><input class=»w3-input
w3-border w3-hover-red» type=»text»><input class=»w3-input
w3-border w3-hover-blue» type=»text»>

Animated Inputs

The w3-animate-input class transforms the width of an input field to 100% when it gets focus:

Example

<input class=»w3-input w3-animate-input»
type=»text» style=»width:30%»>

Example

<input class=»w3-check» type=»checkbox» checked=»checked»>
<label>Milk</label><input class=»w3-check»
type=»checkbox»><label>Sugar</label>
<input class=»w3-check» type=»checkbox» disabled>
<label>Lemon (Disabled)</label>

Example

<input class=»w3-radio» type=»radio» name=»gender» value=»male» checked>
<label>Male</label><input class=»w3-radio»
type=»radio» name=»gender» value=»female»><label>Female</label><input class=»w3-radio»
type=»radio» name=»gender» value=»» disabled><label>Don’t know (Disabled)</label>

Select Options

Example

<select class=»w3-select» name=»option»>  <option value=»» disabled
selected>Choose your option</option>  <option value=»1″>Option
1</option>  <option value=»2″>Option 2</option>  <option
value=»3″>Option 3</option></select>

Example

<select class=»w3-select w3-border» name=»option»>

Form Elements in a Grid

In this example, we use W3.CSS’ Responsive Grid System to make the inputs appear on the same line (on smaller screens, they will stack horizontally with 100% width).
You will learn more about this later.

Example

<div class=»w3-row-padding»>  <div class=»w3-third»>   
<input class=»w3-input w3-border» type=»text» placeholder=»One»> 
</div>  <div class=»w3-third»>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-third»>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

Grid with Labels

Example

<div class=»w3-row-padding»>  <div class=»w3-half»>   
<label>First Name</label>    <input
class=»w3-input w3-border» type=»text» placeholder=»Two»>  </div> 
<div class=»w3-half»>    <label>Last
Name</label>    <input class=»w3-input
w3-border» type=»text» placeholder=»Three»>  </div></div>

❮ Previous
Next ❯

All attributes of input

Attribute name	Values	Notes
step		Specifies the interval between valid values in a number-based input.
required		Specifies that the input field is required; disallows form submission and alerts the user if the required field is empty.
readonly		Disallows the user from editing the value of the input.
placeholder		Specifies placeholder text in a text-based input.
pattern		Specifies a regular expression against which to validate the value of the input.
multiple		Allows the user to enter multiple values into a file upload or email input.
min		Specifies a minimum value for number and date input fields.
max		Specifies a maximum value for number and date input fields.
list		Specifies the id of a <datalist> element which provides a list of autocomplete suggestions for the input field.
height		Specifies the height of an image input.
formtarget		Specifies the browsing context in which to open the response from the server after form submission. For use only on input types of «submit» or «image».
formmethod		Specifies the HTTP method (GET or POST) to be used when the form data is submitted to the server. Only for use on input types of «submit» or «image».
formenctype		Specifies how form data should be submitted to the server. Only for use on input types «submit» and «image».
formaction		Specifies the URL for form submission. Can only be used for type=»submit» and type=»image».
form		Specifies a form to which the input field belongs.
autofocus		Specifies that the input field should be in focus immediately upon page load.
accesskey		Defines a keyboard shortcut for the element.
autocomplete		Specifies whether the browser should attempt to automatically complete the input based on user inputs to similar fields.
border		Was used to specify a border on an input. Deprecated. Use CSS instead.
checked		Specifies whether a checkbox or radio button form input should be checked by default.
disabled		Disables the input field.
maxlength		Specifies the maximum number of characters that can be entered in a text-type input.
language		Was used to indicate the scripting language used for events triggered by the input.
name		Specifies the name of an input element. The name and value of each input element are included in the HTTP request when the form is submitted.
size		Specifies the width of the input in characters.
src		Defines the source URL for an image input.
type	buttoncheckboxfilehiddenimagepasswordradioresetsubmittext	Defines the input type.
value		Defines an initial value or default selection for an input field.

Labels and placeholders

TL;DR: To save you time, here’s the key point: don’t use the attribute if you can avoid it. If you need to label an element, use the <label> (en-US) element.

There are three seemingly similar ways to associate assistive text with an . However, they are actually quite different, and only one of them is always a good choice. Here we will look at each of them and learn best practices for providing the user with guidance when entering data into a form.

The <label> (en-US) element is the only way to provide explanatory information about a form field that is always appropriate (aside from any layout concerns you have). It’s never a bad idea to use a to explain what should be entered into an or <textarea> (en-US).

The attribute lets you specify a text that appears within the element’s content area itself when empty. It’s intended to be used to show an example input, rather than an explanation or prompt, but tends to be badly misused.

Here are two inputs that take a password, each with a placeholder:

The first one uses a placeholder string , demonstrating what a password might look like. And no, that’s not really a great password.

The second one uses a prompt string, as a placeholder. The first, and most obvious, problem with doing this is that as soon as the user types their first character, they no longer have a prompt explaining what that field is for.

That’s why, instead, you should use the <label> (en-US) element. The placeholder should never be required in order to understand your forms. While some people are able to remember what a given empty box is meant for after its only identifying text vanishes, others cannot.

If the user can’t understand your form if the placeholders are missing (say, in a browser that doesn’t support , or in the case above where the user starts typing then gets confused), you’re not using placeholders properly.

In addition, browsers with automatic page translation features may skip over attributes when translating. That means the may not get translated, resulting in important information not being translated.

If you feel like you need to use a placeholder, it’s possible to use both a placeholder and a label:

You can also just have plain text adjacent to the element, like this:

Please don’t do this. This doesn’t create a relationship between the prompt and the element, which is important for reasons we’ll get into in the next section.

In addition to the information provided above, there are a number of other reasons why is the best way to explain s:

• The semantic pairing of and elements is useful for assistive technologies such as screen readers. By pairing them using the ‘s (en-US) attribute, you bond the label to the input in a way that lets screen readers describe inputs to users more precisely.
• By pairing a with an , clicking on either one will focus the . If you use plaintext to «label» your input, this won’t happen. Having the prompt part of the activation area for the input is helpful for people with motor control conditions.
• As web developers, it’s important that we never assume that people will know all the things that we know. The diversity of people using the web—and by extension your web site—practically guarantees that some of your site’s visitors will have some variation in thought processes and/or circumstances that leads them to interpret your forms very differently from you without clear and properly-presented labels.