Input element

There are many styles of input elements in HTML5, and this section goes into detail about the various functions and attributes of the input field.

type=text

When the type attribute value of the input element is text, additional attributes are available

  • maxlength,size— Size of the text box
  • value,placeholder— Initial placeholder
  • list— Display in a drop-down box
  • readonly,disabledRead only and disable input boxes
  • patternRegular expressions for input validation (explained in the next chapter)
  • required— Requires user input (explained in the next chapter)

Maxlength, size– The size of the text box

Maxlength indicates the maximum number of characters a text box can enter. Size indicates the maximum number of characters a text box can display

Value, placeholder– initial placeholders

Value sets a default value placeholder in the input field and a hint of text

List – dropdown box display

The value of the list attribute is the ID value of a datalist element. After setting, the data in datalist will be displayed when the user clicks the input box for the user to select.

Fruit:<input list="fruitlist" id="fave" name="fave"/>

<datalist id="fruitlist">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</datalist>
Copy the code

Readonly, disabled– Read-only and disable input boxes

Both readonly and Disabled are input attributes. The former makes no difference in display, while the latter input box grays out. When the form is transferred, the data in the disabled input box is not transferred.

Pattern — Regular expressions for input validation

Required — Requires the user to enter

type=password

The format is used to enter a password and the data you enter becomes a solid black ball.

Type =submit, reset, button

All three formats turn the input field into a button button.

  • submitUse to transfer the form
  • restUsed to restore the input field to its default
  • buttonUse to customize buttons

type=number

The input box can only enter numbers. You can also use list to set drop-down box selections; Min attribute setting minimum value; Max Attribute setting maximum value; Step Sets the step size of up and down adjustment. Value Sets the initial number.

type=range

The input box is used to select a certain range of numbers, sliding selection. Attribute is consistent with type=number.

type=checkbox

Indicates multiple boxes. The unique attributes are checked, Required, and Value.

typy=radio

Multiple multiple check boxes must use the same name. The unique attributes are checked, Required, and Value.

Type =email, tel, url

The input contents in the input box are email address, telephone number, and website. Unique attributes include list, MaxLength, Pattern, placeholder, Readonly, Required, size, and Value.

Type =datetime, datetime-local, data, month, time, week

Indicates the input time period. The unique attributes are list, Max, min, Readonly, Required, step, and value.

type=color

Gets the color of the input.

type=search

Represents a search box, and does nothing.

type=hidden

Hide input field

type=image

Displays a confirm button that appears as a picture.

type=file

The file is uploaded. The unique attributes are Accept and Required. When using this attribute value, the form encoding type of the parent element must be multipart/form-data of the transferable file