＜input＞ 表单元素

<input> 表单元素

一、表单元素简介

​ <input>标签是一个单标签，是让用户输入信息的一种表单控件，其中包含一个 type 属性，根据输入内容的不同，选择不同的属性值、例如有文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。

二、type 属性的属性值及其描述

属性值	描述
button	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
checkbox	复选框
file	输入字段和 “ 浏览 ” 按钮，供文件上传
hidden	隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段，该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮，重置会清除表单中所有数据
submit	定义提交按钮，提交按钮会吧表单数据发送到服务器
text	定义单行输入字段，用户可在其中输入文本，默认宽度为20个字符

三、表单其他属性及其描述

属性	属性值	描述
name	用户自定义	定义 input 元素的名称
value	用户自定义	规定 input 元素的值
checked	checked	规定此 input 元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度。

四、注意事项

1. name 和 value 是每个表单元素都有的属性值，主要是给后台人员使用的。
2. name 表单元素的名字，要求单选按钮和复选框都要有相同的 name 值。
3. checked 用于单选按钮和复选框的，当页面打开的时候默认选择的此按钮。
4. maxlength 是用户可以在表单元素输入的最大字符数，一般比较少用。

五、代码示例演示

<-- 省略基本骨架代码 -->
<form action="xxx.php" method="GET">
  文本框-用户名：<input type="text" name="username" value="请输入用户名"> <br>
  密码框-密码：<input type="password" name="pwd"> <br>
  单选按钮-性别：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br>
  复选按钮-爱好：打篮球<input type="checkbox" name="happy" value="bool" checked="checked"> 睡觉 <input type="checkbox" name="happy" value="sleep"> 打游戏 <input type="checkbox" name="happy" value="game"> <br>
  提交按钮：<input type="submit"> <input type="submit" value="提交上面数据"> <br>
  重置按钮：<input type="reset"> <input type="reset" value="重新填写"> <br>
  普通按钮button: <input type="button"> <input type="button" value="获取短信验证码"> <br>
  上传文件：<input type="file"> <br>
</form>

点击提交按钮，会把用户填写的数据提交到表单域定义的 action 值里，这里是随便写的 xxx.php。后面会跟着用户填写的数据，提交给后台程序员使用，如下图所示。

点击选择文件即可打开电脑的文件管理，如下如所示。

六、<label> 标签

<label> 标签用于绑定一个表单元素的，当点击 <label> 标签内的文本时，浏览器会自动将焦点光标定位到对应的表单元素上，用来增加用户的体验。

语法：

<form action="xxx.php" method="GET">
  <label for="nan">男</label><input type="radio" name="sex" id="nan">
  <label for="nv">女</label><input type="radio" name="sex" id="nv">
</form>