介绍

HTML 5: 表单元素之input 元素

表单元素之 input 元素 - text, password, url, telephone, email, search, file, radio, checkbox, button, submit, reset, number, range, image, hidden, color, datetime, datetime-local, date, time, month, week

input 元素的通用属性 - autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step

示例

1、text - 文本框element/form/input/text.html

2、password - 密码框element/form/input/password.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);     
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

3、url - url 框element/form/input/url.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

4、telephone - 电话框element/form/input/telephone.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

5、email - 电子邮件框element/form/input/email.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

#p#

6、search - 搜索框element/form/input/search.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

7、file - 用于上传文件element/form/input/file.html

8、radio - 单选框element/form/input/radio.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
    radio button title 
  
  
  
     
  
  
  
    radio button title 
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

9、checkbox - 复选框element/form/input/checkbox.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
    checkbox title 
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].checked);  
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

10、button - 一般按钮element/form/input/button.html

#p#

11、submit - 提交按钮element/form/input/submit.html

12、reset - 复位按钮element/form/input/reset.html

13、number - 数字输入框element/form/input/number.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);     
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

14、range - 滑动条element/form/input/range.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

15、image - 显示图片element/form/input/image.html

#p#

16、hidden - 隐藏元素，不会显示element/form/input/hidden.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

17、color - 颜色选择器element/form/input/color.html

 
 
 

  
  
  
 
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
 
  
  
  
 
  
  
  
     
  
  
  
     
  
  
  
     
  
  
  
        alert(document.getElementsByTagName("input")[0].value);      
  
  
  
     
  
  
  
 
  
  
  
 
 
 
 

18、datetime - 日期时间输入/选择框（UTC）, datetime-loca - 日期时间输入/选择框（本地时区）, date - 日期输入/选择框, time - 时间输入/选择, month - 月份输入/选择框, week - 星期输入/选择框element/form/input/datetime_datetime-local_date_time_month_week.html.html

19、input 元素的通用属性element/form/input/_attributes.html

[源码下载]

网站标题：HTML5深入浅出教学篇之六
本文地址：http://whjierui.cn/article/cociopc.html