Type of input box in HTML5 mobile development, html5input

Type of input box in HTML5 mobile development, html5input
HTML5 specifications introduce many new input box types

In HTML5 mobile development, these new input box types are used to display custom keyboard la S, which provide a better user experience and easier form filling.

In this article, the measured mobile phone number is kidney 4S and meter 4

 

Number

When the input type is set to type = "number", iOS displays numbers, punctuation marks, and symbol keyboards, and Android displays dial-up keyboards. The Code is as follows:

<input type="number" id="number" name="number" />

Figure: iOS on the left, Android on the right

 

Tel

When the input type is defined as type = "tel", both iOS and Android display the dial-up keyboard. The Code is as follows:

<input type="tel" id="tel" name="tel" />

Figure: iOS on the left, Android on the right

 

Email type email

When the input type is set to type = "email", both iOS and Android display letters and email symbol keyboards. The Code is as follows:

<input type="email" id="email" name="email" />

Figure: iOS on the left, Android on the right

 

Link Type url

When the input type is defined as type = "url", both iOS and Android display the letter and link symbol keyboard. The Code is as follows:

<input type="url" id="url" name="url" />

Figure: iOS on the left, Android on the right

 

Date

When the input type is defined as type = "date", both iOS and Android display the date Picker. The style varies greatly. The Code is as follows:

<input type="date" id="date" name="date" />

Figure: iOS on the left, Android on the right

 

Time

When the input type is defined as type = "time", both iOS and Android display the time picker. The style varies greatly. The Code is as follows:

<input type="time" id="time" name="time" />

Figure: iOS on the left, Android on the right

 

Datetime

When the input type is defined as type = "datetime", iOS call fails, and Android displays the date and time picker in sequence. The Code is as follows:

<input type="datetime" id="datetime" name="datetime" />

Figure: iOS on the left, Android on the right

 

Month

When the input type is set to type = "month", iOS displays the month picker. Android displays the Date Picker but only records the year and month. The Code is as follows:

<input type="month" id="month" name="month" />

Figure: iOS on the left, Android on the right

 

The iOS keyboard layout is basically the same, and the keyboard layout of different Android mobile phones is quite different.