web前端技术——三、表单

3.1概述

From表单，负责采集和提交用户的输入信息

表单分为表单标签和表单控件

表单控件又分为表单域和按钮

常见表单域包括文本框、密码框、多行文本框、单选按钮、复选框、下拉选择框

在表单域录入数据后，可通过特殊控件（提交按钮等）将数据传递给服务器端（服务器端语言：JSP、PHP、ASP、NET、NodeJS等）接收数据并处理表单。

3.2表单标签

可包含一些表单控件以及其他的HTML标签

一个页面拥有一个或多个表单标签，标签之间相互独立不能嵌套。

一次只提交一个表单数据，同时提交多个需要Javascript的异步交互方式来实现

表单属性：

Action：提交表单向何处发送表单中的数据。属性值是web服务器数据处理程序的URL地址，或Email地址。

Accept-charset:服务器可处理的表单数据字符集

Enctype:表单数据内容类型，说明表单中数据的编码方式。可为

application/x-www-form-urlencoded（默认的编码方式，发送数据到服务器之前，所有字符都会进行Unicode编码，并对某些字符进行特殊处理，例如：遇到空格时将被转换成加号(+)，其他特殊字符将转换为对应的ASCII格式(即“%XX”格式，由一个百分号和两位代表ASCII码的十六进制数字构成)）

text/plain（‘编码方式遇到空格会转换为加号，但不对其它特殊字符进行编码）、

multipart/form-data（上传文件只能用这个，不对字符进行编码）

Id：表单对象的名称（表单在网页中的唯一标识，不能出现重名）

Name:表单对象的名称（在页面中尽量保持唯一，但也可重名）

Target：打开处理URL的目标位置（不建议使用），用户提交表单后将在哪个框架或浏览器中显示该表单的处理结果。

Method：规定向服务器端发送数据所采用的方式，取值可为get（将数据作为URL的一部分发送给服务器，URL有地址部分和数据部分构成两种之间用问号隔开，数据以“名称=值”键值对的方式成对出现，且数据与数据之间通过“&”符号进行分割）、post（将数据隐藏在HTTP的数据流中进行传输；请求数据不会出现在地址栏中，安全性比get方式要高，密码什么的用post，并且对数据长度没有限制）

Onsubmit:向服务器提交数据之前，执行器指定的JavaScript脚本程序

Onreset:重置表单数据之前，执行器指定的JavaScript脚本程序

示例：

<form id="form1" action="form01.html" method="get" name="表单名称" enctype="application/x-www-form-urlencoded" >
    用户名：<input type="text" name="uname"><br>
    密码：<input type="t" name="upsd"><br>
    照片：<input type="file">
    <input type="submit" value="提交"><br>
</form>
<form id="form2" action="form01.html" method="post" name="表单名称" enctype="multipart/form-data" >
    用户名：<input type="text" name="uname"><br>
    密码：<input type="t" name="upsd"><br>
    <input type="submit" value="提交"><br>
</form>

3.3input表单域

用于收集网站访问者信息，一般位于<form>标签之间。

除多行文本框和列表选择框外，大部分表单域使用<input>标签来创建属性描述

Id：设置当前控件的唯一ID，在界面设计时，CSS、JavaScript中可以引用
name：设置当前控件的名称，在向服务器发送数据时，服务器根据name属性获取对应表单域的值。

value ：设置表单域的初始值，网页加载过程中，默认显示该值
type：该属性是必须的，用来说明当前控件的类型，取值可以是text、password、radio、checkbox、file、hidden、button、submit、reset、image等
maxlength：设置输入到文本框的最大字符数；输入达到最大数后，用户按下更多键，也不会添加新的字符。

Size：设置文本输入控件的宽度，单位为字符

Disabled：无效的

Readonly:只读

单行文本框：<input>标签的type属性设置为test

密码框：<input>标签的type属性设置为password

单选按钮：一组数据中只能选择其中一个选项<input>标签的type属性设置为radio

具有相同name属性的单选按钮分为一组，一组只能选一项

Value用于指定该项的值，同一组内的值不应相同

Checked=“checked“用于指定默认被选中的一项

复选框：允许选一项或多项，各项并不互斥。<input>标签type属性设为checkbox

具有相同name属性的复选框分为一组，组内允许多选

Checked=“checked“用于指定默认被选中的一项

文件选择框：<input>标签type属性设为file

Accept属性用于指定文件选择窗口的文件类型过滤

图片的格式包括image/gif, image/jpeg, image/*等格式

Enctype属性要设置为multipart/form-data

Method属性为post

隐藏域：<input>标签type属性设为hidden。不希望用户看到的数据，可隐藏。

也可通过CSS中的display属性或visibility属性来实现

例：

<form id="form2" action="form01.html" method="post" name="表单名称" enctype="multipart/form-data" >
    用户名：<input type="text" name="uname" size="25" maxlength="10" value="请输入用户名"/><br>
    密码：<input type="password" name="upsd"value="请输入密码" size="20" maxlength="16" /><br>
    <input type="text" value="请输入用户名" disabled="disabled"/><br>
    <input type="text" value="请输入用户名" readonly="readonly"/><br>
   性别： <input type="radio" name="sex" value="man" checked="checked"/>男
    <input type="radio" name="sex" value="woman"/>女<br>
    <input type="checkbox" name="hoppy" value="music"/>音乐
    <input type="checkbox" name="hoppy" value="swimming"/>游泳
    <input type="checkbox" name="hoppy" value="football"/>足球<br>
    请选择上传的头像<input type="file" accept="image/*" name="headimage"><br>
    <input type="hidden" name="hiddenData" value="不显示的数据"/>
    <input type="submit" value="提交"/><br>

多行文本框：输入较长内容的文本输入控件。<textarea>内容</textarea>

属性：off:默认值，文本域中内容足够多时，会在文本域添加滚动条

Virtual：实现文本区内的自动换行，但在传输给服务器时，文本只在用户按下enter键的地方进行换行，其他地方无换行效果

Physical：实现文本区内的自动换行，并以这种形式传送给服务器。

注：输入内容更丰富，可使用富文本框。

<textarea name="多行文本" rows="6" cols="40" wrap="virtual">文本内容，多一点文本，才能看的出效果
</textarea>

列表选择框：允许用户从列表中选择一项或多项。可通过<select>和<option>标签来创建一个列表框

列表选择框使用<select>标签进行定义，一个列表可包含多个列表项<option>

<select>的属性

Name:设置列表的名称

Size:设置列表中可见选项的数目，（默认为1）Size属性用于指定列表选择框显示的行数

Multiple:设置列表是否可以选择多个选项，指明当前列表是否允许按住ctrl进行多选，默认只能选一项

Disabled：设置列表是否被禁用

<option>属性列表

Value：设置该项的值，如果选中该项，该项的值就将发送给服务器。

Selected：当页面加载时，该项是否被选中。可理解为默认被选中的项。

Disabled：该项在首次加载被禁用

<body>
<form>
    请选择国家，
    <select name="country" size="2" multiple="multiple">
    <option>中国</option>
        <option>英国</option>
        <option>俄罗斯</option>
        <option>中国</option>
        <option>英国</option>
        <option>俄罗斯</option>
    </select>
    <br/><br/>
    请选择省份：
    <select name="province" size="4" multiple="multiple">
        <option value="SD" selected="selected">山东</option>
        <option value="NMG">内蒙古</option>
        <option value="TW">台湾</option>
        <option value="SX">陕西</option>
        <option value="HN" >湖南</option>
    </select>
<br/><br/>
    请选择城市：
    <select name="city">
        <option value="BJ">北京</option>
        <option value="SH">上海</option>
    </select>
</form>
</body>

<optgroup>:对列表进行分组

属性label用于指定分组名，且分组名不能被选择

属性disabled用于设置该分组是否被禁用

3.4按钮控件

表单的按钮有多种功能：提交表单，清除和重置表单，甚至触发客户端脚本程序。

按钮分为：提交按钮、重置按钮、图片按钮和普通按钮，可通过<input>或<button>创建按钮。

例：

<form action="http://www.baidu.com">
    <input type="submit" name="btnsubmit" value="提交按钮"/>
    <input type="reset" name="btnreset" value="重置按钮"/>
    <input type="submit" name="btnnormal" value="普通按钮" onclick="alert('可调用JavaScript脚本')"/>
    <input type="image" src="../images/sky.jpg" width="100" value="图片按钮"/>
</form>

Button按钮与input按钮相比，功能更强大，可包含任何可接受的正文内容，文本图片视频都可以。

<form action="http://www.baidu.com">
    <button type="submit" value="提交内容">提交内容</button>
    <button type="reset" value="重置内容">重置内容</button>
    <button type="button" value="普通按钮" onclick="alert('可调用JavaScript脚本')">普通按钮</button>
    <button type="submit" value="提交内容"><img src="../images/sky.jpg" width="290"></button>
</form>

3.5表单的分组

<fieldset>可以看作是表单的一个子容器，将包含的内容以边框环绕方式显示

<legend>：为<fieldset>边框添加相关标题

<form>
    <fieldset>
        <legend>请选择个人爱好</legend>
        <input type="checkbox" name="hoppy" value="music"/>音乐<br/>
        <input type="checkbox" name="hoppy" value="swimming"/>游泳<br/>
        <input type="checkbox" name="hoppy" value="football"/>足球<br/>
    </fieldset>
</form>

3.6写在最后

有问题可评论区或私信联系，欢迎交流。