第三章 表单

第三章 表单

一，表单的作用

• 使用表单的目的是为了收集用户信息。
• 在网页中，如果我们需要跟用户交互，收集用户资料，此时就需要表单。

二，表单的用法

<form  method="post" action="result.html">
    <!--中间加表单元素-->
</form>

• method: 规定如何发送表单数据,常用值：get | post
• action :表示向何处发送表单数据。

三，表单元素形式

1.通用形式

​ 1.表单都是多个标签配合使用，<form> <input type="类型1" value="类型1" /> <input type="类型2" value="类型2" /> ... </form>例如：<input type="text" name="fname" value="text"/>

2.属性说明

1> input 标签

​ input标签type属性有很多值type的类型如下：

• text ：文本框 输入文本原样展示。
• password：密码框 输入文本会变成小黑点。
• radio：单选框 适用于只能单选的信息，例如：统计居民信息中的男女，我们只能选择一个，(checked默认选中 要求name属性值一致) 。
• checkbox：多选框 适用于可以多选的信息。例如：学生的兴趣爱好，打游戏，户外活动，篮球等，(checked默认选中 要求name属性值一致) ；
• submit：呈现出一个按钮，点击按钮可以提交表单，按钮上的文字通过value赋值。
• reset：呈现出一个按钮，点击按钮可以重置表单，按钮上的文字通过value赋值。
• button：呈现出一个按钮，点击按钮没有任何作用，通常配合js完成自定义点击事件，按钮上的文字通过value赋值。
• file： 文件域，通常配合java使用，完成文件的上传下载，（必须在form上添加enctype=“multipart/form-data”）。
• hidden： 隐藏域，使用此标签，在页面中不显示任何东西，一般用于隐藏信息的唯一标识（id）。
• image： 图片，点击图片提交表单，携带点击图片的位置信息（x,y）src为：引用图片路径。
• email: 邮箱，提交表单时会验证文本框里是否符合邮箱格式。
• url：网址，提交表单时会验证文本框里是否符合网址格式。
• tel：手机号，提交表单时会验证文本框里是否符合手机号格式。
• number：数字选择，（min最小值 max最大值 step步长）。
• range：滑块，（min最小值 max最大值 step步长）。
• search：搜索框，输入文本会出现全删功能的X形按钮。

​ 单标签input其他属性：

• readonly：只读文本框。
• disable：禁用。

2>textarea标签

​ textarea标签可以生成一个文本域。拖拽右下角可以变换长宽。

• 属性：
  • rows：文本域默认宽度。
  • cols：文本域默认长度。

3> select标签

​ select和字标签option标签配合使用，页面显示为下拉框，下拉框的内容写在option双标签中间。例如：

					<select>
						<option value="1" selected>请选择身份</option>
						<option value="2">医生</option>
						<option value="3">老师</option>
					</select>

• 属性:
  • value :提交表单携带的值。
  • name：名字标识。
  • selected：默认选中。

4.表单元素的标注

1> 表单元素标注的目的

• 增强鼠标的可用性
• 自动将焦点转移到与该标注相关的表单元素上

​ 我们所遇到的表单，一般都可以通过点击描述文字，就可以选中元素，而并不用点击元素，例如：

​ 我们只需要点击男，就可以让小圆点变蓝，而不是只能点击小圆点才能变色。

2> 使用方式

<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>

​ 我们通过给input设置id属性，再用label的for属性绑定id，就可以实现点击label中的文本就等于点击input的愿望。

5.表单验证

为什么要表单验证：

• 减轻服务器的压力
• 保证数据的可行性和安全性

​ 1.表单初级验证的方法

​ 实现表单初级验证，HTML为用户准备了一些属性:placeholder,required,pattern等；下面就简单的说一下这三个属性。

placeholder:

• input类型的文本框提供一种提示
• 可以描述文本框期待用户输入何种内容
• 提示语默认显示，当文本框中输入内容时提示语消失
• 适合于input标签：text、search、url、email和password等类型

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>

required:

• 规定文本框填写内容不能为空，否则不允许用户提交表单
• 适合于input标签：text、search、url、email、password、number、checkbox、radio、file等类型

<input type="text" name="username"  required/>

pattern:

• 用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<input type="text" name="tel"  required pattern="^1[358]\d{9}" />

​ pattern的值是正则表达式，由于内容较多，之后会写单独的笔记。

6.总结