input types

1. text 单行文字

<form action="action_page.php">

First name:<br>

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

<br>

Last name:<br>

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

<br><br>

<input type="submit">

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text field is 20 characters.</p>

2. password 密码，密码形式显示为星号或圆点

<form action="">

User name:<br>

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

<br>

User password:<br>

<input type="password" name="psw">

</form>

3. submit

<form action="action_page.php">

First name:<br>

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

<br>

Last name:<br>

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

<br><br>

<input type="submit" value="Submit">

</form>

4. radio 单选项

<form action="action_page.php">

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

<br><br>

<input type="submit">

</form> 

5. checkbox 多项选择，包括不选

<form action="action_page.php">

<input type="checkbox" name="vehicle1" value="Bike">I have a bike

<br>

<input type="checkbox" name="vehicle2" value="Car">I have a car 

<br><br>

<input type="submit">

</form>

6. button 按钮

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

HTML5 新增以下项

7. color 颜色选项

<form action="action_page.php">

  Select your favorite color:

  <input type="color" name="favcolor" value="#ff0000">

  <input type="submit">

</form>

8. date 日期

<form action="action_page.php">

Enter a date before 1980-01-01:<br>

<input type="date" name="bday" max="1979-12-31"><br><br>

Enter a date after 2000-01-01:<br>

<input type="date" name="bday" min="2000-01-02"><br><br>

<input type="submit"> 

</form>

9. datetime 日期时间，但是已经废弃不用

<form action="action_page.php">

  Birthday (date and time):

  <input type="datetime" name="bdaytime">

  <input type="submit">

</form>

10. datetime-local 日期时间，没有时区

<form action="action_page.php">

  Birthday (date and time):

  <input type="datetime-local" name="bdaytime">

  <input type="submit" value="Send">

</form>

11. email 邮件

<form action="action_page.php">

  E-mail:

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

  <input type="submit">

</form>

12. month 年月

<form action="action_page.php">

  Birthday (month and year):

  <input type="month" name="bdaymonth">

  <input type="submit">

</form>

13. number 数字，可以定义所填数字的范围，即限制restriction

<form action="action_page.php">

  Quantity (between 1 and 5):

  <input type="number" name="quantity" min="1" max="5">

  <input type="submit">

</form>

13A. restriction 限制

disabled

max

maxlength

min

pattern

readonly

required

size

step

value

14. range 滑动条

<form action="action_page.php" method="get">

  Points:

  <input type="range" name="points" min="0" max="10">

  <input type="submit">

</form>

15. search 搜索

<form action="action_page.php">

  Search Google:

  <input type="search" name="googlesearch">

  <input type="submit">

</form>

16. tel 电话号码，只有在safari 8显示

<form action="action_page.php">

  Telephone:

  <input type="tel" name="usrtel">

  <input type="submit">

</form>

17. time 时间，时分上下午

<form action="action_page.php">

  Select a time:

  <input type="time" name="usr_time">

  <input type="submit">

</form>

18. url 网页地址输入，手机不支持显示

<form action="action_page.php">

  Add your homepage:

  <input type="url" name="homepage">

  <input type="submit">

</form>

19. week 周月年

<form action="action_page.php">

  Select a week:

  <input type="week" name="year_week">

  <input type="submit">

</form>