第5章 表单与表单效果设计-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）

第5章 表单与表单效果设计 5.1 添加表单 5.2 表单标签 5.3 美化表单 了解表单各标签与属性 掌握<input>标签的type属性值及含义 掌握表单的基本使用 学 习 目 标 LEARNING OBJECTIVES 初心至善 匠心育人 引言 进入一个新的网站后，用户通常需要进行注册或登录验证，这就需要使用到表单。网站中的用户登录、注册页面，以及一些收集用户反馈信息的调查表，就是通过表单制作的。表单作为用户与网页之间重要的交互工具，了解和掌握表单的应用是十分重要的。 初心至善 匠心育人 5.1 添加表单 表单概述 案例—用户登录表单 <input>标签 <form>标签 目录 Contents 初心至善 匠心育人 5.1 添加表单 5.1.1 表单概述 表单是网页中常用的一种展示效果，如登录页面中的用户名和密码的输入、登录按钮等都是用表单的相关标签定义的。表单是HTML中获取用户输入的手段，它的主要功能是收集用户的信息，并将这些信息传递给后台服务器，实现用户与Web服务器的交互。 HTML中，一个完整的表单通常由表单元素、提示信息和表单域3个部分组成，下面将详细介绍这3个部分。 表单元素：包含表单的具体功能项，如文本输入框、下拉列表框、复选框、密码输入框、登录按钮等。 提示信息：表单中通常还需包含一些说明性的文字， 提示用户要进行的操作。 表单域：用来容纳表单控件和提示信息，可以通过它定义处理表单数据所用程序的URL地址，以及数据提交到服务器的方法。如果未定义表单域，表单中的数据就无法传送到后台服务器。 初心至善 匠心育人 5.1 添加表单 5.1.1 表单概述 表单元素是表单的核心，常用的表单元素如表所示。 表单元素 含义 <input> 表单输入框,可定义多种控件类型,例如text（单行文本框）、password（密码文本框）、radio（单选框）、checkbox（复选框）、button（按钮）、submit（提交按钮）、reset（重置按钮）、hidden（隐藏域）、image（图像域）、file（文件域）等 <select> 定义一个下拉列表（必须包含列表项） <textarea> 定义多行文本框 <label> 定义表单辅助项 初心至善 匠心育人 5.1 添加表单 5.1.2 <form>标签 为了实现用户与Web服务器的交互，需要让表单中的数据传送给服务器，这就必须定义表单域。定义表单域与<table>标签定义表格类似，HTML中<form>标签用于定义表单域，即创建一个表单，用来实现用户信息的收集和传递，<form></form>标签中的所有内容都会提交给服务器。 <form action="URL地址" method="数据提交方式"> 表单元素和提示信息 </form> 语法格式 <form>标签的语法格式如下。 初心至善 匠心育人 5.1 添加表单 5.1.2 <form>标签 action属性可定义表单数据的提交地址，即一个URL地址。HTML表单要想和服务器进行连接，就需要在action属性上设置一个URL。例如，两个人要打电话就必须要知道对方的电话号码，URL就相当于电话号码。action属性用于指定接收并处理表单数据的服务器的URL地址。 标签属性 1.action属性 初心至善 匠心育人 5.1 添加表单 5.1.2 <form>标签 method属性规定如何发送表单数据（表单数据发送到action属性所规定的页面）。表单数据有常用的get（默认）和post两种提交方式，表单数据可以作为URL变量（method="get"）或者HTTP post（method="post"）的方式来发送。使用get提交方式传输数据的效果如图所示。 标签属性 2.method属性 初心至善 匠心育人 5.1 添加表单 5.1.2 <form>标签 一般浏览器通过上述任何一种方法都可以传输表单信息，而有些服务器只接受其中一种方法提供的数据，可以在<form>标签的method属性中指明表单处理服务器要使用get方式还是post方式来处理数据。get方式与post方式的区别如表所示。 标签属性 2.method属性 get方式 post方式 传输方式 通过地址栏传输 通过报文传输 传送长度 参数有长度限制（受限于URL长度） 参数无长度限制 数据包 产生1个TCP数据包 产生2个TCP数据包 信息安全度 参数会直接暴露在URL中，信息安全度不高，不能用来传递敏感信息 信息安全度相对较好 两种方式都是向服务器提交数据，并从服务器获取数据 初心至善 匠心育人 5.1 添加表单 5.1.2 <form>标签 enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。en