Html5+CSS3学习记录（4）——表单

一、概述

1.表单功能

表单是网页上的一个特定区域。表单在网页中主要负责数据采集功能，并使网页具有交互功能。常见的表单形式主要包括文本框、单选按钮、复选框、按钮等。

2.表单基本组成部分：

表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

二、表单相关标签

1、表单标签 <form> </form>

基本语法：

      <form action="hello.html" name="hello" method="get" enctype="application/x-www-form-urlencoded" target="_blank">
        ...
      </form>

相关属性：

属性	含义	解释
action	表单的处理程序，规定提交表单时将表单数据发送到何处。	绝对 URL - 指向其他站点,相对 URL - 指向站点内的文件,甚至邮箱地址都可以
name	表单名称，防止提交后处理混乱	避免空格和特殊符号
method	定义处理程序从表单中获得信息的方式	有get（默认）和post及dialog
enctype	表单信息提交时的编码方式	包括三种值，application/x-www-form-urlencoded、multipart/form-data、text/plain
target	目标窗口的打开方式	和之前链接中的target属性含义相同

1.method

（1）get方法指表单数据会被视为CGI或ASP的参数发送
这时浏览器会与表单处理服务器建立连接，然后直接在一个传输步骤中发送所有的表单数据：浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。
（2）post方法指表单数据是与URL分开发送的，用户端的计算机通知服务器读取数据。
如果采用 POST 方法，浏览器将会按照下面两步来发送数据。首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。
（3）method属性设为dialog，这时点击提交按钮，对话框就会消失。但是，表单不会提交到服务器，浏览器会将表单元素的returnValue属性设为 Submit 按钮的value属性

2.enctype

规定在发送到服务器之前应该如何对表单数据进行编码。有三种值：

属性值	说明
application/x-www-form-urlencoded	默认的编码形式 ，空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值
multipart/form-data	不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
text/plain	空格转换为 “+” 加号，但不对特殊字符编码

3.target
和前面学到的含义相同,即目标窗口的打开方式：

2、输入标签<input>

根据输入方式的不同，划分除如下的几类：

（1）文本框和密码框

文本框和密码框的语法差不多，最大的区别在于type属性的值。
文本框也叫单行文本框，只能显示单行文本，文本类型不限。type属性值为text
密码框中的文字以*或·显示。type属性值为password。
语法：

<label>文本框<input type="text" name="happy1" size="50" maxlength="500" value=""></label>
<br><br><br>
<label>密码框<input type="password" name="happy2" size="50" maxlength="500" value=""></label>

实现效果：

type表示输入标签的类型；
name是文本框的名称，起区别作用，不能包含特殊字符；
size定义文本框在页面的显示长度，以字符做单位；
maxlength定义最多可输入的字符数；
value定义默认值

注：<label>标签可以实现点击标签内内容即可聚焦的功能

（2）单选按钮和复选框

单选按钮使用户可以进行单选，以圆框表示；
复选框可以进行项目的多项选择，以方框显示。
语法如下：

<label>全选<input type="radio" value="1" name="quanxuan"></label>
<label>全不选<input type="radio" value="1" name="quanxuan"></label>

<br><br><br>

<label>多选1<input type="checkbox" value="1" name="duoxuan1" checked="checked"></label>
<label>多选2<input type="checkbox" value="2" name="duoxuan2" checked="checked"></label>
<label>多选3<input type="checkbox" value="3" name="duoxuan3" checked="checked"></label>

实现效果：

value设置用户选择该项目后传入处理程序的值；
name按钮名称，单选框中名称相同；
checked表示默认选中，单选框中只能设置一个，复选框无限制

（3）按钮

按钮可以分为普通按钮、提交按钮、重置按钮。

一般配合脚本进行表单处理。

语法：

<input type="button" value="保存" name="save" onclick="alert('保存成功！')">
<input type="submit" name="submit" value="提交" >
<input type="reset" name="reset" value="重置">

实现效果：

保存按钮的实现效果：

value按钮上显示的文字；
name按钮名称；
onclick鼠标单击按钮时进行的处理，其中提交和重置按钮默认提交和重置。

注：也可以用<button>标签设置按钮。

（4）图像域和文件域

图像域可设置按钮图像，统一网页风格；
文件域用来上传文件，查找硬盘上的文件然后上传。
语法：

<input type="image" src="happy.jpg" name="button">
<br><br><br>
<input type="file" accept="" name="shangchuan">

实现效果：

src：图片地址
name：图像域中代表按键，默认为button；文本域中仅作区分。
accept：文件域中所接受的文件类型，有26种选择，但不可设定

3、文本域和列表

(1)文本域

可添加多行文字，多用于留言板等需要输入大量文字的场景。

语法：

<label>留言板<br><textarea name="liuyanban" rows="10" cols="20"></textarea></label>

实现效果：

name：文本域名称
rows：行数
cols：列数

（2）列表/菜单

用来选择给定答案的一种，往往答案很多，使用单选框非常浪费空间。

语法：

	<div>星期：
            <select name="xingqi" size="1">
                <option value="1" selected="selected">周一</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>
            </select>
	</div>

实现效果：

name：名称
size：显示长度
multiple：表示菜单可多选
value：定义选项值
selected：默认被选中

html基础学习差不多了，下一个开始CSS