HTML网页设计基础笔记 • 【第3章 表单】
全部章节 >>>>
本章目录
3.1 表单
3.1.1 表单概述
在遨游网络世界时，我们除了浏览网页信息，有时还需要将一些数据输入到网页中，经过网页提交至服务器。例如，我们登录邮箱时，需要输入用户名和密码。注册网站的用户时需要输入用户的信息，用户输入到网页中的信息均通过表单中的各表单元素来接收，然后传递给服务器。
表单在网页开发中很常见，典型的应用场景有以下几种：
网站的登录、注册。
填写订单信息。
填写调查问卷。
输入关键字搜索。
以注册页面为例，注册表单中包含了以下表单元素：
- 文本框：常用于输入姓名、用户名和电子邮件等。
- 密码框：用于输入密码，显示为代替字符，如星号“*”。
- 单选按钮：在多个选项中选择 1 个，如性别。
- 复选框：在多个选项中可以选择 1 个或多个，如爱好。
- 下拉列表：在多个下拉选项中选择 1 个，如省份、月份等。
- 按钮：通常用于执行表单信息的提交或取消等功能。
3.1.1 表单概述（续）
表单是 HTML5 的一个重要部分，主要用于采集和提交用户输入的信息。例如，登录时输入的用户名和密码就是通过表单实现数据提交，如果没有表单，输入的登录信息将无法被网站获取。
3.1.2 表单标签
在 HTML 中，<form> 和 </form> 标签对用来创建一个表单，即定义表单的开始和结束位置，在标签对之间的一切都属于表单的内容。在表单的 form 标签中，还可以设置表单的基本属性，包含表单的名称、处理程序和传送方法等。
语法：
<form name=“表单名字” action=“URL” method=“get/post”>
表单元素
</form>
name 属性用于设置表单的名称。
action 属性用于设置处理表单提交数据的 url。
method 属性用于定义浏览器将表单中的信息提交给服务器端的方式，其值可以取 get 和 post 两种，默认为get。
示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> 无标题文档 </title>
</head>
<body>
<h2> 处理登录 ........</h2>
</body>
</html>
<body>
<h2> 用户登录 </h2>
<hr/>
<form name="login" action="login_success.html">
用户名 :<input type="text" name="username" /><br/> 密 码 :
<input type="password" name="password" /><br/>
<input type="submit" value=" 登录 " />
<input type="reset" value=" 取消 " />
</form>
</body>
3.1.3 表单数据的提交方式
表单的 method 属性用来定义处理程序从表单中获得信息的方式，它决定了表单中已收集的数据是用什么方法发送到服务器的。传送方式的值有两种选择，即 get 和 post。
get 方式提交：使用 get 方式提交数据时，表单数据会附加在 URL 之后，由用户端直接发送至服务器，所以速度比 post 快，但缺点是数据长度不能太长。
post 方式提交
使用 post 时，表单数据是与 URL 分开发送的，客户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度比 get 慢。
两种提交方式在使用上的主要区别：
安全性。
- 使用 get 方式提交时，提交的信息会出现在浏览器的地址栏中，post 方式提交时不会出现在地址栏中。在对安全性有要求的情况下，不建议使用 get 方式，而应该使用 post 方式。
提交数据的长度。
- 使用 get 方式提交的数据有长度限制，使用 post 方式提交的数据没有长度限制，所以当使用表单提交的数据比较大时，如文件上传，建议使用 post 方式。
3.2 输入框和按钮
3.2.1 表单元素概述
表单中大部分表单元素均使用 input 标签，只是它们的属性设置不同，其统一用法如下：
语法：
<input name=“表单元素名称” type=“类型” value=“值” size=“显示宽度”
maxlength=“能输入的最大字符长度” checked=“是否选中”/>
input标签属性
|
属性 |
说明 |
|
type |
指 定 表 单 元 素 的 类 型， 可 用 的 选 项 有 text、password、checkbox、radio、submit、reset、file、hidden、image 和button，默认为 text |
|
name |
指定表单元素的名称 |
|
value |
指定表单元素的初始值 |
|
size |
指定表单元素的初始宽度。如果 type 为 text 或 password，则表单元素的大小以字符为单位；对于其他输入类型，宽度以像素为单位 |
|
maxlength |
指定可在 text 或 password 元素中输入的最大字符串，默认无限制 |
|
checked |
此属性只有一个值，为 checked，表示选中状态，如果不选中，则无须添加此属性 |
|
readonly |
当文本框标签的 readonly 属性指定为 readonly 时，文本框中的值不允许更改 |
HTML5 表单常用控件的标签
|
表单控件标签写法 |
说明 |
|
<input type="text"> |
单行文本输入框。使用的是 input 标签和 type 属性 |
|
<input type="submit"> |
将表单中的信息提交给表单中 action 属性所指向的地址 |
|
<input type="checkbox"> |
复选框 |
|
<input type="radio"> |
单选钮 |
|
<input type="password"> |
密码输入框（输入的文字用 * 表示） |
|
<select> |
下拉框 |
|
<textArea> |
多行文本输入框 |
3.2.2 输入框
文本框：表单中最常用的输入元素就是文本框（text），它提供给用户输入的单行文本信息，如用户名的输入。文本框的用法很简单，只需将 input 标签的 type 属性设置为 text 即可。
语法：
<input name=“表单元素名称” type=“text”id=“表单元素名称” value=“值” />
示例：
<body>
<form name="myform" action="" method="post">
姓 名 :
<input type="text" name="username" size="20" value="jack" />
<br/>
邮箱 :
<input type="text" name="username" value="xxx@xxx" />
<br/>
</form>
</body>
密码框：密码框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”。
语法：
<input type=“password” id=“userPwd” name=“userPwd”/>
示例：
<body>
<form name="myform" action="" method="post">
姓名 :<input type="text" name="username" size="20"/><br/>
密码 :<input type="password" name="pwd"/><br/>
</form>
</body>
多行文本域：多行文本域用于显示或输入两行或两行以上的文本，它使用的标签是 textarea。
语法：
<textarea name="指定名称" cols="列数" rows="行数">
文本域的内容
</textarea>
其中，cols 用于指定多行文本域的列数，rows 用于指定多行文本域的行数。在 <textarea>……<textarea> 标签中不能使用 value 属性来初始化文本域中的内容。
示例：
<body>
<form name="myform" action="" method="post">
<h4> 自我介绍 </h4>
<textarea cols="50" rows="5"> 请输入自我介绍的内容 .......</textarea>
</form>
</body>
3.2.3 按钮
重置、提交与普通按钮
根据按钮的功能，分为提交按钮、重置按钮和普通按钮。
- 提交按钮用于提交表单数据，
- 重置按钮用于清空现有表单数据，
- 普通按钮通常用于调用 JavaScript 脚本。
在用法上，为不同的按钮设置不同的 type 属性值即可；如果要禁用按钮，则使用 disabled 属性设置其取值为 disabled 即可。
语法：
<input type="submit" value="提交按钮的显示值" name="名称"/>
<input type="reset" value="重置按钮的显示值" name="名称"/>
<input type="button" value="普通按钮的显示值" name="名称"/>
示例：
<body>
<form name="myform" action=" method=""post">
姓名 :<input type="text" name="username" size="20" />
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
<input type="button" value="购买"/>
</form>
</body>
图片按钮：有时候为了达到比较好的视觉效果，可以使用图片代替按钮来提交或者重置表单数据。
语法：
<input type="image" src ="logo.gif" alt = "提交" name="imgsubmit" />
input标签的type="image"类似于type="submit"，不同的是，type="image"以一个图片作为表单的提交按钮，其中 src 属性表示图片的路径。
示例：
<body>
<form>
输入商品编号：
<input type="text" name="yourname“/><br><br>
<input type="image" src="buy.gif" alt=" 提交 " name="imagesubmit“ />
</form>
</body>
3.3 单选按钮、复选框和下拉框
3.3.1 单选按钮
用于一组相互排斥的选项，组中的每个选项应具有相同的名称（name），以确保用户只能选择一个选项，单选按钮对应的 type 属性为 radio。
语法：
<input type ="radio" name="名称" value ="" checked=" checked "/>
用 checked 属性表示缺省已选的选项：<input type=“radio” name=“fruit” value = “Orange” checked> 桔子。桔子选项将默认为选中状态。
示例：
<body>
请选择你喜欢的水果：<br>
<form>
<input type="radio" name="fruit" value="Apple“ /> 苹果 <br>
<input type="radio" name="fruit" value="Orange“ /> 桔子 <br>
<input type="radio" name="fruit" value="Mango“ /> 芒果 <br>
<input type="submit" value=" 提交 ">
</form>
</body>
3.3.2 复选框
复选框用于选择多个选项，将 input 的 type 属性设置为 checkbox 就可以创建一个复选框。
语法：
<input type ="checkbox" name="名称" checked=" checked "/>
用 checked 属性表示缺省已选的选项，写法是：
<input type="checkbox" name="fruit" value ="orange" checked>桔子。桔子选项将默认为选中状态。
示例：
<body>
请选择你喜欢的水果：<br>
<form>
<input type="checkbox" name="fruit" value="apple“ /> 苹果 <br>
<input type="checkbox" name="fruit" value="orange"> 桔子 <br>
<input type="checkbox" name="fruit" value="mango"> 芒果 <br>
<input type="submit" value=" 提交 ">
</form>
</body>
3.3.3 下拉框
下拉框主要可以使用户快速、方便、正确地选择一些选项，而且还能节省页面空间。它是通过 select 和 option标签来实现的,其中，在有多种选项可供用户滚动查看时，size 属性确定列表中可同时看到的行数；selected 属性表示该选项在默认情况下是被选中的。
语法：
<select name="指定列表的名称“ size="行数">
<option value="可选择的值" selected="selected"> 显示项的内容 </option>
<option value="可选择的值"> 显示项的内容 </option>
……
</select>
如果将下拉框变成多选，则添加 muiltiple 属性即可。
示例：
<body>
<form name="myform" action="" method="post">
生日 :
<input type="text" name="year" maxlength="4" /> 年
<select name="birth">
<option value="-1"> 选择月份 </option>
<option value="1"> 一月 </option>
<option value="2"> 二月 </option>
......
</select>
<input type="text" name="year" maxlength="2" /> 日 <br/> 省份 :
<select name="province">
<option value="0"> 选择省份 </option>
<option value="1" selected="selected"> 湖北 </option>
......
</select>
</form>
</body>
3.4 表单验证
表单在提交之前应该执行输入验证，以检查用户输入内容是否符合要求。如验证用户是否输入、比较两次输入的内容是否相同、输入内容的长度是否过长等。表单只能在输入符合要求的情况下才能提交。
在 HTML5 中，通过对标签使用验证属性，可以实现在表单提交时执行自动验证的功能，并提示用户输入了错误的信息。
3.4.1 必填验证
required 属性可应用于大多数 input 标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示信息提示文字，提示用户该元素中必须输入内容。
语法：
<input type=“text” name=“usr_name” required=“required” />
示例：
<body>
<form>
输入查询内容：<input type="text" required>
<input type="submit" value=" 提交 ">
</form>
</body>
3.4.2 类型匹配验证
在 HTML5 中，增加了 input 标签的 type 属性值，可以使用这些 type 属性值实现基本的类型匹配功能。
|
type 属性 |
说明 |
|
|
在提交表单时，会自动验证值是否符合 e-mail 格式要求 |
|
url |
在提交表单时，会自动验证值是否符合 url 格式要求 |
|
number |
在提交表单时，会自动验证值是否为数字，并可以配合 min、max 以及 step 属性进行数值的限定 |
|
range |
在提交表单时，会自动验证值是否在指定的范围内的数字，使用配合 min、max 以及 step 属性进行数值的限定，显示为滑动条 |
|
date |
用于选取年、月、日 |
示例：
<body>
<form>
Email：<input type="email"><br><br> Date:
<input type="date"><br><br>
<input type="submit">
</form>
</body>
3.4.3 控制字符数量
在控制字符数量方面，我们可以使用 maxlength 属性设置输入字符的最大数量，以防止用户输入大量无效内容。
示例：
<body>
<form>
用户：<input type="text" maxlength="5“ />
<input type="submit">
</form>
</body>
3.4.4 验证输入范围
min、max 属性是数值类型或日期类型的 input 标签的专用属性，它们限制了在 input 标签中输入的数值与日期的范围。
示例：
<form>
Number：<input type="number" name="count" min="0" max="100" stop=”10”/>
<br/>
<input type="submit"/>
</form>
step属性控制input标签中的值增加或减少时的步长。本例中，输入的值不仅在0与100之间，还必须是10的倍数，因为step为10。
3.4.5 自定义错误消息
HTML5 表单验证给前端开发带来许多便利，但是默认的提示不友好。我们可以通过 setCustomValidity 方法来自定义提示信息，更准确的提示给用户。
当用户输入信息时，使用 setCustomValidity(“”) 将错误提示设置为空字符串，当用户输入不合法时，使用setCustomValidity(“自定义提示信息”) 来替换提示信息即可。
示例：
<body>
<form>
年龄：
<input type="number" max="60" min="0"
oninvalid="setCustomValidity(' 年龄必须在 0 至 60 之间！ ')"
oninput="setCustomValidity('')"
required>
<input type="submit" />
</form>
</body>
总结：
- 表单是 HTML5 的一个重要部分，主要用于采集和提交用户输入的信息。
- 表单数据提交的有两种方式：get 方式和 post 方式。
- 表单中大部分表单元素均使用 input 标签，只是它们的属性设置不同，其用法统一
- 文本输入控件包括文本框、密码框以及多行文本域。
- 选择型控件包括复选框、单选钮、下拉框和数据列表。
- 按钮型控件包括提交按钮、图片按钮。
- 在 HTML5 中，通过对标签使用验证属性，可以实现在表单提交时执行自动验证的功能，并提示用户输入了错误的信息。
HTML网页设计基础笔记 • 【第3章 表单】的更多相关文章
- Vue.js 学习笔记 第6章 表单与v-model
本篇目录: 6.1 基本用法 6.2 绑定值 6.3 修饰符 表单类控件承载了一个网页数据的录入与交互,本章将介绍如何使用指令v-model完成表单的数据双向绑定. 6.1 基本用法 表单控件在实际业 ...
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- JavaScript高级程序设计第14章表单脚本 （学习笔记）
第十四章 表单脚本 1.阻止默认表单提交 1.提交表单数据 1.使用type=submit提交按钮 2.使用submit():方法 注意:当用户点击提交按钮时,会触发submit事件,从而在这里我们有 ...
- Django学习笔记（五）—— 表单
疯狂的暑假学习之 Django学习笔记(五)-- 表单 參考:<The Django Book> 第7章 1. HttpRequest对象的信息 request.path ...
- ASP.NET MVC5 高级编程 第5章 表单和HTML辅助方法
参考资料<ASP.NET MVC5 高级编程>第5版 第5章 表单和HTML辅助方法 5.1 表单的使用 5.1.1 action 和 method 特性 默认情况下,表单发送的是 HTT ...
- HTML网页设计基础笔记 • 【第7章 盒子模型】
全部章节 >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...
- JQuery制作网页——第九章 表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
- JavaScript高级程序设计学习笔记第十四章--表单
1.在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是 HTMLFormElement 类型. HTMLFormElement 继承了 HT ...
- HTML+CSS笔记 表格,超链接,图片,表单
表格 给表格加入CSS样式,添加表格边框 语法: <style type="text/css"> table tr td,th{border:1px solid #00 ...
随机推荐
- STM32代码常见的坑
1 混淆换行符\和除号/造成的坑 入坑代码: GPIO_InitStructure.GPIO_Pin = GPIO_Pin_0 | GPIO_Pin_1 | GPIO_Pin_2 | GPIO_Pin ...
- 【Netty】最透彻的Netty原理架构解析
这可能是目前最透彻的Netty原理架构解析 本文基于 Netty 4.1 展开介绍相关理论模型,使用场景,基本组件.整体架构,知其然且知其所以然,希望给大家在实际开发实践.学习开源项目方面提供参考. ...
- gitlab之数据备份恢复
备份#备份的时候,先通知相关人员服务要听 ,停止两个服务,并影响访问 root@ubuntu:/opt/web1# gitlab-ctl stop unicorn ok: down: unicorn: ...
- 【简】题解 AWSL090429 【价值】
先考虑当要选的物品一定时 显然有个贪心 wi越小的要越先选 所以先按wi从小到大拍序 因为发现正着递推要记录的状态很多 并且wi的贡献与后面选了几个物品有关 考虑正难则反 倒着递推 提前计算wi的贡献 ...
- 【Vulfocus解题系列】手把手教你使用Vulfocus公开靶场对Apache Log4j2远程命令执行漏洞复现
前言 关于这个漏洞,啥都不用说了,直接发车. 工具下载 JNDIExploit:https://github.com/0x727/JNDIExploit 复现过程 启动靶场环境 直接用vulfocus ...
- Python循环控制
一.比较符 和算术操作符一样,布尔操作符也有操作顺序.在所有算术和比较操作符求值后,Python 先求值 not 操作符,然后是 and 操作符,然后是 or 操作符. 二.if控制 if name ...
- Git忽略提交规则 .gitignore文件
在使用Git的过程中,我们喜欢有的文件比如日志,临时文件,编译的中间文件等不要提交到代码仓库,这时就要设置相应的忽略规则,来忽略这些文件的提交.简单来说一个场景:在你使用git add .的时候,遇到 ...
- MySQL 面试题汇总（持续更新中）
COUNT COUNT(*) 和 COUNT(1) 根据 MySQL 官方文档的描述: InnoDB handles SELECT COUNT(*) and SELECT COUNT(1) opera ...
- Table.RowCount行列计数…Count（Power Query 之 M 语言）
数据源: 任意五行两列 目标: 计算行数(包括空行) 操作过程: [转换]>[对行进行计数] M公式: = Table.RowCount( 表 ) 扩展: 对表中列进行计数:= Table.C ...
- Java应用日志如何与Jaeger的trace关联
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...