表单

一、 表单的基本应用

(一) 表单典型的应用场景

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)]

1. type取值为radio时为单选按钮，name和value属性是必须的，其他属性并不是必须的

2. 同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥

3. 希望在页面加载时单选按钮有一个默认的选项，则必须使用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)]

1. type取值为checkbox时为复选框，name和value属性是必须的，其他属性并不是必须的。

2. 同一组复选框，根据需要可设置name属性值相同，也可不同

3. 希望在页面加载时有默认选中的复选框，则必须使用checked属性，同一组复选框中允许有多个复选框有默认的checked属性。

4. 一旦用户选中了某个复选框，在表单提交时，会将该复选框的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)]

二、 表单的高级应用

三、 语义化的表单