Web学习笔记（3）

采用POST方法是在HTTP请求中嵌入表单数据。浏览器首先与action属性中指定的服务器建立连接，一旦建立连接之后，浏览器按分段传输的方法将数据发送给服务器。显然这种方法用户数据嵌入在http请求中而不是地址栏的，保密性较好，对用户发送的数据量也无限制。但post方法发送的信息是未经加密的，容易被黑客获取。

其他属性

在HTML5中，form标签还有两个新的属性。

autocomplete：规定是否启用表单的自动完成功能。自动完成允许浏览器侦测字段输入，当用户开始键入时，浏览器会基于以前键入过的值，自动列表显示在字段中填写的选项。取值为on,启用自动完成功能;取值为on,取值为off，禁止自动完成功能。

novalidate：规定是否不进行表单验证。启用该属性，则当提交表单时不进行验证。

3）表单控件的类型

常用的表单控件有以下几种：

input控件：是单行输入型控件，用来接受用户输入的信息。

textarea控件：用来创建一个支持多行的文本输入区域。

select控件：用于创建下拉列表框。

button控件：用于定义一个按钮。

2.学会设置action和method属性

form表单示例

在HTML中，使用<form></form>标签来定义表单，在该标签中可通过name设置表单名称，通过action属性设置接收并处理表单数据的程序路径，method属性设置提交方法。例如： <form name="myform" method="get" action="passwodl.jsp">...</form>

创建输入控件

1.input控件相关概念

1)input控件的属性

input标签是单标签，用于创建采集用户输入信息的表单控件。input控件常用的属性有type、name、value、size、readonly、disabled、checked、maxlength、min。

type：控件类型，取值为text 、password、radio 、 checkbox 、 button、 submit、 reset、 file image、 hidden等

name：控件名称，取值由用户定义

value：控件中默认文本，取值由用户定义。对于不同的input控件类型，value的含义不同，例如button、reset和submit，value定义按钮上显示的文本；text、password和hidden，value定义域的初始值；checkbox、radio、image，value定义与输入相关联的值。

size：控件在页面中显示宽度，取值正整数

readonly：控件内容为只读，取值为readonly

disabled：首次加载页面时禁用该控件（显示为灰色），取值为disabled

checked：定义选择控件默认值被选中，取值checked

maxlength：控件允许输入的最多字符数，取值正整数

min：控件允许输入的最少字符数，取值正整数

HTML5中新增的input属性还有：

placeholder：用户输入提示，取值由用户定义

required：输入字段必须填写，取值为required

autofocus：自动聚焦，取值为autofocus

pattern：规定输入字段值的模式或格式，取值为正则表达式

2)input控件的类型

input控件通过type属性的取值设置不同类型，主要有：

text：定义单行文本框，文本框的默认宽度是20个字符。

password：定义密码框，密码域中的字符会被掩码（显示为星号或原点）。

radio：定义单选按钮，单选按钮允许用户在一定数目的选择项中必须且仅能选取一个。

checkbox：定义复选框，复选框允许用户在一定数目的选择项中不选、选取一个或多个。

button：定义按钮，单击按钮时需自行定义行为。button常用于在用户单击按钮时启动JavaScript程序，响应用户。

submit：定义提交按钮，提交按钮用于向服务器发送表单数据。数据会发送到表单action属性中指定的位置。

reset：定义重置按钮，重置按钮会清除表单中的所有数据。

file：定义文件域，包括输入字段和“浏览”按钮，供文件上传。

image：定义图像形式的提交按钮，需配合src属性和alt属性使用。

hidden：定义隐藏域，隐藏域对于用户是不可见的，隐藏域通常会存储一个默认值。

HTML5中新增的type取值：

search：用于搜索域，如站点搜索或Google搜索。search显示为常规的文本框。

email:定义包含e-mail地址的输入域，在提交表单时，会自动验证email域的值。

url:定义包含URL地址的输入域，在提交表单时，会自动验证url域的值。

tel:定义一个电话号码输入域，手机端输入信息时，会弹出拨号键盘。

number:定义一个数字输入域，可以使用max和min属性规定输入数值的最大值和最小值，让输入的数据在合法值的范围内。也可以使用step属性规定数字的增减间隔。

range:定义包含一定范围内数字值的输入域，range类型显示为滑动条，默认值范围是0~100。同时可以使用max、min和step属性。

color:定义颜色选择域，输入时会打开调色板选取颜色。

date:定义日期选择域，鼠标点击输入框，可以看到浏览器原生的日历框。

month:定义月份选择域，效果类似date。

week:定义周选择域，效果类似date。

time:定义时间选择域。

datetime-local:定义本地日期时间选择域。

datetime:定义日期时间选择域。

2.创建文本框

在input标签中,将type属性设置为text，可显示单行文本框。使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。使用size属性可规定文本框的宽度，使用maxlength属性可规定控件允许输入的最多字符数。

示例如下：姓名：<input type="text" name="userName" size="20" maxlength="16"/>

3.创建密码框

在input标签中,将type属性设置为password，可显示密码框。使用name属性来规定input元素的名称，它可以对提交到服务器后的表单数据进行标识。使用size属性可规定密码框的宽度，使用value属性可规定密码的初值。示例如下：密码：<input type="password" name="check" size="20" value="123"/>

4.创建单选按钮

在input标签中,将type属性设置为radio，可设置单选框；使用name属性来规定input元素的名称，要求单项选择中的每个选项都具有相同的name；使用value属性可规定与输入相关联选项值。

示例如下：性别：<input type="radio" name="sex" value="man"/>男<input type="radio" name="sex" value="woman"/>女

5.创建复选框

单项选择的设置

在input标签中,将type属性设置为checkbox，可设置多选框；使用name属性来规定input元素的名称，要求多项选择中的每个选项都具有相同的name；使用value属性可规定与输入相关联选项值；添加checked属性可将选项设置为默认选项。示例如下：您喜欢的水果有哪些？<br/>

<input name="Fruit" type="checkbox" value="Fruit1" checked="checked">苹果

<input name="Fruit" type="checkbox" value="Fruit2">桃子

<input name="Fruit" type="checkbox" value="Fruit3">香蕉

<input name="Fruit" type="checkbox" value="Fruit4">梨

<input name="Fruit" type="checkbox" value="Fruit4">其它

6.重置与提交按钮

1）重置与提交按钮的设置

在input标签中,将type属性设置为reset，可添加重置按钮；将type属性设置为submit，可添加提交按钮；；使用value属性可定义按钮上显示的文本。示例如下： <input type="reset" value="重填"/> <input type="submit" value="确定"/>

创建文本区域

1.textarea控件相关概念

1）textarea标签的属性

textarea标签用于定义多行文本区域，文本区域中可容纳无限数量的文本，其中文本的默认字体是等宽字体（Courier）。

2）textarea的基本属性

textarea的基本属性主要有：

cols：规定每行中的字符数

rows：规定可见的行数

name：规定文本区域的名称

readonly：规定文本区域为只读

disabled：规定文本区域为不可用

3）HTML5中textarea的新属性

textarea的新属性主要有：

wrap：规定表单提交时，文本区域的文本换行模式。取值为soft表示不换行，取值为hard表示换行

maxlength：规定文本区域的最大字符数

placeholder:规定一个简短的提示，描述文本区域期望的输入值

required:规定文本区域是必需的/必填的。

autofocus：规定当页面加载时，文本区域自动获得焦点

form:定义文本区域所属的一个或多个表单。

2.创建文本域

在textarea标签中,使用cols属性来规定文本域中每行的字符数，使用cols属性来规定文本域中每行的字符数，使用rows属性可规定文本域中可见的行数，使用name属性可规定文本域的名称，使用wrap属性可规定表单提交时，文本区域的文本换行模式。添加required属性可规定文本域的内容必填写。

示例如下：

推荐理由：<textarea name="userName" cols="40" rows="4" wrap="hard" required="required"></textarea>

创建下拉列表

1.下拉列表控件相关概念

1)select控件

select控件可以创建选择框。可为用户提供一组选项，允许用户从中选取，通常呈现为下拉菜单的样式。

2)select控件的基本结构

下拉列表选择区是由<select>标签和<option>标签构成，其中<select>标签用来创建下拉列表，<option>标签定义了列表中的可用选项。基本结构如下：

<select name="">
<option value=" ">选项1</option>
<option value=" ">选项2</option>
...
</select>

3)select标签的常用属性

select标签的常用属性有：

name：规定下拉列表的名称
size：规定列表中可见选项的数目
multiple：设定为多选
disabled：禁用该下拉列表

4)select标签的新属性

HTML5中引入的select新属性有：

autofocus：规定在页面加载时下拉列表自动获得焦点
required：规定用户在提交表单前必须选择一个下拉列表中的选项
form：定义 select 字段所属的一个或多个表单

5)option标签的常用属性

disabled：规定该选项在首次加载时被禁用

selected：规定该选项在首次加载时为选中状态

value：定义送往服务器的选项值

2.创建下拉列表

创建下拉列表

select 元素可创建单选或多选菜单，可以通过size属性来设置选择框的行数。

option元素用于定义列表中的可用选项。

提示：select 元素是一种表单控件，可用于在表单中接受用户输入。

示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建下拉列表</title>
</head>
<body>
<form>
<select size="2">
<option value="SH">上海</option>
<option value="BJ">北京</option>
<option value="HB">湖北</option>
<option value="ZJ">浙江</option>
</select>
</form>
</body>
</html>

3.设置多选和默认选项

1）创建多选选择框

select元素的multiple属性用于定义选择框是否多选提示：对于 windows：按住 Ctrl 按钮来选择多个选项对于 Mac：按住 command 按钮来选择多个选项

2）创建具有默认选项的选择框

option元素的select属性可以设置默认选项

示例如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>创建多选和默认选项</title>
</head>
<body>
<form action="" method="get">
<select multiple="multiple">
<option value ="peach">桃子</option>
<option value ="banana" selected>香蕉</option>
<option value="apple">苹果</option>
<option value="orange">橘子</option>
</select>
</form>
</body>
</html>

对表单元素进行分组

1.分组元素相关的概念

1）fieldset标签

fieldset标签用于定义表单的一个子容器，将所包含的内容以边框环绕方式显示。

fieldset标签没有必需的或唯一的属性，可添加的属性有：

name：规定fieldset的名称

form：规定fieldset所属的一个或多个表单

disabled：规定该组中的相关表单元素被禁用

2）legend标签

legend标签用于定义分组的标题，fieldset标签中的第一个元素一般是legend标签。

2.对表单元素分组

对表单进行分组

fieldset为表单的一个子容器将所包含的内容以边框环绕方式显示。 legend为fieldset边框添加相关的标题

示例如下：

<fieldset>
<legend>健康档案</legend>
<input type="text"/>身高 <br/>
<input type="text"/>体重<br/>
</fieldset>

界面效果如下：

对表单进行验证

1.表单验证相关的概念

表单验证是指在用户提交表单之前，验证用户输入的数据是否合法。 HTML5提供了一套简单的验证方式，在表单提交时，会根据情况弹出一些简单的提示，如“请填写此字段”“请匹配要求的模式”等，不同的浏览器所弹出的提示内容会有所不同。

表单验证的类型

HTML5中主要包括以下几个方面的验证：输入类型的验证、日期和时间范围的验证、必填字段的验证、步长的验证、字符长度的验证、数值范围的验证、正则表达式的验证等。

required非空验证

在某个表单控件中添加required属性，则表明该表单的值不能为空。required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。示例如下： <input type="text" placeholder="请输入用户名" required>

maxlength字符长度验证

在某个表单控件中添加maxlength属性，可限定输入的字符数。maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。示例如下： <input type="password" maxLength="10"/>

输入类型的验证

HTML5新增了一些具有校验功能的input控件的类型，分别是：

email:要求输入内容必须符合电子邮件地址的格式。

url:要求输入内容必须符合URL的格式

number:要求输入内容必须为数字，并可通过min、max、step等属性来设置最小值、最大值和间隔

示例如下： <input type="email"/> <input type="url"/> <input type="number" min="0" max="100" step="10" value="20"/>

pattern验证

HTML5新增的pattern属性具有对表单中输入字段模式进行验证的功能。适合于text、serch、url、telephone、email、password等<input>类型。示例如下： <input type="text" pattern="^[0-9]{12}$"/> 可以看到，pattern属性取值为符合某种规则的正则表达式，它以“^”开始，以“$”结束，中间是“规则字符串”，规则字符串通常由普通字符和元字符组成。

普通字符：由大小写的字母和数字组成
元字符：是具有特殊含义的字符
常见的元字符及其功能说明如下图所示：

2.非空校验

非空校验示例

在表单text类型的input标签中添加required属性，可以设置文本框的值不能为空；在该标签中通过title属性可以设置相关的提示信息。

<form>
用户名：<input type="text" required="required" title="用户名一定要写哦！" maxlength="16">
<input type="submit" value="提交"
</form>

3.邮箱校验

邮箱校验示例

在表单email类型的input标签中添加required属性，可以设置电子邮箱输入框的值不能为空；在该标签中通过placeholder属性可以设置相关的提示信息。

<form>
邮箱：<input type="email" required="required" placeholder="示例：12345@qq.com"/>
<input type="submit" value="提交"
</form>

4.pattern验证

Pattern校验示例

在表单text类型的input标签中添加pattern属性，可以根据匹配要求设置规格字符串。匹配输入6位数字的示例如下。

<form>
邮政编码：<input type="text" required="required" pattern="^[0-9]{6}$"/>
<input type="submit" value="提交"
</form>

给表单组件添加说明

1.label标签相关概念

label标签及其属性

<label>标签用于为输入类型的表单控件定义标注。用<label>元素定义的文本标签，从显示上看与其他文本毫无差异。但当用户点击由<label>元素定义的文本标签时，与该文本关联的输入控件将获得焦点。 <label>标签的属性主要是：

for:规定label绑定到哪个表单元素上，属性取值为表单元素的id。在HTML5中新增了form属性：
form:规定label字段所属的一个或多个表单。当<label>标签不在表单标签<form>中时，就需要使用form属性来指定所属表单；属性值是其所属表单的id。如果input元素属于多个表单，用空格符分隔表单的id名，但目前浏览器测试都不支持。

label标签与表单控件的关联

label标签与表单控件之间有两种关联方法。

显式关联

通过使用 "for" 属性将 label 绑定到另一个元素，这种方式称为显式关联。用法示例：