表单属性、标签
总结
一、 表单概述
- 1. 什么是表单:表单是一块可采集用户数据的区域:表单对后端开发者至关重要
- 2. 如何创建表单区域:
a) 用form元素表示表单
b) 用action属性表示表单的提交地址
c) 用method属性表示表单的提交方式
d) 在制作静态页面时,可不用书写上述的属性
e) 在制作静态页面时,建议不要设置form元素的样式
- 3. 表单中可放置哪些元素
a) 对于静态页面的开发者,表单只是一个普通的块盒,内部可放置任何元素
b) 通常情况下,表单中会放置一些可以与用户进行交互的元素
文本框 <input type=”text”>
点击按钮 <input type=”buttont” value=”点击”>
提交按钮 <input type=”submit” >
复选框 <input type=”checkbox” name =”” value=””>
单选框 <input type=”radio” name =”” value=””>
文件上传 <input type=”file”>
密码 <input type=”password”>
重置按钮 <input type=”reset”>
隐藏 <input type=”hidden” name =”” value=””>
数字框 <input type=”number” min =”” max=”” step=””>
滑块数字 <input type=”range” >
日期框 <input type=”date” >
年月框 <input type=”month” >
一年中的第几周 <input type=”week” >
时间 <input type=”time” >
下拉列表:<input type=“text”id=“”list=“a”>
<datalist id=”a”>
<option value=””></option>
<option value=””></option>
</datalist>
<select name=”” id =””>
<option value=””></option>
<option value=””></option>
</select>
分组 <opegroup></opegroup>
多行文本
<textarea name=”” id=”” rows=”” cols=””></trxearea>
分组信息
<fielaset>
<legend></legend>
<legend></legend>
</fielaset>
属性:name:发送到服务器的键名 value:发送到服务器的值
Maxlength:长度 required:要求必须填
Pattem:填写规则 disabled:禁用
Placeholder:提示 readonly:只读
Autocomplete:自动识别 selected:选择
Size:展示个数 <label></label>关联
由于这些交互元素通常出现在表单中,因此,我们常称之为表单元素
- 4. 表单元素的两个重要属性
name属性:表示发送到服务器的键名
value属性:表示发送到服务器的值
二、 表单元素—文本框
使用input元素表示一个文本框:input是一个空元素
可通过type属性设置文本框类型
三、 表单元素—按钮
1) 使用input元素或button元素表示按钮
2) 按钮有很多种
a) 普通按钮:点击后没有任何额外的效果
b) 重置按钮:必须出现在表单中,点击后将其他表单元素重置为初始值
c) 提交按钮:必须出现在表单中,点击后会将表单数据提交到服务器
d) 图片按钮:功能同提交按钮一样,只不过样式为一张图片,该按钮已很少使用
3) input和button的比较
a) input是空元素,button是普通元素
b) input是旧版本中的元素,button是HTML5中的元素
c) input按钮中只能写文本,button的内容更加丰富
d) input的兼容性更好,button稍差
四、 表单元素—下拉列表
使用select和option元素的组合表示下拉列表
下拉列表的类型:普通的下拉列表
选项分组的下拉列表
五、 表单元素—数据列表和多行文本框
使用datalist元素表达数据列表
使用textarea元素表达多行文本框
<textarea name=”” id=”” rows=”” cols=””></trxearea>
六、 表单元素的分组和状态
使用fieldset和legend元素,对表单内容进行分组
使用disabled属性和readonly属性,设置表单元素的可用状态
七、 美化表单元素
1、 伪类focus:表示聚焦时候的样式,常用于表单元素
2、 认识表单元素的默认样式
表单元素均默认为行盒——水平排列
表单元素均为可替换元素——可设置盒模型中各个部分的尺寸
文本框聚焦时会有outline