Web前端开发与设计02-表单
2021-04-13 01:26
|
属性 |
说明 |
|
type |
指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button、email、url、number、range、search，默认为 text |
|
name |
指定表单元素的名称。 |
|
value |
元素的初始值。type 为 radio时必须指定一个值 |
|
size |
指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
|
maxlength |
type为text 或 password 时，输入的最大字符数 |
|
checked |
type为radio或checkbox时，指定按钮是否是被选中 |
文本框
密码框
单选按钮
男 女
复选框
运动 聊天 玩游戏
列表框
按钮
重置按钮： 图片按钮： 普通按钮：
多行文本域
文件域
解释：
A、type值为file即为文件域。
B、在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交，即分为文件和普通表单元素提交。
邮箱
邮箱:
注意：会自动验证Email地址格式是否正确
网址
请输入你的网址:
注意：会自动验证URL地址格式是否正确
数字
请输入数字:
注意：在提示输入的状态下，min和max分别表示允许的最大值和最小值，step表示合法的数字间隔。
滑块
请输入数字:
搜索框
请输入搜索的关键词:
文本框和数据列表
表单的高级应用
设置表单的隐藏域
表单的只读与禁用设置
只读：
禁用：
HTML5对属性值描述特点
具有boolean值的属性
1. 只写属性名称不指定属性值，表示值为true
2. 如果设置改属性值为false，表示不使用该属性
3. 若要属性值设置为true，可以将属性名设定为属性值，或将空字符串设定为属性值。
属性值引号使用
1. 可以使用单引号
2. 可以使用双引号
3. 如果只有一个属性或者一个属性值，属性值不包括空字符串、“>”、“例如：，UTF-8可以使用单引号、双引号、省略引号。
语义化的表单
语义化
- 符合W3C标准
- 语义化的标签
- 结构合理、代码简洁
对比：（语义化前后对比）：
| 姓名 | 职务 |
|---|---|
| 张三 | 技术员 |
语义化的表单标签
域标签：