表单

给你一囗甜甜゛ 提交于 2019-11-28 08:03:04

 

表单

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按钮有很多种

普通按钮:点击后没有任何额外的效果

重置按钮:必须出现在表单中,点击后将其他表单元素重置为初始值

提交按钮:必须出现在表单中,点击后会将表单数据提交到服务器

图片按钮:功能同提交按钮一样,只不过样式为一张图片,该按钮已很少使用

3inputbutton的比较

input是空元素,button是普通元素

input是旧版本中的元素,buttonHTML5中的元素

input按钮中只能写文本,button的内容更加丰富

input的兼容性更好,button稍差

5. 表单元素—下拉列表

1使用selectoption元素的组合表示下拉列表

2下拉列表的类型

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

1使用datalist元素表达数据列表

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

7. 表单元素的分组和状态

1使用fieldsetlegend元素,对表单内容进行分组

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

8. 美化表单元素

1伪类focus:表示聚焦时候的样式,常用于表单元素

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

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

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

文本框聚焦时会有outline

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!