表单

感情迁移 提交于 2019-11-27 20:33:20

表单概述

什么是表单?

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

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

 

如何创建表单区域:

用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

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