表单
1. 表单概述
1什么是表单
表单是一块可采集用户数据的区域
表单对后端开发者至关重要
2如何创建表单区域
用form元素表示表单
用action属性表示表单的提交地址
用method属性表示表单的提交方式
在制作静态页面时,可不用书写上述的属性
在制作静态页面时,建议不要设置form元素的样式)3表单中可放置哪些元素
对于静态页面的开发者,表单只是一个普通的块盒,内部可放置任何元素
通常情况下,表单中会放置一些可以与用户进行交互的元素
由于这些交互元素通常出现在表单中,因此,我们常称之为表单元素
4表单元素的两个重要属性
}name属性:表示发送到服务器的键名
}value属性:表示发送到服务器的值
2. 表单元素—文本框
1使用input元素表示一个文本框:input是一个空元素
2可通过type属性设置文本框类型
3. 表单元素—单选和多选框
1使用input元素表示单选和多选框
4. 表单元素—按钮
1使用input元素或button元素表示按钮
2按钮有很多种
普通按钮:点击后没有任何额外的效果
重置按钮:必须出现在表单中,点击后将其他表单元素重置为初始值
提交按钮:必须出现在表单中,点击后会将表单数据提交到服务器
图片按钮:功能同提交按钮一样,只不过样式为一张图片,该按钮已很少使用
3input和button的比较
input是空元素,button是普通元素
input是旧版本中的元素,button是HTML5中的元素
input按钮中只能写文本,button的内容更加丰富
input的兼容性更好,button稍差
5. 表单元素—下拉列表
1使用select和option元素的组合表示下拉列表
2下拉列表的类型
6. 表单元素—数据列表和多行文本框
1使用datalist元素表达数据列表
2使用textarea元素表达多行文本框
7. 表单元素的分组和状态
1使用fieldset和legend元素,对表单内容进行分组
2使用disabled属性和readonly属性,设置表单元素的可用状态
8. 美化表单元素
1伪类focus:表示聚焦时候的样式,常用于表单元素
2认识表单元素的默认样式
表单元素均默认为行盒——水平排列
表单元素均为可替换元素——可设置盒模型中各个部分的尺寸
文本框聚焦时会有outline