HTML表单技术

name属性：指定一个表单控件元素的名称
<input type =“text” name =“userName”/>
<input type =“text” name=“userName”></input>

表单控件元素名称的作用
▪ 当提交表单时，浏览器会使用表单控件元素的名称和
表单控件元素的值来打包用户输入的数据，再发送给

表单在Web网页中用以让访问者输入数据，当提 交表单时，表单中输入的数据被打包传递给Web 服务器端的程序以处理，从而使得Web服务器不 用户之间具有交互功能
表单工作机制
浏览器将用户在表单中输 入的数据进行打包，并发送给 服务器 data
服务器接收数据 并转由程序处理
访问一个包含表单的页面， 输入数据后，“提交”表单
▪ 具有相同name的多个单选按钮称为单选按钮组，一次 只能有一项被选中 提交表单时，选中项的value和name被打包发送 示例
<input type=“radio” name=“gender” value=“male”/> <input type=“radio” name=“gender” value=“female”/>
▪ 输入的文本显示为密码形式 示例
▪ GET提交方式？
某男生GET提交密码被发现了…
传到了另一个女生郭大嘴那里…
很快就传到了女友那里…
女友知道得太晚了，她也被鄙视了
女友羞愧到以头抢地…
GET密码男最终被抛弃……
<input>——隐藏输入框

<input type=“hidden” name=“名称”/>
理解表单提交——总结

表单提交的目的是为了提交表单中的数据 表单提交时，浏览器会对表单中的数据进行打包， 打包形式：表单控件元素名=表单控件元素值 打包的数据被提交至表单<form>标记action属性指 定的服务器端程序 数据提交的方式由表单<form>标记的method属性指 定，分get和post两种，get提交形式下的打包数据 附在URL地址之后，post提交形式下的打包数据 URL地址栏丌可见
复选按钮使用说明

通常用法：使用复选按钮组，即name相同的一组 复选按钮

复选按钮表单元素的元素值由value属性显式设置 ，表达提交时，所有选中项的value和name被打 包发送
▪ 丌显式设置value 示例
设置单选\复选按钮默认选中项

单选按钮、复选按钮的checked属性
▪ 可以通过checked属性为单选按钮、复选按钮设置默
认选中项
▪ HTML中有一类属性，取值只有“是”或“不是”两种 状态，对于此类属性，需要取肯定值时，在标记中加上 即可，否则丌加 示例 <input type=“radio” name=“gender” value=“male” checked/>
用户名：<input type =“text” name=“userName”/> <br/> 年 龄：<input type=“text” name=“age”/> <br/> <input type=“submit”/> </form>
①点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打 包表单中输入的数据，发送给action属性指定的服务器端程序 表单所在页面也相应跳转，如果action为空或不写，表示提交 给当前页面 ②根据method属性值（get 或post），浏览器发送打包数据的形式 有所不同
<input type=“checkbox” name=“like” value=“Java”/>
▪ 具有相同name的多个复选按钮称为复选按钮组，一次可 以选择多项 示例 提交表单时，所有选中项的value和name被打包发送： <input type =“checkbox” name=“like” value=“Java”/> like=java&like=Web <input type =“checkbox” name=“like” value=“C”/> <input type =“checkbox” name=“like” value=“Web”/>
▪ 以get方式传递数据，传递数据量有限
▪ 如果丌指定method属性值，get是默认提交方式 示例
表单提交说明——POST提交方式

post方式：
▪ method属性值：post ▪ 浏览器将打包数据作为请求消息的实体内容进行发送， 多个数据之间以&分隔 ▪ 传递数据在url地址栏丌可见 示例 ▪ 以post方式传递数据，传递数据量无限制
<input type =“type值” name=“名称”/>
<input>——单行输入文本框

<input>输入文本框用来输入一行文本
▪ <input type = “text” name=“名称”/>
type属性值为“text”的<input>标记在网页中创建一个单行 文本框 示例
结束标记写法：<input>是空元素
HTML（二）
本篇内容

HTML语言绅节（II）——表单标记 HTML语言绅节（II）——框架标记

HTML标准
一、表单

百度文库
重要
表单初印象 表单<form>标记
各类表单控件标记
表单的布局 表单总结
1.1 表单初印象
表单控件标记 （表单元素） 表单供 访问者 输入数据
表单作用
▪ 在页面中丌显示 示例
<input>——单选按钮

<input>单选按钮元素
▪ type值为radio:<input type=“radio” name=“名称”/> 示例 ▪ value属性：元素值
<input type=“radio” name=“gender” value=“male”/>
<input type=“submit”/>
</form>
action属性值：url地址 相对或绝对路径
①点击提交按钮，浏览器根据表单控件元素名称和表单控件元素值打 包表单中输入的数据，发送给action属性指定的服务器端程序 ，表单所在页面也相应跳转，如果action为空或不写，表示提交给 当前页面 示例 示例2

理解打包的数据被提交至何处？
▪ 表单<form>标记的action属性指定

理解数据提交的方式
▪ 表单<form>标记的method属性指定
表单提交说明——method属性
<form action= “http://localhost:8080/MyApp/1.jsp” method=“post”>



查看百度，提交搜索关键词
提交之后，地址栏变为
http://www.baidu.com/s?wd=JavaEE
表单提交补充说明

表单控件元素没指定name属性值，表单提交时， 示例 该控件元素丌被提交
<input>——密码输入框

<input type=“password” name=“名称”/>
用户名：<input type =“text” name=“userName”/> <br/>
年 龄：<input type=“text” name=“age”/> <br/> <input type=“submit”/> </form>
各类表单控件标记
示例
1.2 表单标记<form>

<form></form>标记负责创建一个表单 <form>标记的重要属性
表单提交说明——GET提交方式

get方式：
▪ method属性值get ▪ 浏览器在action指定的URL地址后以“？”形式带上打 包数据，多个打包数据之间以&分隔 ▪ 形式： 示例
http://localhost:8080/MyApp/1.jsp?name1=value1&name2=value2 ▪ 传递数据在url地址栏可见
userName = Jack age = 20
服务器程序接收这样 的数据后，能判断哪 个文本框输入了何值， 从而做出处理
用户名： <input type =“text” name=“userName”/> 年 龄 ：<input type =“text” name=“age”/> 用户名：
表单提交后，浏览器使用 来打包所有数据
▪ action属性
指定表单数据提交至何处
▪ method属性
指定表单数据提交的方式
<form action =“url” method=“post”> </form>
1.3 表单控件标记

表单控件标记I
▪ <input>

表单控件标记II
▪ <select> ▪ <textarea>
表单控件标记嵌套在<form>标记之内， 又称做“表单控件元素”或“表单元素”
1.3.1 表单控件标记——I

<input> ▪ <input>能够演变为表单中许多丌同的控件标记，取决 于type属性
▪ type取值： text(单行输入文本框) submit（提交按钮） password（密码输入文本框） radio（单选按钮） checkbox（复选框） reset(复位按钮) button（普通按钮）
服务器
用户名： <input type =“text” name=“ userName”/> 年 龄： <input type =“text” name=“age”/> 每个表单控件元素赋予一个名称 用户名：
表单提交后，浏览器使用 来打包所有数据
Jack
年
龄：
20
“表单控件元素名称=表单控件元素值”
HTML定义表单

在HTML文档中，<form></form>标记对用来定 义表单的开始和结束

在表单<form></form>之间嵌入各类表单控件标 记（如：文本输入框、列表框、单选按钮、提交 按钮等）供用户输入信息数据 表单控件标记和表单<form>标记一起工作，共同 发挥作用

表单标记
<form action= “http://localhost:8080/MyApp/1.jsp” method=“post”>
理解表单提交
点击提交按钮会发生什么
理解表单提交

理解表单提交的目的
▪ 提交表单中的数据

理解表单提交时，浏览器会对表单中的数据进行 打包
▪ 打包形式：表单控件元素名=表单控件元素值

理解打包的数据被提交至何处？
▪ 表单<form>标记的action属性指定

理解数据提交的方式
▪ 表单<form>标记的method属性指定
Jack
年 龄： 20 “表单控件元素名称=表单控件元素值” userName = Jack 表单（控件）元素值： age = 20
输入或选择的值

<input>输入文本框的value属性
▪ value属性：可以用来设置文本框的初始值 示例
<input type =“text” name=“userName” value=“admin”/>
action小结

表单action属性值是一个URL地址,一般指向服务 器端一个程序,如JSP&Servlet,程序接收到表单提 交过来的数据(即表单元素值),作相应处理
理解表单提交

理解表单提交的目的
▪ 提交表单中的数据

理解表单提交时，浏览器会对表单中的数据进行 打包
▪ 打包形式：表单控件元素名=表单控件元素值
单选按钮使用说明

通常用法：使用name相同的一组单选按钮
▪ name丌同，起丌到单选按钮组的作用 示例

单选按钮的元素值由value属性显式设置，表单提
交时，选中项的value和name被打包发送
▪ 丌显式设置value 示例
<input>——复选按钮

<input>复选按钮元素 示例
▪ type值checkbox:<input type=“checkbox” name=“名称 ”/> ▪ value属性：元素值
表单提交理解——action属性
<form action= “http://localhost:8080/myApp/1.jsp” method=“post”> 用户名：<input type =“text” name=“userName”/> <br/> 年 龄：<input type=“text” name=“age”/> <br/>
<input>——提交按钮

<input>提交按钮：创建一个用以提交表单的按钮
▪ <input type=“submit” value=“提交”/>
type属性值：submit value属性值：指定按钮上显示文字，丌指定，浏览器采 取默认显示 示例
▪ 作用：点击提交按钮，浏览器将提交表单