Web前端笔记——表单

目录

章节03 表单

一、Form表单

二、表单元素

1、表单

2、表单元素

三、HTML5 新增 type 类型

1、email

2、url

3、search

 4、tel

5、color

6、number

7、range

8、date 

9、month 

 10、year

四、HTML5 新增属性

1、autofocus属性

2、multiple属性

3、placeholder属性

 4、required属性

五、实体字符

---

章节03 表单

一、Form表单

表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网页具有交互的功能。一般是将表单设计在一个 Html 文档中，当用户填写完信息后做提交(submit)操作，于是表单的内容就从客户端的浏览器传送到服务器上，经过服务器上的 ASP 或 PHP等处理程序处理后，再将用户所需信息传送回客户端的浏览器上，这样网页就具有了交互性。

 

表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等，这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。

 

 

二、表单元素

1、表单

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。

• 表单标签

         是指

标签本身，它是一个包含表单元素的区域，使用

定义

• 表单域

        是

标签中用来收集用户输入的每一项，通常用 input 标签来定义，input标签有不同的类型，对应用户不同的数据。（比如：文本域、下拉列表、单选框、复选框等等）

• 表单按钮

         用来提交表单中的所有信息到服务器

        表单域和表单按钮都属于表单元素

2、表单元素

• 文本框

        文本域通过标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

First name:


Last name:

•  密码框

        密码字段通过来定义

• 单选按钮 

        定义了表单单选框选项

•  复选框

         定义了复选框，用户需要从若干给定的选择中选取一个或若干个选项。

•  文件

         定义文件选择字段和“浏览......”按钮，供文件上传：

 

•  隐藏域  

• 提交按钮 

• 普通按钮

 

•  下拉列表

 

 

• 多行文本框

•  label

 

	时间
	
	

	空间
	
	

	

三、HTML5 新增 type 类型

1、email

        定义用于e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）

email：

2、url

        定义用于输入url的字段

  添加你的主页：

3、search

        定义搜索字段（比如站内搜索或谷歌搜索等）：

 

 4、tel

        定义用于输入电话号码的字段：

5、color

        从拾色器中选取颜色：

6、number

        定义用于输入数字的字段（您可以设置可接受数字的限制）： 

 

7、range

        定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制：

8、date 

9、month 

 10、year

 

四、HTML5 新增属性

1、autofocus属性

2、multiple属性

3、placeholder属性

 4、required属性

 

  

五、实体字符

        当页面不能识别一些特殊符号时，可以用实体字符来代替。

        比如：

• 空格      HTML只能识别一个连续的空格
• <         <
• >         >

1+1<1
1+1>7