甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

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. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.     text 
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.      
    8. 
  
  
  
  8.      
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11.

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

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

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

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

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

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

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

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

#p#

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

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

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

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

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

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

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

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

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

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

#p#

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

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

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

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

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

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

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

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

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

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

#p#

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

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

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

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

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

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

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

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

[源码下载]


分享名称：HTML5深入浅出教学篇之六
本文路径：http://chengdu.cdxwcx.cn/article/cociopc.html

其他资讯