HTML5深入浅出教学篇之六

介绍

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

 
 
 
  1.  
  2.  
  3.  
  4.     text 
  5.  
  6.  
  7.      
  8.      
  9.  
  10.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     password 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);     
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     url 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);      
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     telephone 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);      
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     email 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);      
  11.      
  12.  
  13.  

#p#

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

 
 
 
  1.  
  2.  
  3.  
  4.     search 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);      
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     file 
  5.  
  6.  
  7.      
  8.      
  9.  
  10.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     radio 
  5.  
  6.  
  7.      
  8.      
  9.     radio button title 
  10.      
  11.     radio button title 
  12.      
  13.         alert(document.getElementsByTagName("input")[0].value);      
  14.      
  15.  
  16.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     checkbox 
  5.  
  6.  
  7.      
  8.      
  9.     checkbox title 
  10.      
  11.         alert(document.getElementsByTagName("input")[0].checked);  
  12.      
  13.  
  14.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     button 
  5.  
  6.  
  7.           
  8.      
  9.  
  10.  

#p#

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

 
 
 
  1.  
  2.  
  3.  
  4.     submit 
  5.  
  6.  
  7.      
  8.      
  9.          
  10.          
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     reset 
  5.  
  6.  
  7.      
  8.      
  9.          
  10.          
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     number 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);     
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     range 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);      
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     image 
  5.  
  6.       
  7.      
  8.      
  9.  
  10.  

#p#

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

 
 
 
  1.  
  2.  
  3.  
  4.     hidden 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);      
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     color 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.         alert(document.getElementsByTagName("input")[0].value);      
  11.      
  12.  
  13.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     datetime datetime-local date time month week 
  5.  
  6.  
  7.      
  8.      
  9.      
  10.      
  11.      
  12.      
  13.      
  14.      
  15.      
  16.      
  17.      
  18.      
  19.  
  20.  

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

 
 
 
  1.  
  2.  
  3.  
  4.     input 元素的通用属性: autocomplete, placeholder, pattern, dirname, size, maxlength, readonly, required, list, multiple, min, max, step 
  5.  
  6.  
  7.      
  8.      
  9.          
  10.          
  11.          
  12.          
  13.          
  14.          
  15.          
  16.          
  17.          
  18.          
  19.          
  20.          
  21.          
  22.          
  23.          
  24.          
  25.          
  26.          
  27.          
  28.          
  29.          
  30.          
  31.          
  32.          
  33.          
  34.          
  35.          
  36.              
  37.              
  38.              
  39.          
  40.          
  41.          
  42.          
  43.          
  44.              
  45.              
  46.              
  47.          
  48.          
  49.          
  50.          
  51.          
  52.          
  53.      
  54.  
  55.  

[源码下载]

网站栏目:HTML5深入浅出教学篇之六
URL地址:http://www.mswzjz.cn/qtweb/news45/471245.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能,是专注品牌与效果的网络营销公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 贝锐智能