Что такое HTML input type.

3. Создание полей формы

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

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

4. Текстовые поля ввода

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

Кошка

7. Кнопки

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

Для корректного отображения элемента

разными браузерами нужно указывать атрибут type , например, .

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

8. Флажки и переключатели в формах

Флажки в формах задаются с помощью конструкции , а переключатель — при помощи .

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

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

The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent .

The source for this interactive example is stored in a GitHub repository. If you"d like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

_types">Form types

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

When an input element is given a name , that name becomes a property of the owning form element"s element."> HTMLFormElement.elements property. That means if you have an input whose name is set to guest and another whose name is hat-size , the following code can be used:

Let form = document.querySelector("form"); let guestName = form.elements.guest; let hatSize = form.elements["hat-size"];

value

The input control"s value. When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access the respective elements."> HTMLInputElement object"s value property. The value attribute is always optional.

Note: Unlike other input controls, checkboxes and radio buttons are only included in the submitted data if the checkbox or radio button is currently checked . If it is, then the value attribute is reported as the input"s value.

For example, if a checkbox whose name is status has a value of active , and the checkbox is checked, the form data submitted will include status=active . If the checkbox isn"t active, it isn"t listed in the form data at all. The default value for checkboxes and radio buttons is on .

Styling input elements

You can style elements using various color-related attributes in particular. One unusual one that is specific to text entry-related elements is the CSS property, which lets you set the color used to draw the text input caret:

HTML

CSS

Result

For more information about adding color to elements in HTML, see Applying color to HTML elements using CSS .

Labels and placeholders

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.

_element">The element

The placeholder attribute

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

Do you like peas?

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Notes

File inputs

Starting in Gecko 2.0 , calling the click() method on an element of type file opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

You cannot set the value of a file picker from a script - doing something like the following has no effect:

Var e = getElementById("someFileInputElement"); e.value = "foo";

When a file is chosen using an , the real path to the source file is not shown in the input"s value attribute for obvious security reasons. Instead, the filename is shown, with C:\fakepath\ appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is defined in the spec .

Custom error messages

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

Enter username (upper and lowercase letters): Submit

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 pattern .

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

Const nameInput = document.querySelector("input"); const form = document.querySelector("form"); nameInput.addEventListener("input", () => { nameInput.setCustomValidity(""); nameInput.checkValidity(); }); nameInput.addEventListener("invalid", () => { if(nameInput.value === "") { nameInput.setCustomValidity("Enter your username!"); } else { nameInput.setCustomValidity("Usernames can only contain upper and lowercase letters. Try again!"); } });

The example renders like so:

• We check the valid state of the input element every time its value is changed by running the checkValidity() method via the input event handler.
• If the value is invalid, an invalid event is raised, and the invalid 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 if() 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 setCustomValidity() with an empty string value. We therefore do this every time the input 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 - x-moz-errormessage - 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).

Localization

The allowed inputs for certain 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 type="number"):

• Try the language specified by a lang / xml:lang 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.

Using mozactionhint on Firefox mobile

You can use the mozactionhint 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:

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

See also

• Other form-related elements: element represents a document section that contains interactive controls for submitting information to a web server.">
  , element contains a set of elements that represent the values available for other controls.">