Элемент

Animated Inputs

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

Example

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

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

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 ❯

Hoverable inputs

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

Example

Animated Inputs

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

Example

Example

Select Options

Example

Form Elements in a Grid

Example

Grid with Labels

Example

❮ Previous
Next ❯

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.

HTML тег

Все элементы тега форм создаются с помощью тега <input>.

Синтаксис <input>

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

name=»name_field» — параметр для задания имени конкретному input. Это нужно, чтобы при дальнейшей обработке данных формы можно было получить значение этого поля.
type=»значение» — отвечает за тип элемента, т.е. что именно будет представлять из себя поле. И здесь есть множество возможных значений:
- text — текстовое поле. Одно из самых часто используемых значений
- password — текстовое поле, но с той особенностью, что при вводе символы скрыты
- radio — радиокнопки
- checkbox — переключатели
- submit — кнопка для отправки значений формы (управление передается на адрес указанный в адрес, указанный в action атрибута формы)
- reset — кнопка для очистки всей формы
- hidden — скрытое поле
- button — кнопки для обработки каких-то действий (не путать с submit!)
- file — для загрузки файлов на сервер
- image — поле с изображением (используется крайне редко)
value=»значение» — указывается значение по умолчанию

Теперь разберем более подробно каждый элемент

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

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.

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

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

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

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

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

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-фреймворк
}

Обработка исключений ввода

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

Вот такой код считается небезопасным:

Запустим его и введем следующее:

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

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

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

Вот так будет выглядеть вывод с исключением.

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

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

Input Type Reset

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

Example

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.

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

Animated Inputs

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

Example

Example

Select Options

Example

Form Elements in a Grid

Example

Grid with Labels

Example

❮ Previous
Next ❯

Form types

How an works varies considerably depending on the value of its attribute, hence the different types are covered in their own separate reference pages. If this attribute is not specified, the default type adopted is .

The available types are as follows:

: A push button with no default behavior.
: A check box allowing single values to be selected/deselected.
: HTML5 A control for specifying a color. A color picker’s UI has no required features other than accepting simple colors as text ().
: HTML5 A control for entering a date (year, month, and day, with no time).
: HTML5 A control for entering a date and time, with no time zone.
: HTML5 A field for editing an e-mail address.
: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
: A control that is not displayed but whose value is submitted to the server.
: A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.
: HTML5 A control for entering a month and year, with no time zone.
: HTML5 A control for entering a number.
: A single-line text field whose value is obscured. Use the maxlength and minlength attributes to specify the maximum length of the value that can be entered.

Note: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see Insecure passwords. Other browsers are also implementing similar mechanisms.
: A radio button, allowing a single value to be selected out of multiple choices.
: HTML5 A control for entering a number whose exact value is not important.
: A button that resets the contents of the form to default values.
: HTML5 A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.
: A button that submits the form.
: HTML5 A control for entering a telephone number.
: A single-line text field. Line-breaks are automatically removed from the input value.
: HTML5 A control for entering a time value with no time zone.
: HTML5 A field for entering a URL.
: HTML5 A control for entering a date consisting of a week-year number and a week number with no time zone.

Some input types are now obsolete:

datetime (en-US): HTML5 This deprecated API should no longer be used, but will probably still work.This is an obsolete API and is no longer guaranteed to work. A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. This feature has been removed from WHATWG HTML.

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

Поддержка валидации форм
IE	Firefox	Safari	Chrome	Opera	iPhone	Android
—	4.0+	5.0+	6.0+	9.0+	—	—

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

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

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

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

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

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

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

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

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

Input Restrictions

Here is a list of some common input restrictions:

Attribute	Description
checked	Specifies that an input field should be pre-selected when the page loads (for type=»checkbox» or type=»radio»)
disabled	Specifies that an input field should be disabled
max	Specifies the maximum value for an input field
maxlength	Specifies the maximum number of character for an input field
min	Specifies the minimum value for an input field
pattern	Specifies a regular expression to check the input value against
readonly	Specifies that an input field is read only (cannot be changed)
required	Specifies that an input field is required (must be filled out)
size	Specifies the width (in characters) of an input field
step	Specifies the legal number intervals for an input field
value	Specifies the default value for an input field

You will learn more about input restrictions in the next chapter.

The following example displays a numeric input field, where you can enter a
value from 0 to 100, in steps of 10. The default value is 30:

Example

<form> <label for=»quantity»>Quantity:</label> <input
type=»number» id=»quantity» name=»quantity» min=»0″ max=»100″ step=»10″
value=»30″></form>

Элемент

Animated Inputs

Example

Example

Example

Select Options

Example

Example

Form Elements in a Grid

Example

Grid with Labels

Example

Hoverable inputs

Example

Animated Inputs

Example

Example

Example

Select Options

Example

Example

Form Elements in a Grid

Example

Grid with Labels

Example

The most basic form field

HTML тег

HTML Tutorial

Attributes of input

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

See also

Обработка исключений ввода

Input Type Submit

Example

Example

Input Type Reset

Example

Colors

Input Form

Example

Hoverable inputs

Example

Animated Inputs

Example

Example

Example

Select Options

Example

Example

Form Elements in a Grid

Example

Grid with Labels

Example

Form types

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

Input Restrictions

Example