HTML5<input>标签

时间：2019-02-12 10:19:23 阅读：228 评论：0 收藏：0 [点我收藏+]

在表单中最为核心的就是<input>标签，使用<input>标签可以在表单中定义文本输入框、单选按钮、复选框、重置按钮等，其基本语法格式如下：

<input type="控件类型"/>

在该语法中，type属性为其最基本的属性，取值有很多种，用来指定不同的控件类型，除type属性外，还可以定义其它的属性，常用的属性如name，value，size等。

示例：

技术分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>常用表单控件</title>
 6 </head>
 7 <body>
 8     
 9 
10     <form action="#" method="post" >
11         用户名：<input type="text" value="张三" maxlength="6"><br/><br/>
12         密码：<input type="password" size="40"><br/><br/>
13         
14         性别：<input type="radio" name="sex" checked="checked">男
15         <input type="radio" name="sex" >女<br/><br/>
16         年龄：<input type="number" name="age" min="18" max="100"><br/><br/>
17         兴趣：<input type="checkbox" />唱歌
18                 <input type="checkbox" />跳舞
19                 <input type="checkbox" />游泳<br/><br/>
20             喜欢的颜色:<input type="color" name="color" value="#ff0000"><br/><br/>
21 
22             关键词：<input type="search" ><br/><br/>
23             难易程度：<input type="range" min="1" max="120"><br/><br/>
24              <div><input type="button" name="button" value="普通按钮">
25             <input type="submit" name="submit" value="提交">
26             <input type="reset" value="重置">
27         </div>
28 
29 
30 
31 
32     </form>
33     
34 </body>
35 </html>