1.4-表单和表格标签
Create by fall on 13 Mar 2022
Recently revised in 03 Apr 2024
表单
表单标签：form、input、textarea、select、label
input 标签
<p>
<label for="textx">Text</label>
<input type="text" list="fruits" id="textx"/>
</p>
<datalist id="fruits">
<option>cherry</option>
<option>banana</option>
<option>mango</option>
<option>orange</option>
<option>blueberry</option>
</datalist>
标签上可选的属性
常用属性
| 参数 | 支持的类型 | 描述 |
|---|---|---|
| type | 所有 | 标签的 type 类型 |
| name | 所有 | form 的 name，提交时，是一个 name/value 对 |
| value | 所有 | 表单的值 |
| require | 大部分 | 表示内容为必填项 |
| placehodler | password, search, tel, url, text | 未输入时的占位内容 |
| autofocus | all | 页面加载后获取焦点 |
| checked | radio, checkbox | 默认选择的内容 |
| alt | image | 辅助功能，当指针指向图片时的提示文本 |
| accept | file | 限制上传的文件的类型，扩展名或者 MIME |
type 属性
| 类型 | type 属性的值 |
|---|---|
| 按钮 | button：按钮标签、reset：重制按钮、submit：提交按钮 |
| 输入 | number：数字选择、password：密码输入框、e-mail：电子邮件、url：网址输入框、search：搜索框、tel：电话输入在移动设备上，显示数字输入，text：单行文本输入 |
| 选择 | checkbox：复选框、radio：单选框 |
| 日期： | date /month /week /time：日期，月份，时间控件 |
| 颜色选择器 | color：颜色选择 |
| 选择文件 | file |
| 隐藏 | hidden 值仍会提交到服务器 |
| 图片 | image |
| 滚动条 | range |
其它属性
| 参数 | 支持的类型 | 描述 |
|---|---|---|
| capture | file | 移动端文件获取方法，打开摄像头还是文件夹 |
| dirname | text,search | |
| disabled | 所有 | 表示控件禁用 |
| form | 所有 | 将控件和一个 form 绑定在一起 |
| formaction | image, submit | 用于提交表单的url |
| formenctype | image, submit | 表单数据集的编码方式 |
| formmethod | image, submit | 用于表单提交的方法 |
| formnovalidate | image, submit | 提交表单时绕过验证 |
| formtarget | image, submit | 表单提交的浏览上下文 |
| height/width/src | image | <img> 标签的 height, width 相同 |
| list | 大部分 | 自动填充选项的 <datalist> 的 id 值 |
| max/min | number | 最大值、最小值 |
| maxlength/minlength | password, search, tel, text, url | 最大长度，最小长度 |
| multiple | email, file | 布尔值，是否允许多个值 |
| pattern | password, text, tel | 匹配有效模式的值。全字符串匹配 |
| readonly | 大部分 | 只读，值不可编辑 |
| size | email, text, password, tel | 表示控件的大小 |
| step | number | 有效的递增值 |
| autocomplete | all | 对自动完成进行高亮 |
标签的搭配
fieldset：表单内元素分组
legend：为 fieldset 元素分组
<fieldset>
<legend>这里是 legend</legend>
<input/>
</fieldset>
表单，用于让用户填写内容的表单
<datalist id="numbersxx">
<option>999</option>
<option>666</option>
<option>520</option>
</datalist>
<datalist id="fruitsxx">
<option>cherry</option>
<option>banana</option>
<option>blueberry</option>
</datalist>
<datalist id="urlsxx">
<option>https://developer.mozilla.org</option>
<option>https://mdn.github.io</option>
<option>https://www.youtube.com/user/firefoxchannel</option>
</datalist>
<p><label for="textx">Text</label> <input type="text" list="fruitsxx" id="textx"/></p>
<p><label for="rangex">Range</label> <input type="range" min="0" max="64" list="numbersxx" id="rangex"/></p>
<p><label for="numberx">Number</label> <input type="number" min="0" max="64" list="numbersxx" id="numberx"/></p>
<p><label for="urlx">URL</label> <input type="url" list="urlsxx" id="urlx"/></p>
配合 input 标签
展示可能的结果
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
textarea：多行文本框
可以通过 resize: none 更改属性使文本框不能调节大小
select 标签
下拉标签
<select name="cars">
<option name="cheap">奥拓</option>
<option name="middle">大众</option>
<option name="expensive">宾利</option>
<option name="top">保时捷</option>
</select>
下拉菜单中向 <select> 中添加 multiple='true' 可以实现多选功能
多行文本框
<textarea></textarea>
resize :none; 可以取消默认样式中的拉伸属性
表格
表格是用来展示表格的数据。
table：用于包裹表格tr：第一行数据th：加粗的单元格，可以就是单元格的头部td：一行中的数据，在tr标签内部caption：用于放置标题
注：彼此之前是有嵌套关系的，要符合嵌套规范
除此之外，还有一系列表示表格具体位置的标签：tHead、tBody、tFood
注：语义化表格标签只有 tBody 可以在一个表格内出现多次，其它两个只能出现一次
水平对齐方式：样式中设置 align ，值可以为 left,center,right，
垂直对齐方式：valign ，top,middle,bottom
扩展— table 表格标签的特殊属性：
- 添加边框单线：
border-collapse：collapse - 隐藏空单元格：
empty-cells: hide - 斜线分类 ：
border/rotate - 列分组：
colgroup/col
| 身高 | 体重 | 长相 | 偏好 |
|---|---|---|---|
| 180 | 79 | 偏好 | 打篮球，梳中分 |