input 表单元素 - 码农知识堂

input 表单元素
```
<form>
    // text 文本框 用户可以里面输入任何文字
    用户名： <input type="text" name="username" balue="请输入用户名">   <br>
    // password 密码框 用户看不见输入的密码
    <input type="password" name="pwd"> <br>
    // radio 单选按钮  可以实现多选一
    // name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选一
    性别： 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex"             value="男">  人妖<input type="radio" name="sex" value="人妖"> 
    <br>
    // checkbox 复选框  可以实现多选
    爱好： 吃饭<input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" 
 name="hobby" value="睡觉">  打豆豆<input type="checkbox" name="hobby" value="打豆豆">
form>
    // 点击了提交按钮，可以把 表单域form 里面的表单元素 里面的值 提交给后台服务器
    <input type="submit" value="免费注册">
    // 重置按钮可以还原表单元素初始的默认状态
    <input type="reset" value="重新填写">
```
type 属性

type = text 文本框

type = password 密码框

type = radio 单选按钮

type = checkbox 复选按钮

type = button 定义可点击按钮（多数情况下，用于通过JavaScript 启动脚本）

例如获取短信验证码

type = file 定义输入字段和 "浏览" 按钮， 供文件上传

单选按钮和复选按钮必须有相同的name值

name 由用户自定义定义input元素的名称

value 由用户自定义规定input元素的值

checked checked 规定此input元素首次加载时应当被选中

maxlength 正整数规定输入字段中的字符的最大长度

label 标签

标签为 input 元素定义标注 (标签)

标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点(光标) 转到或者选择对应的表单元素上，用来增加用户体验

核心：标签的for 属性应当与相关元素的id属性相同
```
<label for="text"> 用户名：label> <input type="text" id="text">
<input type="radio" id="nan" name="sex"> <label for="nan">男label>
<input type="radio" id="nv" name="sex"> <label for="nv">女label>
```
select 下拉表单

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用