目录
章节03 表单
一、Form表单
表单在 Web 网页中用来给访问者填写信息,从而能采集客户端信息,使网页具有交互的功能。一般是将表单设计在一个 Html 文档中,当用户填写完信息后做提交(submit)操作,于是表单的内容就从客户端的浏览器传送到服务器上,经过服务器上的 ASP 或 PHP等处理程序处理后,再将用户所需信息传送回客户端的浏览器上,这样网页就具有了交互性。
表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交按钮等,这些输入框,按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。
二、表单元素
1、表单
一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮。
- 表单标签
是指<form>标签本身,它是一个包含表单元素的区域,使用<form></form>定义
- 表单域
是<form>标签中用来收集用户输入的每一项,通常用 input 标签来定义,input标签有不同的类型,对应用户不同的数据。(比如:文本域、下拉列表、单选框、复选框等等)
- 表单按钮
<form>用来提交表单中的所有信息到服务器
表单域和表单按钮都属于表单元素
2、表单元素
- 文本框
文本域通过<input type="text">标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。
<form>
First name:<input type="text" name="firstname">
<br>
Last name:<input type="text" name="lastname">
</form>
- 密码框
密码字段通过<input type="password">来定义
- 单选按钮
<input type="radio">定义了表单单选框选项
- 复选框
<input type="checkbox">定义了复选框,用户需要从若干给定的选择中选取一个或若干个选项。
- 文件
定义文件选择字段和“浏览......”按钮,供文件上传:
- 隐藏域
- 提交按钮
- 普通按钮
- 下拉列表
- 多行文本框
- label
<form action="就.html" method="post">
<label for="male">时间</label>
<input type="radio" value="male" name="sex" id="male"/>
<br>
<label for="female">空间</label>
<input type="radio" value="female" name="sex" id="male"/>
<br>
<input type="submit" value="提交">
</form>
三、HTML5 新增 type 类型
1、email
定义用于e-mail 地址的字段(当提交表单时会自动对 email 字段的值进行验证)
email:<input type="email" name="usermail"/>
2、url
定义用于输入url的字段
添加你的主页:<input type="url" name="homepage"/>
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只能识别一个连续的空格
- < <
- > >
<p>1+1<1</p>
<p>1+1>7</p>