html表单

课程目标

掌握HTML的常用标签的使用
掌握表格、表单的使用
能够创建自己的个人主页

了解提交表单的方法
掌握常用表单字段的使用（重点）
-------------------------------------------------
表单概述

表单用来收集用户信息并提交给服务器。
服务器需要一门动态语言来获取这些信息并进行处理，常用的服务器端语言有asp/asp.net/php/jsp等。

<form method="get" action="form.htm">
    <input type="text" name="id" value="" />
    <input type="submit" value="提交" />
</form>
-------------------------------------------------
提交表单的方法

示例：GET方法提交表单
<form method="get" action="form.htm">

GET方法的HTTP请求消息头：    ********************
GET /DEMO/form/form.htm?id=dd&password=123456 HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/form.htm
Accept-Language: zh-cn


示例：POST方式提交表单

POST方法的HTTP请求消息头：   **********************
POST /DEMO/form/form.htm HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/form.htm
Accept-Language: zh-cn
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 7.0)
Host: localhost:4346
Content-Length: 21

id=dd&password=123456

action属性
    提交表单时转到的URL地址。

method 属性                **********************
GET方式
    收集用户少量信息。
    URL的长度限制为4KB
POST方式
    收集用户大量信息（可能包含用户上传的文件）。
    用户提交的信息保存在HTTP请求消息的正文。
    提交后不能使用刷新按钮。

-------------------------------------------------
常用表单字段

文本输入框（input）
type 属性
    --type=“text”表示文本输入框
value 属性
    --文本框的值
name属性
    --必须的，提交表单时此文本框的值value存储在name变量中。

<input  type="text"  name=“input1"   value="你好" />

maxlength 属性
    --文本框允许输入的最多的字符数
tabindex 属性           **********************
    --用户点击tab按键时焦点的切换顺序（从1开始）

disabled属性
    --不可用
readonly属性
    --只读
    
Disabled和readonly的区别？
disabled的文本框显示为灰色
tabindex对disabled的文本框不起作用
disabled的文本框的值不会发送到服务器
    
密码输入框（input）
    --用于输入密码，输入的密码以星号显示。
  
如果表单的 method=’get’，则点击提交按钮时，URL地址变成：
http://localhost:4346/DEMO/form/password.htm?password1=123456
所以，一般用户登陆的表单需要用POST提交方式。

-------------------------------------------------

多行文本输入框（textarea）           *****************
用于输入多行文本，如果输入内容过长，则会自动显示滚动条。

注：实现自动换行的功能：写一个css,如下
<style>                               *****************
.test{
width:5em; 
border:1px solid #000000;
word-wrap:break-word;
}
</style>  
<textarea class="test"></textarea>    *****************
-------------------------------------------------
列表框（select）
下拉列表，用户可以从一些可选项中选择。
示例：简单的下拉列表
<select name="country">
        <option value="America">美国</option>
        <option value="China" selected="selected">中国</option>
        <option value="India">印度</option>
        <option value="Russia">俄罗斯</option>
</select>

<optgroup>标签                         *****************
用来对选项进行分组（分组标签是不可选择的）

<select name="country2">               *****************
        <optgroup label="北美洲">
            <option value="America">美国</option>
        </optgroup>
        <optgroup label="亚洲">
            <option value="China" selected="selected">中国</option>
            <option value="India">印度</option>
            <option value="Russia">俄罗斯</option>
        </optgroup>
</select>                               *****************

列表框（以平铺的形式显示）              *****************
设置<select>标签的属性 size 的值大于 1 即可
size表示显示多少行

示例：列表框与多选列表框？              *****************
<select name="country4" size="5">
        <option value="America">美国</option>
        <option value="China" selected="selected">中国</option>
        <option value="India">印度</option>
        <option value="Russia">俄罗斯</option>
</select>

列表框（可以多选）                       *****************
设置<select>标签的属性 multiple="multiple“
用户可以通过Ctrl或Shift选择多个选项。

-------------------------------------------------
单选按钮（input）
单选按钮的行为类似上面介绍的下拉列表，用户可以从几个选项中选择一个。

示例：单选按钮分组？
蓝色<input type="radio" value="blue" name="color" />
红色<input type="radio" value="red" checked="checked" name="color" />
白色<input type="radio" value="white" name="color" />

特别注意：name 用于指定哪些单选框是一组的，
同组的单选框只能选中一个。

-------------------------------------------------
多选框（input）
多选框和单选按钮，以及可以多选的列表框类似。

示例：多选框分组？

蓝色<input type="checkbox" value="blue" name="color" />
红色<input type="checkbox" value="red" checked="checked" name="color" />
白色<input type="checkbox" value="white" name="color" />

-------------------------------------------------
按钮（input）
提交按钮（type=”submit”）
点击提交按钮所在的表单
用户在单行文本框或密码框中，按enter时提交表单（相当点击提交按钮）。

重置按钮（type=”reset”）
将表单字段的值重置为页面第一次加载时的值。

一般按钮（type=”button”）
没有默认行为。
怎样使用一般按钮提交表单？（使用Javascript）

-------------------------------------------------
图片按钮（input）
类似提交按钮，但是使用一个图片而不是浏览器默认的按钮。

示例：图片按钮向服务器提交的数据？

<input type="image" src="../images/rose.bmp" alt="Rose" />
点击图片按钮会回发表单，HTTP请求消息为：
GET /form/imgbutton.htm?password=123456&x=5&y=93 HTTP/1.1
Accept: */*
Referer: http://localhost:4346/DEMO/form/imgbutton.htm
Accept-Language: zh-cn

-------------------------------------------------
注意，                           ******************
在发送到服务器的数据中，除了文本框的值，还有：
x=5&y=93
这个是点击按钮时，光标落在图片的坐标。


-------------------------------------------------
隐藏输入框（input）
用户不可见，但是隐藏输入框的值可以随着表单一起提交。
<input type="hidden" name="password" value="123456" />


常见的使用场合
多页面收集用户信息。

服务器需要三个页面收集用户数据。
用户提交第一个页面，服务器把数据以隐藏字段的方式保存在第二个页面中。
当用户提交第二个页面时，服务器把数据保存在第三个页面。
用户提交第三个页面，完成。

-------------------------------------------------
标签（label）                   ********************
有些HTML标签尺寸很小，比如单选框和多选框。希望点击单选框旁边的按钮和点击单选框的效果相同。

示例：<label>标签常见的使用场景？
<label for="blue">蓝色</label>
<input type="radio" id="blue" value="blue" name="color" />

注意：label标签中的for值和输入框中的id值须一致

-------------------------------------------------
id和name有什么区别呢？         ********************
id 在整个页面是唯一的，没有任何两个HTML标签的id是一样的。
name 用在向服务器发送数据时，保存HTML标签的值。
可以有相同的name的HTML标签存在（比如相同name的radio是同一分组的）。
          
-------------------------------------------------
分组框（fieldset）             ********************
分组框<fieldset>标签。
<legend>标签来显示分组框标题。

<fieldset style="width:200px;">
        <legend>选择颜色</legend>
        <ul>
            <li>蓝色<input type="radio" value="blue" name="color" /></li>
            <li>红色<input type="radio" value="red" checked="checked" name="color" /></li>
            <li>白色<input type="radio" value="white" name="color" /></li>
        </ul>
</fieldset>

-------------------------------------------------
框架

为什么使用frameset
<frameset> 允许我们把很多页面组合成一个页面

常见的应用场景
一个frame中放置页面导航，另一个frame中放置页面内容，
当点击页面导航时，只刷新页面内容。（部分刷新）
-------------------------------------------------
垂直分栏框架
<frameset>的 cols 属性，定义垂直分栏的各列的宽度：

示例：一个三列的框架，其中第一列占据150px的宽度，第二列占据10%的宽度，
第三列占据剩余的宽度。

<frameset cols="150, 10%, *">
    <frame src="1.htm" />
    <frame src="2.htm" />
    <frame src="3.htm" />
</frameset>

-------------------------------------------------
水平分栏框架


示例：
<frameset rows="50, 10%, *">
    <frame src="1.htm" />
    <frame src="2.htm" />
    <frame src="3.htm" />
</frameset>

-------------------------------------------------
水平分栏框架


<frame>标签的属性
frameborder="0“
用来设置不显示分隔条
noresize="noresize“
则设置分隔条不可拖动
scrolling=”no”
不显示滚动条。

-------------------------------------------------
混合框架
科大的bbs（http://bbs.ustc.edu.cn）使用框架

<frameset cols="151, 10, *" framespacing="0" frameborder="no“ border="0">
    <frameset rows="*, 25" framespacing="0" frameborder="no" border="0">
          <frame name="f2" src="cgi/bbsleft" noresize>
          <frame scrolling="no" name="f2tty" src="tty.html" noresize>
        </frameset>
    <frame src="f5.html" name="f5" frameborder="no" scrolling="no" noresize>
    <frameset rows="0, *, 20" framespacing="0" frameborder="no" border="0">
          <frame name="f3" src="cgi/bbsindex" noresize>
          <frame scrolling="no" name="f4" src="cgi/bbsfoot" noresize>
      </frameset>
</frameset>

-------------------------------------------------
框架之间导航
框架中的链接可以在框架之间导航，通过设置<a> 标签的target属性。

<a>的target属性和<frame>的name属性相对应。