Home > Web Front-end > H5 Tutorial > Detailed introduction to all types in HTML5 forms

Detailed introduction to all types in HTML5 forms

黄舟
Release: 2017-05-21 14:57:45
Original
2629 people have browsed it

1.button: Define a clickable button (usually used with JavaScript to start a script).

<input id="" type="button" name="" value="按钮" /><br />
<br />
Copy after login

2.checkbox: Define the checkbox.

<input id="" type="checkbox" name="" />男<br />
<input id="" type="checkbox" name="" checked="checked" />女<br />
<br />
Copy after login

3.cancel: Cancel button, used to cancel the submission.

<input id="" type="cancel" name="" /><br />
<br />
Copy after login

4.color: Define the color picker.

<input id="" type="color" name="" /><br />
<br />
Copy after login


5.date: Define date control (including year, month, day, excluding time) .

<input id="" type="date" name="" /><br />
<br />
Copy after login

6.datetime: Define date and time controls (including year, month, day, hour, minute, second, fraction seconds, based on UTC time zone).


<
for
m 
action
="">生日 (日期和时间):<input id="" type="datetime" name="" /> <input id="" type="submit" name="" value="提交" /></form>
<p><br />
<br />
Copy after login


7.datetime-local: Define date and time controls (including year, month, day, hour, minute, second, fraction of a second, no with time zone).

<input id="" type="datetime-local" name="" /><br />
<br />
Copy after login


8.month: Define month and year controls (without time zone).

<input id="" type="month" name="" /><br />
<br />
Copy after login


9.week: Define week and year controls (without time zone).

<input id="" type="week" name="" /><br />
<br />
Copy after login

10.time: Defines a control for entering time (without time zone).

<input id="" type="time" name="" /><br />
<br />
Copy after login

11.email: Defines the field used for e-mail addresses.


<form action=""></form>
<p>E-mail:<input id="" type="email" name="" /><br />
<br />
Copy after login


12.file: Define the file selection field and "Browse..." button for file upload .

<input id="" type="file" name="" /><br />
<br />
Copy after login


13.hidden: Define hidden input fields.

<input id="" type="hidden" name="" /><br />
<br />
Copy after login


14.image: Define the image as the submit button.

<input id="" type="image" name="" /><br />
<br />
Copy after login


15.number: Defines a field for entering numbers.

<input id="" type="number" name="" /><br />
<br />
Copy after login


16.password: Define the password field (characters in the field will be masked).

<input id="" type="password" name="" /><br />
<br />
Copy after login

17.radio: Define radio button.

<input id="" type="radio" name="" />男<br />
<input id="" type="radio" name="" checked="checked" />女<br />
<br />
Copy after login


18.range: Defines a control for input numbers where the exact value is not important (such as a slider control).

<input id="" type="range" name="" /><br />
<br />
Copy after login


19.reset: Define the reset button (reset all form values ​​to default values).

<input id="" type="reset" name="" /><br />
<br />
Copy after login


20.search: Define the text field used to enter the searchstring.

<input id="" type="search" name="" /><br />
<br />
Copy after login


21.submit: Define the submit button.

<input id="" type="submit" name="" value="提交" /><br />
<br />
Copy after login

22.tel: Defines the field for entering a phone number.

Enter phone number:

<input id="" type="tel" name="" /><br />
<br />
Copy after login


23.text: Default. Defines a single-line text field (default width is 20 characters).

<input id="" type="text" name="" /><br />
<br />
Copy after login


24.url: Defines the field for entering the URL.

Add your homepage URL:

<input id="" type="url" name="" /></p>
Copy after login

The above is the detailed content of Detailed introduction to all types in HTML5 forms. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template