表单

 

表单

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