HTML+CSS宝典 HTML进阶 表单元素
表单元素涉及到一系列元素，主要用于收集用户数据
一、input元素
input元素主要做文本输入，可能是文本框，可能是日期选择框，也可能是一个滑动块，这些都统称为输入，input 单词本身也是输入的意思，输入的不一定是文本，准确的说是输入框
input 是一个空元素，没有结束标记
type 属性，表示这个输入框的类型
value 属性，表示输入框的值
placeholder 属性，显示提示的文本，文本框没有内容时显示
<input type="text" value="请输入账号">
不写 value 属性，写 placeholder 属性
<input type="text" placeholder="请输入账号">
type 属性有很多的取值，下面是经常用到的取值
type = "text"
表示普通文本输入框，在不同的浏览器显示的样式可能有些不一样
type="password"
表示密码框，在密码框 value 属性通常不会写（不是不能写），和加密一点关系都没有，不能加密，作用是防止背后有人偷窥的
type="date"
表示日期选择框，有兼容性问题，新版本浏览器一般都支持，用的时候谨慎，日期选择的样式不能更改，这也是可替换元素的特点
type="search"
表示为搜索框，一般在手机上用的比较多一点，手机键盘右下角的键不在是换行，变成了搜索按钮，
也有兼容性问题，在电脑上用没什么区别，文本框后面多一个 x
type="range"
滑块，滑动的值要靠 js 来读取，range 表示范围（选中一个范围），
使用 range 类型，有些属性是可以设置的
min 设置最小值为 0
max 设置最大值为 5
<input type="range" min="0" max="5">
这个不太常见，而且要配合js使用
type="color"
颜色选择，也要配合js使用
<input type="color">
type="number"
表示数字输入框，现在用的越来越多了，它只能输入数字。今后做商城输入购物的数量，就用这个东西，有一些兼容性问题，老浏览器不支持
<input type="number">
还有一些属性
min 表示输入的最小值
max 表示输入的最大值
<input type="number" min="0" max="10">
number 类型里还有一个步进属性 step，表示每次输入多少，默认是1可以改成 2
<input type="number" min="0" max="10" step="2">
type="checkbox" 多选框
1. checked 属性表示默认选中（checked是布尔属性）
2. 要有一个 name 属性，根据 name 分组
吃 <input name="aihao[]" type="checkbox" value="吃" checked> 喝 <input name="aihao[]" type="checkbox" value="喝"> 玩 <input name="aihao[]" type="checkbox" value="玩" checked> 乐 <input name="aihao[]" type="checkbox" value="乐">
type="radio" 单选框
<h1>性别:</h1> <input name="gender" type="radio" value="female" checked="checked"> 女 <input name="gender" type="radio" value="male"> 男
Ps
dedecms 系统中的栏目属性
<h1>栏目属性：</h1> <input name="ispart" type="radio" id="radio" value="0" checked="checked"/> 最终列表栏目（允许在本栏目发布文档，并生成文档列表） <input name="ispart" type="radio" id="radio" value="1" /> 频道封面（栏目本身不允许发布文档） <input name="ispart" type="radio" id="radio" value="2" /> 外部连接（在"文件保存目录"处填写网址）
type="file" 选择文件要上传
<input type="file" name="upfile">
type="hidden"
不显示在页面上，但它的值会被提交到服务器
这些常见的 type 属性都属于 input 元素，
value 属性、placeholder 属性都是有的，只是有些情况 placeholder 属性我们看不见
比如在单选框里写 placeholder 属性，写了没什么用
<h1>性别:</h1> <input name="gender" type="radio" value="female" checked="checked" placeholder="请输入账号" > 女 <input name="gender" type="radio" value="male"> 男
一般使用输入框的时候，placeholder 属性能显示
<input type="number" placeholder="输入数字">
placeholder 属性显示提示的文本，在文本框没有内容时显示
<input type="text" placeholder="请输入账号">
百度搜索 input mdn
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
input 元素除了做输入框之外，还可以做按钮，只不过这种方式有点过时了
type="reset" 重置按钮
<input tyle="reset" value="重置">
type="button" 普通按钮，
需要配合 js 和后端语言，静态页面写样式尽量用 button
<input tyle="button" value="普通按钮">
type="submit" 提交按钮
<input tyle="submit" value="提交">
type="image" 图片按钮
src 属性定义图片来源
alt 定义替代文本
height 和 width 属性定义图片大小
<input type="image" name="imageField" src="images/button_ok.gif" border="0" />
二、select元素
select 元素表示下拉列表选择框
1. 通常和 option 元素配合使用，option 表示下拉列表里面的选项
2. selected="selected" 默认选中，selected 是布尔属性，在 HTML5 里面可以简写
请选择城市： <select name="city" id=""> <option value ="成都">成都</option> <option value ="北京">北京</option> <option selected="selected" value ="哈尔滨">哈尔滨</option> </select>
select 元素里面还可以进行分组，
1. 分组用 optgroup 元素，
2. label 属性给分组一个名字
<h1>请选择你最喜欢的主播：<h1> <select name="city" id=""> <optgroup label="才艺表演"> <option value="冯提莫">冯提莫</option> <option value="朴妮唛">朴妮唛</option> <option selected value ="尹素婉">尹素婉</option> </optgroup> <optgroup label="游戏主播"> <option value="WETed">WETed</option> <option value="infi">infi</option> <option selected="selected" value ="th000">th000</option> </optgroup> </select>
multiple 属性表示多选，按住键盘的 ctrl键 可以选择几个
<h1>请选择你喜欢的主播：</h1> <select multiple name="city" id=""> <optgroup label="才艺表演"> <option value="冯提莫">冯提莫</option> <option value="朴妮唛">朴妮唛</option> <option selected value ="尹素婉">尹素婉</option> </optgroup> <optgroup label="游戏主播"> <option value="WETed">WETed</option> <option value="infi">infi</option> <option selected="selected" value ="th000">th000</option> </optgroup> </select>
三、textarea元素
这个 textarea 元素专业的说法叫做文本域，也叫做多行文本框，
有的时候要填写用户的简介，或是书籍的简介内容比较多，用单行的 input 元素不太合适，我们可能需要多行的文本框用 textarea 元素
rows 属性表示有多少行，文字能排成多少行
cols 属性表示横向上有多少个文字（按照英文个数计算）
<textarea rows="10" cols="30" name="" id=""></textarea>
不建议使用 rows、cols 来控制宽高，建议用 css 来控制
<textarea style="width:500px;height:300px;" name="" id=""> 默认显示一些内容， 这里是一个换行 </textarea>
textarea 是一个可替换元素，
是一个行块盒，
里面的默认文字是没有空白折叠的
通常不会在静态页面里面填写默认内容，通常用 placeholder 属性
<textarea style="width:500px;height:300px;" placeholder="请输入简介" name="" id=""></textarea>
四、button按钮元素
用 input 元素也可以做按钮，但更多的时候我们使用 button 元素，如果要获得最大的兼容性，肯定使用 input 的来做按钮
但是 button 是 HTML4.01 出来的，历史悠久了，现在绝大部分浏览器 99.9% 兼容，所以除非有特别要求，按钮尽量使用 button 元素
因为 button 元素就是专门来做按钮的，语义 button 就是来做按钮的
button 元素有一个 type 属性，表示按钮的类型，类型有三种
1. reset
2. 默认值是 submit
3. button
<button style="submit">按钮</button>
按钮的文本不是 value 属性值，文本是元素的内容，
元素内容就很灵活了，按钮可以写文本，也可以写其他的元素，
比如 p 元素，img 元素，甚至加一个视频都可以，可以做出更加丰富的效果。
建议 type 设置成 button，方便后和其他技术进修结合
<button type="button">按钮</button>
如果用图片按钮
input 元素
<input type="image" src="图片url">
用 button 元素
<button> <img src="图片url" alt=""> </button>
五、配合表单元素的其他元素
1. label 元素
2. datalist 数据列表
3. form 元素
4. fieldset 元素
1、label元素
label 是一个普通元素，它不是什么可替换元素，也不是表单元素（通常配合表单元素），通常配合单选和多选框来使用
label 表示标签，可以认为表示的是表单元素的标签（标签文本），可以通过 for 属性，让 label 元素关联某一个表单元素，for 属性书写表单元素的 id 值
第一种关联方式，显示关联
1. id="raFemale" 表单的 id 值
2. for="raFemale" label 元素关联表单的 id 值
请选择性别： <input type="radio" name="gender" value="female" checked id="raFemale"> <label for="raFemale">女</label> <input type="radio" name="gender" value="male" id="raMale"> <label for="raMale">男</label>
第二种方式，隐式关联
用 label 标签把表单和标签文本包起来
请选择性别： <label> <input type="radio" name="gender" value="female" checked> 女 </label> <label> <input type="radio" name="gender" value="male"> 男 </label>
2、datalist 数据列表
该元素本身不会显示到页面，通常用于和普通文本框配合使用
datalist 的默认样式表是 display: none，是不显示到页面上的，显示需要把 datalist 和普通文本框关联起来，怎么关联呢？
1. 通过 datalist 元素的 id 来关联
2. input 元素文本框，通过 list 属性来关联 id。这样在文本框输入的时候，就会提示我们
请输入常用的浏览器： <input type="text" list="userAgent"> <datalist id="userAgent"> <option value="chrome">谷歌浏览器</option> <option value="IE">IE浏览器</option> <option value="Oprea">欧朋浏览器</option> <option value="Safarf">苹果浏览器</option> <option value="FireFox">火狐浏览器</option> </datalist>
请输入常用的浏览器：
3、form 元素
form 元素非常非常重要，
作用是，通常情况下会将整个表单元素（什么文本框、下拉列表、包括按钮），整个表单元素放置到 form 元素内部，form 元素其实就是用来包含其它表单元素的
整个表单元素放置到 form 元素内部的作用？
当提交表单时（怎么提交表单？提交表单有很多很多种办法，js 里面还有一些办法来提交表单，这里只说 form 的办法）
当点击提交按钮的时候，会将 form 元素内部的表单内容，以合适的方式，提交到服务器（form 元素对开发静态页面，没有什么意义）
form 元素里面属性配置
1. action="" 表示提交给谁来处理，如果不写就是提交给当前页面
2. method="get" 表示提交方法，通常有两种 get、post
3. 然后 form 里面的表单元素，要求必须写上 name 属性，要跟服务器联动，需要把 name 属性写上
<form action="https://www.baidu.com" method="get"> <p><input type="text" name="loginId"></p> <p><input type="password" name="loginPwd"></p> <p> <select name="city"> <option value="1">成都</option> <option value="2">重庆</option> <option value="3">北京</option> <option value="4">哈尔滨</option> </select> </p> <p><button>提交</button></p> </form>
4、fieldset 元素
fieldset 相当于表单分组，把一些表单分成一个组，从逻辑上来分组，
field 表示的是字段的意思，可以认为一个表单项就是一个字段，就是一个文本框就是一个字段，set 表示集合，就是有很多个的意思，多个字段的集合就可以认为分成一个组，
fieldset 还有一个子元素 legend，可以认为是分组的标题
比如，一个 div 就是整个表单（不用form元素）
<div> <h1>修改用户信息</h1> <fieldset> <legend>账号信息</legend> <p>用户账号：<input type="text" name="loginID"></p> <p>用户密码：<input type="text" name="loginPWD"></p> </fieldset> <fieldset> <legend>基本信息</legend> <p>用户姓名：<input type="text" name="loginNAME"></p> <p>所在城市： <select name="city"> <option value="1">成都</option> <option value="2">重庆</option> <option value="3">北京</option> <option value="4">哈尔滨</option> </select> </p> </fieldset> <p> <button>提交</button> </p> </div>
可以用其他元素分组，但是 fieldset 可以从语义上的意思就是分组
六、表单状态
每一个表单项，不管是文本框、下拉列表、多行文本框、还是按钮都有一些状态
状态有两种
1. readonly
2. disabled
readonly
这种表单的状态叫只读状态，表示是否只读，这是一个布尔属性，这个表单只能读不能改动
<input type="text" value="只读状态，不能改动" readonly>
它的显示效果和正常的表单没有什么区别的，不会改变表单样式，
通常文本框里面会有这样一个状态叫 readonly，文本框可以填写用 readonly 属性，按钮那些就不管了
另外一种状态是 disabled 表示是否禁用，也是一个布尔属性，表示是否禁用，会改变表单显示样式
disabled
disabled 属性是通用的，所有的表单都可以用
<p> <input type="text" value="禁用" disabled> </p>
firsetTime 20220129