Different types of input in HTML5

HTML input - input field in a form

There can be any number of input fields between the opening and closing HTML form tags. In HTML5, input tags no longer have to lie within a form element, but the form attribute of the input tag can establish the connection to the form.

Input fields

The display and the form of the input tag is determined by the attributes, primarily by the type-Attribute

^ ^ ^ | | + --- Displayed value | | transmits the input to the server | | | + --- identifies the field | in use | + --- Type of input field, e.g. text or checkbox

Surname- and valueAttribute report the data in the input field to the application on the server.

The blue frame that the browser puts around an activated input field is confirmation for the user that he has focused on the field. The frame is created by CSS outline and can be changed by CSS input: focus {outline: none; } be suppressed.

Next type the input tag has a long list of attributes for different types of input fields and user guidance:

Input name and value

The name attribute identifies the input field in the application on the server and, like an id attribute, must be unique.

value is empty, but can e.g. show existing data from the application or optionally a default value that the user can overwrite.

The form transfers the value of the name attribute and the input of the user from the value attribute when submitting the data to the application.

Javascript can check the user's input before submitting the form: Validate forms with Javascript. But if the data from the form is to be saved or sent by email, an application is required on the server.

input type = text

<input type="text" name="" value="">

The input tag with type = "text" is the workhorse among the form fields and imports a single-line field for information such as telephone numbers or user names.

  • The specified size of the field is usually 20 to 30 characters and is specified via the attribute size and / or controlled by a CSS rule.
  • maxlength maximum number of characters that the input field accepts.
  • value can put a text in the input field (optional).
  • If more than one line is required, instead of the tag, use type = "text" the