表单

表单概述

什么是表单?

表单是一块可采集用户数据的区域

表单对后端开发者至关重要

 

如何创建表单区域:

用form元素表示表单

用action属性表示表单的提交地址

用method属性表示表单的提交方式

在制作静态页面时，可不用书写上述的属性

在制作静态页面时，建议不要设置form元素的样式

 

表单中可放置哪些元素:

对于静态页面的开发者，表单只是一个普通的块盒，内部可放置任何元素

通常情况下，表单中会放置一些可以与用户进行交互的元素: 文本框、按钮、单选框、多选框、下拉列表。

由于这些交互元素通常出现在表单中，因此，我们常称之为表单元素

 

表单元素的两个重要属性

       name属性：表示发送到服务器的键名

       value属性：表示发送到服务器的值

 

表单元素—文本框

使用input元素表示一个文本框: input是一个空元素

可通过type属性设置文本框类型: 最常用的文本框、其他文本框

 

表单元素—单选和多选框

使用input元素表示单选和多选框

 

表单元素—按钮

使用input元素或button元素表示按钮

按钮有很多种

input和button的比较

input元素的type属性总结

 

表单元素—下拉列表

使用select和option元素的组合表示下拉列表

下拉列表的类型：普通的下拉列表、选项分组的下拉列表

 

表单元素—数据列表和多行文本框

使用datalist元素表达数据列表

使用textarea元素表达多行文本框

 

表单元素的分组和状态

使用fieldset和legend元素，对表单内容进行分组

使用disabled属性和readonly属性，设置表单元素的可用状态

 

美化表单元素

伪类focus：表示聚焦时候的样式，常用于表单元素

认识表单元素的默认样式：

         表单元素均默认为行盒——水平排列

         表单元素均为可替换元素——可设置盒模型中各个部分的尺寸

         文本框聚焦时会有outline