全部章节 >>>>

本章目录

3.1 表单

3.1.1 表单概述

3.1.1 表单概述（续）

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/> 密 &nbsp;&nbsp;&nbsp;&nbsp; 码 :

		<input type="password" name="password" /><br/>

		<input type="submit" value=" 登录 " />&nbsp;&nbsp;

		<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	在提交表单时，会自动验证值是否符合 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 ...

随机推荐

linux安装redis报错
问题:You need tcl 8.5 or newer in order to run the Redis test 解决办法: wget http://downloads.sourceforge. ...
LVS nat模型+dr模型
nat模型在 rs1 和 rs2 安装httpd 并配置测试页,启动 [root@rs1 ~]# yum install httpd -y[root@rs1 ~]# echo "thi ...
【Linux】【Services】【DNS】使用Bind搭建DNS服务
1. 简介 1.1. 实现的功能:DNS解析以及智能转发 1.2. 官方文档: 1.3. 基础概念:http://www.cnblogs.com/demonzk/p/6494968.html 2. 环 ...
【科研工具】流程图软件Visio Pro 2019 详细安装破解教程
[更新区] 安装教程我下周会在bilibili上传视频,这周事情太多暂时先不弄. [注意] 安装Visio需要和自己的Word版本一样,这里因为我的Word是学校的正版2019(所以学校为什么正版没买 ...
VSCode上发布第一篇博客
在VSCode上发布到博客园的第一篇博客前段时间在VSCode安装好插件WriteCnblog,多次检查writeCnblog configuration配置信息也是完全正确的,但是一直没能在VSC ...
通过静态分析和持续集成保证代码的质量（Helix QAC）2
续上.... 第二章部署示例:Jenkins and Helix QAC工具第一节 Jenkins 作为持续集成系统现在有很多持续集成工具,既有免费的,也有商业的.最近的研究显示,Jenkins ...
【.NET6】gRPC服务端和客户端开发案例，以及minimal API服务、gRPC服务和传统webapi服务的访问效率大对决
前言:随着.Net6的发布,Minimal API成了当下受人追捧的角儿.而这之前,程序之间通信效率的王者也许可以算得上是gRPC了.那么以下咱们先通过开发一个gRPC服务的教程,然后顺势而为,再接着 ...
OAuth2.0实战：认证、资源服务异常自定义！
大家好,我是不才陈某~ 这是<Spring Security 进阶>的第4篇文章,往期文章如下: 实战!Spring Boot Security+JWT前后端分离架构登录认证! 妹子始终没 ...
Mysql资料存储索引
Jenkins配置管理工具
安装完成后,配置管理工具安装并配置git yum -y install git 编辑git环境变量为/usr/bin/git 安装并配置maven wget https://mirrors.tuna ...

HTML网页设计基础笔记 • 【第3章 表单】

全部章节 >>>>

3.1 表单

3.1.1 表单概述

3.1.1 表单概述（续）

3.1.2 表单标签

3.1.3 表单数据的提交方式

3.2 输入框和按钮

3.2.1 表单元素概述

3.2.2 输入框

3.2.3 按钮

3.3 单选按钮、复选框和下拉框

3.3.1 单选按钮

3.3.2 复选框

3.3.3 下拉框

3.4 表单验证

3.4.1 必填验证

3.4.2 类型匹配验证

3.4.3 控制字符数量

3.4.4 验证输入范围

3.4.5 自定义错误消息

总结：

HTML网页设计基础笔记 • 【第3章 表单】的更多相关文章

随机推荐

热门专题

HTML网页设计基础笔记 • 【第3章表单】

HTML网页设计基础笔记 • 【第3章表单】的更多相关文章