HTML篇_第九章、HTML表单

HTML篇_第九章、HTML表单
- 一、HTML表单
- - 1.1表单的基本结构
  - 1.2表单的元素格式
- 二、文本域
- 三、密码字段
- 四、单选按钮
- 五、多选框
- 六、下拉列表框
- 七、按钮
- - 7.1submit按钮
  - 7.2reset按钮
  - 7.3button按钮
  - 7.4图片按钮
- 八、多行文本域
- 九、文件域
- 十、搜索框
- 十一、只读和禁用
- 十二、表单的初级验证
- - 12.1邮箱
  - 12.2网址
  - 12.3数字
  - 12.4 placeholder属性
  - 12.5 required属性
  - 12.6pattern属性

HTML篇_第九章、HTML表单

一、HTML表单

1.1表单的基本结构

表单是一个包含表单元素的区域，用于收集用户不同类型的输入。表单元素允许用户在表单中输入内容，比如：文本域 (textarea)、下拉列表、单选框 (radio-buttons)、复选框 (checkboxes)等等。

表单使用表单标签<form>来设置，多数情况下被用到的表单标签是输入标签（<input>），该是最重要的表单元素。而输入类型是由类型属性（type）来完成定义的，大多数经常被用到的输入类型在后文会逐个介绍。

那么表单该如何定义呢？我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表单定义</title></head><body><form method="post" action="demo1.html><p>账号：<input name="name" type="text"/></p><p>密码：<input name="pass" type="password"/></p><p><input name="Button" type="submit" value="提交"/><input name="Reset" type="reset" value="重填"/></p></form></body>
</html>

根据上述代码实例我们来讲解一下。上述代码中我们使用了<form>标签定义了一个表单，该标签内的method属性规定了表单提交数据要使用的HTTP方法，表单数据可以作为 URL 变量，使用method=“get”）或作为 HTTP post 事务（使用 method=“post”）发送，属性的值设置为post，其意义为传输的数据量不受限制，当前表单在被提交时域值（表单请求的信息，如：账号、密码）不会在地址栏显示。使用post作为提交方式是因为它能对信息进行隐藏，安全性能高，在实际开发中我们通常采用这种提交方式。除此之外，method属性的值还可以设置为get，它是默认的HTTP方法。使用这种方式提交，数据的量要小于1024字节，表单提交时表单域数值将在地址栏显示，安全性能较低。使用get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。这两种方式不同的是，使用get是从服务器上获取数据，而post则是向服务器传送数据。

再说一下action属性，在HTML中action是提交行为的意思，该属性用于规定当提交表单时向何处发送表单数据，例如上述代码则表示向demo1.html发送表单数据。

上述表单中的文本框和按钮我们在后文进行详解。

注意：
绝不要使用 “get” 方法来传输敏感信息！因为这样会使敏感信息在地址栏中可见。

1.2表单的元素格式

属性	说明
type	指定元素的类型。text、password、checkbox、radio、submit、 reset、file、hidden、image 和 button，默认为 text
name	指定表单元素的名称
value	元素的初始值。type 为 radio时必须指定一个值
size	指定表单元素的初始宽度。当 type 为 text 或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength	type为text 或 password 时，输入的最大字符数
checked	type为radio或checkbox时，指定按钮是否是被选中

二、文本域

文本域通过<input>标签来定义，type属性的值需要设置为text。当用户要在表单中键入字母、数字等内容时，就
会用到文本域。下面我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表单_文本域</title></head><body><form method="post" action="demo1.html"><p>用户名：<input type="text" name="userName" value="用户名" size="15" maxlength="30"/></p></form></body>
</html>

注意：表单本身并不可见。同时，在大多数浏览器中，文本域的缺省宽度是 20 个字符

三、密码字段

密码字段的定义与文本域的定义类似，也是通过<input>标签来定义，只不过type属性的值需要设置为password。当用户在需要键入密码时，就需要用到密码字段。密码字段不会以明文显示，而是会以星号或者圆点来代替显示。下面我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表单_密码字段</title></head><body><form method="post" action="demo1.html"><p>用户名：<input type="text" name="userName" value="用户名" size="15" maxlength="30"/>密码：<input type="password" name="pass" size="20" maxlength="30"/></p></form></body>
</html>

四、单选按钮

单选按钮也叫单选框，它定义了表单单选框选项，它的定义同样需要用到<input>标签，type属性的值需要设置为radio。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表单_单选按钮</title></head><body><form><p>姓名：<input type="text"/></p><span>性别：</span><input type="radio" name="sex" value="male" checked />男<input type="radio" name="sex" value="female"/>女</form></body>
</html>

这里需要特别关注一下，在上述代码实例中，name属性的作用是将你设置单选框按钮分为一组，实现点击一个其中一个另外一个则取消点击的功能，否则，每个点击按钮可以同时点击，这也是与复选框的区别。所以，在设置单选框时name属性是必须要存在的。而checked表示为按钮选中状态，上述代码默认选中第一个单选按钮。

五、多选框

多选框与单选框不同，用户通过点击就可以实现选中或取消，而且不限制选中的数量。复选框的定义同样需要使用<input>标签来定义，type属性的值需要设置为checkbox。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表单_复选框</title></head><body><h1>问卷调查</h1><form><p>你通常玩哪些小游戏呢？（多选）</p><input type="checkbox" name="game" value="LOL" checkbox/>英雄联盟<input type="checkbox" name="game" value="CF"/>穿越火线<input type="checkbox" name="game" value="CS"/>反恐精英<input type="checkbox" name="game" value="24h"/>永劫无间</form></body>
</html>

除此之外，我们在定义单选框或者复选框时候，还可以结合<label>标签来使用，<label>标签为input元素定义标注，用于绑定一个表单元素，当点击一个<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验，使交互更友好。

在使用<label>标签时要为<input>标签添加一个id属性，属性值要与<label>的for属性的属性值保持一致，这样才能达到预期效果。我们来尝试一下：

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML表单</title></head><body><h1>问卷调查</h1><p>请选择你喜欢的颜色：（多选）</p><form><input type="checkbox" name="color" value="red" id="color1"/><label for="color1">红色</label><input type="checkbox" name="color" value="blue" id="color2"/><label for="color2">蓝色</label><input type="checkbox" name="color" value="blue" id="color3"/><label for="color3">黄色</label></form></body>
</html>

注意：
在前端开发中使用单选框以及多选框时候，一般属性有name和value，也可以将当前的多选框和单选框输入一个表示的值。
无论是单选框还是多选框，它们的value和当前项目框的文本内容都是相同的。因为单选框和多选框的文本内容服务端是
无法获取的，真正完成操作的是name和value属性。当服务端要读取你当前点击的单选框的时候，通过name属性获取的值
其实是获取的value值，所以在开发时候，这两个属性是比不可少的。

六、下拉列表框

下拉列表框与无序列表定义标签的关系类似，它使用<select>标签来定义，而它的选项则由<option>标签来定义。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉列表：</title></head><body><form method="post" action="demo1">所在城市：<select name="籍贯"><option value="默认" selected = "selected">请选择</option><option value="北京">北京</option><option value="上海">上海</option><option value="广州">广州</option><option value="深圳">深圳</option><option value="郑州">郑州</option><option value="天津">天津</option></select></form></body>
</html>

七、按钮

7.1submit按钮

submit按钮也就是提交按钮，点击按钮跳转到form表单指定的action页面。同样使用<input>标签定义，标签内的value属性的值对应按钮上显示的文字。点击按钮会将表单中的input <input>中的name属性值（键）和用户输入的值组成键值对（或input标签value属性对应的值）一起拼接到form表单Action属性值的后面。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>submit按钮</title></head><body><form method="post" action="demo1.html"><p>用户名：<input type="text" name="userName" value="用户名"/>密码：<input type="password" name="pass" /></p><p><input type="submit" value="提交"/></p></form></body>
</html>

7.2reset按钮

reset按钮也叫重置按钮，点击重置按钮将重置表单内部的文本框，同样使用<input>标签定义，标签内的value属性的值对应按钮上显示的文字。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>reset按钮</title></head><body><form method="post" action="demo1.html"><p>用户名：<input type="text" name="userName" value="用户名"/>密码：<input type="password" name="pass" /></p><p><input type="submit" value="提交"/><input type="reset" value="重置"/></p></form></body>
</html>

7.3button按钮

button按钮也叫普通按钮，这个按钮比较有意思。它的应用相当的广泛，除了可以用来做为表单的送出之外，还可以用来做些特效来提高网页交互，一般情况下要配合JavaScript脚本来进行表单的实现。button按钮可以使用<input>变迁来定义，或者使用<button>标签来定义。在<button>标签内部可以放置内容，比如如文本和图像，这也是和<input>标签的不同之处。由于不同的浏览器对<button>元素的 type 属性使用不同的默认值。我们写一段代码来演示一下。

代码演示：（使用<input>标签）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>button按钮</title></head><body><form method="post" action=""><input type="button" name="Button" value="button按钮"/><button type="button">button按钮</button></form></body>
</html>

7.4图片按钮

图片按钮的作用和submit按钮是一样的，它需要设置src属性，如果没有找到图片也没有设置alt
属性，按钮默认显示为“提交”，如果设置了alt属性则显示该属性的值，这一点与<img>标签类似。
我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图片按钮</title></head><body><form method="post" action="demo1.html"><input type="image" src="" alt="提交"/></form></body>
</html>

八、多行文本域

多行文本域很简单，可以理解为一个能输入多行文字的大文本框。它使用<textarea>标签来定义，
用clos属性来定义文本区内显示的列数，使用rows属性来定义文本区内显示的行数。我们写一
段代码演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>多行文本域</title></head><body><form method="post" action="""><p>请写出你擅长的知识领域：</p><p><textarea name="text" cols="50" rows="10">比如：java、HTML等...</textarea></p></form></body>
</html>

九、文件域

接下来我们学习一下文件域。在HTML中，文件的上传同样使用<input>标签。当我们使用文件域file时，必须要在<form>标签中通过enctype属性来说明编码方式，只有这样，服务器才能接收到正确的信息。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>文件域</title></head><body><form action="" method="post" enctype="multipart/form-data"><p><input type="file" name="file"/><input type="submit" name="upload" value="点击上传"/></p></form></body>
</html>

十、搜索框

使用表单定义搜索框很简单，但是实际开发中需要与后端程序向对应，在这里不做赘述，直接演示代码。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>搜索框</title></head><body><form action="#" method="post"><p>请输入搜索的关键词：<input type="search" name="sousuo" /><input type="submit" value="搜索"/></p></form></body>
</html>

十一、只读和禁用

只读和禁用没有什么理解难度，就是字面意思，不过使用的时候需要用到两个属性readonly和disabled来表示只读和禁用，这两个属性没有值直接使用即可。写一段代码演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>只读和禁用</title></head><body><form action="" method="get"><P>用户名：<input name="name" type="text" value="张三" readonly></P><P>密码：<input name="pass" type="password"></P><p><input type="submit" value="修改" disabled></p></form></body>
</html>

十二、表单的初级验证

为了数据的安全性和提交性能，我们需要来对表单的内容进行验证，以此来减少垃圾数据的提交。这里我们利用表单的一些特性在前端进行一些简单的验证。

12.1邮箱

首先我们讲一下验证邮箱地址的格式是否正确。在经过前面的学习，相信大家对表单的相关内容已经基本了解，在这里我就不做赘述，直接演示代码。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>邮箱的初级验证</title></head><body><form action="#" method="post"><p>邮箱：<input type="email" name="eamil"/></p><input type="submit"/></form></body>
</html>

12.2网址

自动验证URL地址的格式是否正确。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>网址的初级验证</title></head><body><form action="#" method="post"><p>请输入你的网址：<input type="url" name="userUrl"/></p><input type="submit"/></form></body>
</html>

12.3数字

验证用户输入的内容是否为数字。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>验证数字</title></head><body><form action="" method="post"><p>请输入一个数字：<input type="number" name="num" min="0" max="100" step="10"/></p><input type="submit"/></form></body>
</html>

上述代码中，验证用户输入的内容是否为数字，这里使用了几个属性，其中min属性规定了允许的最小值，max属性规定了允许的最大值，step属性规定了合法的数字间隔。

12.4 placeholder属性

使用placeholder属性可以为input类型的文本框提供一种提示用来描述文本框期待用户输入的内容种类，这种提示语默认显示，当文本框输入内容时提示语消失。适合于input标签的text、search、url、email和password等类型。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>placeholder</title></head><body><form action="" method="post"><p>请输入搜索的关键词：<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/><input type="submit" value="搜搜"/></p></form></body>
</html>

12.5 required属性

使用required属性可规定文本框内容不能为空，否则当前表单不可提交，适合于input标签的text、search、url、email、password、number、checkbox、radio、file等类型。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="" method="post"><p>用户名：<input type="text" name="username"  required/><input type="submit" value="提交"/></p></form></body>
</html>

12.6pattern属性

使用pattern属性可规定用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单。关于正则表达式在此不做赘述，有需要的话请自行学习使用。我们写一段代码来演示一下。

代码演示：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>pattern</title></head><body><form action="" method="post"><p>电话号码：<input type="text" name="tel" pattern="^1[358]\d{9}" />请输入以13、15、18开头的11位数字 <br/><input type="submit" value="提交"/></p></form></body>
</html>

注意：
由于本章文本内容较多，代码演示的运行结果将不在文章内展示，请自行学习编写验证，谢谢。

希望有所帮助！
关注我，持续更新！

万字大章之HTML表单详解_ HTML篇_第九章