HTML5 input()标签的使用

一、标签定义

             1、 标签规定了用户可以在其中输入数据的输入字段。

             2、输入类型是由 type 属性定义。

二、input的参数 

<input type="类型" name="输入框名称" size="框的大小" maxlength="字符的最大数" value="框的默认值"/>
   
     
     
     
     

三、属性

          文本域:type = text      用来输入单行文本


   
     
     
     
     
  1. 姓: < input type = "text" name = "yourname" > <br >
  2. 名: < input type = "text" name = "myname" >

   

           密码字段:type=password                用户的输入会被遮挡


   
     
     
     
     
  1. 你也可以加maxlength = "8",意思是输入的密码长度只能 8
  2. 密码: < input type = "password" >

  HTML5 input()标签的使用_第1张图片

            单选按钮:type=radio                表示一组选择之中,只能选中一项


   
     
     
     
     
  1. < input type = "radio" value = "A" name = "nn" >A <br >
  2. < input type = "radio" value = "B" name = "nn" >B <br >
  3. < input type = "radio" value = "C" name = "nn" >C <br >
  4. < input type = "radio" value = "D" name = "nn" >D <br >

 

             复选框:type=checkbox         允许选择或取消选择该选项


   
     
     
     
     
  1. < input type = "checkbox" value = "A" name = "nn" >A
  2. < input type = "checkbox" value = "B" name = "nn" >B
  3. < input type = "checkbox" value = "C" name = "nn" >C
  4. < input type = "checkbox" value = "D" name = "nn" >D

           提交按钮:type=submit               用户点击这个按钮,就会把表单提交给服务器


   
     
     
     
     
  1. <form >
  2. Username: < input type = "text" name = "user" >
  3. < input type = "submit" value = "Submit" >
  4. < /form >

HTML5 input()标签的使用_第2张图片

             重置按钮:type=reset         作用在于清空输入的信息。


   
     
     
     
     
  1. <form >
  2. 姓名: < input type = "text" >
  3. < input type = "reset" >
  4. < /form >

 HTML5 input()标签的使用_第3张图片

            日期的输入框:type=date                用户可以输入年月日

   HTML5 input()标签的使用_第4张图片

            时间的输入框:type=time                  可以输入时分秒

     HTML5 input()标签的使用_第5张图片

            滑块:type=range        用户拖动滑块,选择给定范围之中的一个数值         

       

            输入年份和月份的输入框:type=month 

     HTML5 input()标签的使用_第6张图片

             选择颜色的控件:type=color          它的值一律都是#rrggbb格式

     HTML5 input()标签的使用_第7张图片

            搜索的文本输入框:type=search         基本等同于type=text。

            将一个图像文件作为提交按钮:type=image    行为和用法与type=submit完全              一致

            电子邮箱的文本输入框:type=email    表单提交之前,浏览器会自动验证是否              符合电子邮箱的格式

             文件选择框:type=file  允许用户选择一个或多个文件,常用于文件上传功能。

             不显示在页面的控件:type=hidden         用户无法输入它的值,主要用来向服                 务器传递一些隐藏信息。
             数字输入框:type=number        只能输入数字

             只能输入网址的文本框:type=url
             只能输入电话号码的输入框:type=tel

你可能感兴趣的:(前端技术,html5,html,前端)