表单
一、 表单的基本应用
(一) 表单典型的应用场景
1. 登录、注册
2. 网上订单
3. 调查问卷
4. 网上搜索
(二) 表单标签及表单属性
1. 表单标签
在HTML中，使用<form>标签来实现表单的创建，该标签用于在网页中创建表单区域，属于一个容器标签，其他表单标签需要在它的范围中才有效。
2. 表单的属性
action
此属性指示服务器上处理表彰输出的程序。一般来说，当用户单击表单上的“提交”按钮后，信息发送到Web服务器上，由action属性所指定的程序处理。
语法：action=”URL”
如果action的属性为空，则默认表单提交到本页。
method
此属性告诉浏览器如何将数据发送给服务器，它指定服务器发送数据的方法（post还是get）.
如果是get，浏览器创建一个请求，该请求包含页面URL、一个问号和表单的值。浏览器会将该请求返回给URL指定的脚本，以进行处理。
如果是post，表单上的数据会作为一个数据块发送到脚本，而不使用请求字符串。
语法：method=get|post.
3. 案例演示：简单的表单提交
效果
[图片上传失败...(image-eff024-1552720169013)]
核心代码
<FORM name="form1" method="get" action="result.html">
<P>名字：
<INPUT name="name" type="text" class="input" id="fname">
</P>
<P>密码：
<INPUT name="pass" type="password" class="input" id="pass">
</P>
<P>
<INPUT type="submit" name="Button" value="提交">
<INPUT type="reset" name="Reset" value="重填">
</P>
</FORM>
4. get|post提交方式的总结
post提交不会改变地址栏状态，表单数据不会被显示
get提交，地址栏状态会发生变化，表单数据会在URL中显示
所以POST比GET安全。
(三) 表单元素及其格式
1. 表单元素
在表单中添加表单元素，使用<input>标签
语法
<input type="text" name="fname" value="text">
属性说明
[图片上传失败...(image-fda1ff-1552720169013)]
|
属性
|
说明
|
|
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时，指定按钮是否是被选中
|
2. 文本框
描述
用于输入单行文本信息，如用户名输入框等。
语法
<input type="text" name="userName" value="用户名" size="30" maxlength="20" >
属性说明
[图片上传失败...(image-31ee89-1552720169012)]
size与maxlength的区别，当没有设置maxlength时向文本框中输入内容没有限制，当设置maxlength时再向文本框中输入值将会有字符数的限制。上面代码显示，文本显示长度为30，允许输入的最多字符数为20.
即size是指文本框的长度，maxlength是指输入的数据长度。
案例演示
[图片上传失败...(image-eb1634-1552720169012)]
<form method="post" action="">
<P>名 字：
<input type="text" value="" name="fname">
</P>
<P>姓 氏：
<input type="text" name="lname" value="张" > </P>
<P>登录名：
<input type="text" name="sname" size="30" maxlength="20">
</P>
</form>
3. 密码框
描述
用户希望输入的数据被处理，以名被他人利用，如密码。
语法
<input type="password " name="pass" size="20" >
属性说明
[图片上传失败...(image-25d370-1552720169012)]
type取值为password时为密码框，name属性是必须的，其他属性并不是必须的，实际开发中通常不设置value初始值
案例演示：密码
[图片上传失败...(image-e91b4d-1552720169012)]
<form method="post" action="">
<P>用户名：<input name="name" type="text" size="21"> </P>
<P>密 码：
<input name="pass" type="password" size="22">
</P>
</form>
经验
密码框能保证输入数据的安全吗？
不能，密码框仅仅使周围的人看不见输入的符号，它不能保证输入数据安全。为了使数据安全，应该加强人为管理，采用数据加密码技术等。
4. 单选框
描述
单选按钮用于一组相互排斥的值，组中的每个单选按钮应用具有相同的名称，用户一次只能选择一个选项。
只有从组中选定的单选按钮才会在提交的数据中提交对应的数值
在使用单选按钮时，需要一个显式的value属性值
语法
<input name="gen" type="radio" value="男" checked="checked" >男
<input name="gen" type="radio" value="女" >女
属性说明
[图片上传失败...(image-e21484-1552720169011)]
-
type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的
-
同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥
-
希望在页面加载时单选按钮有一个默认的选项，则必须使用checked属性，同一组单选按钮只能有一个默认的checked属性
案例演示：单选按钮
[图片上传失败...(image-96c6bb-1552720169011)]
<form method="post" action="">
性别：
<input name="gen" type="radio" class="input" value="男" checked="checked">男
<input name="gen" type="radio" value="女" class="input">女
</form>
5. 复选框
描述
复选框允许用户选择多个选项。
语法
<input type="checkbox" name="interest" value="sports">运动
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩游戏
属性说明
[图片上传失败...(image-f99cb1-1552720169010)]
-
type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。
-
同一组复选框，根据需要可设置name属性值相同，也可不同
-
希望在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有多个复选框有默认的checked属性。
-
一旦用户选中了某个复选框，在表单提交时，会将该复选框的name值和对应的value值一起提交。
案例演示：复选框
[图片上传失败...(image-7b8075-1552720169009)]
<form method="post" action="">
爱好：
<input type="checkbox" name="interest" value="sports" checked="checked">运动
<input type="checkbox" name="interest" value="talk"> 聊天
<input type="checkbox" name="interest" value="play"> 玩游戏
</form>
技巧
复选框的名称要根据应用来确定名称是否相同。通常情况下，如果选项之间是并列关系，就需要设置为相同的名称，以便能够同时获取。例如，兴趣爱好，一个有多个兴趣爱好，这样筛选框设置相同名称，以便在提交数据时能够一次性得到所有选择的兴趣爱好选项。
否则，每个选项都需要单独进行读取，从而降低了效果。
6. 列表框
描述
列表框主要是为了用户快速、方便、正确地选择一些选项，并且节省页面空间
语法
<select name="列表名称" size="行数">
<option value="选项的值" selected="selected">…</option >
<option value="选项的值">…</option >
</select>
<select>标签用户显示可供用户选择的下拉列表，每个选项由<option>来表示；
<select>标签必须包含至少一个<option>标签。
属性说明
[图片上传失败...(image-bf5e27-1552720169009)]
name和value属性是必须的，其他属性并不是必须的。
size确定静静中可同时看到的行数;
selected默认选中，只能有一个选中项
案例演示：列表框
[图片上传失败...(image-5337f-1552720169009)]
<form method="post" action="">
出生日期:
<input name="byear" value="yyyy" size="4" maxlength="4"> 年
<select name="bmon" >
<option value="">[选择月份]</OPTION>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10" selected="selected">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select> 月
<input name="bday" value="dd" size="2" maxlength="2" > 日
</form>
7. 按钮
描述
按钮在表单中经常用到，在HTML中按钮分为3种，分别是普通按钮（button）、提交按钮（submit）和重置按钮（reset）。
普通按钮主要用来响应onclick事件，提交按钮用来提交表单信息，重置按钮用来清除表单中已填信息。
语法
<input type=”button|reset|submit” name=”btn” value=”按钮”>
name和value属性是必须的，其他属性并不是必须的。
案例演示
[图片上传失败...(image-d6aca4-1552720169007)]
<form method="post" action="">
<P>用户名：<input name="name" type="text"> </P>
<P>密 码：<input name="pass" type="password"></P>
<P>
<input type="reset" name="butReset" value="reset按钮">
<input type="submit" name="butSubmit" value="submit按钮">
<input type="button" name="butButton" value="button按钮" onclick="alert(this.value)">
</P>
</form>
图片按钮
<input type="image" src="images/login.gif" />
[图片上传失败...(image-f1cbbc-1552720169006)]
<input type="image" src="images/login.gif" />
8. 多行文本域
描述
当需要在网页中输入两行或以上的文本时，前面学习的文本框及其他表单元素都不能满足要求，这就应该使用多行文本框，它使用的标签是<textarea>
语法
<textarea name="showText" cols="x" rows="y">文本内容 </textarea >
语法说明
[图片上传失败...(image-17fa16-1552720169006)]
案例演示
[图片上传失败...(image-550792-1552720169006)]
<form method="post" action="">
<H4>填写个人评价 </H4>
<P>
<textarea name="textarea" cols="40" rows="6">
自信、活泼、善于思考...
</textarea>
</P>
</form>
9. 文件域
描述
文件域的作用是用于实现文件的选择，在应用时只需要把type属性设置为”file”即可。
在实际操作中，文件域通常用于文件上传的操作，如选择需要上传文本、图片等。
语法
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上传" /></p>
</form>
语法说明
(1) . type值为file
(2) . 在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，表示将表单数据分为多部分提交
案例演示
[图片上传失败...(image-e63916-1552720169004)]
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" /><br />
<input type="submit" name="upload" value="上传" /></p>
</form>
(四) 课堂作业
1. 制作网易邮箱登录页面
训练要求
使用表格布局排版
制作网页邮箱登录页面
效果图
[图片上传失败...(image-8ce19-1552720169004)]
(五) 课后作业
1. 阿里里巴巴用户注册页面
需求说明
(1) . 电子邮箱、登录名、密码最多能容纳的字符数是32个字符，验证码最多能容纳5个字符。
(2) . 默认情况下会员身份中的“买家”处于选中状态。
(3) . 提交按钮使用素材中提供的图片代替。
效果图
[图片上传失败...(image-b83d62-1552720169004)]
网友评论