HTML表单的运用

1.表单标签

　　<form>标签用于为用户输入创建HTML表单。

　　　　语法：

　　　　<form action="服务器程序URL" method="get|post" enctype="MIME信息" target="文档显示的方式">表单详细设置</form>

属性解释：

　　action：指定一来处理提交表单的格式。

　　method：指明提交表单的HTTP方法。可能值为：post：记入；登记；计算机启动时一系列的自动检查（提交到后台）；get：取得指令，获取文件（提交当前页面，不安全）

　　enctype：指明用来把表单提交给服务器时（当method值为“post”）的互联网媒体形式。

　　target：指定提交的结果文档显示的位置：_blank:在一个新的、无名浏览器窗口调入指定的文档；_self：在指定这个目标的元素的相同的框架中调入文档；_parent：把文档

　　　　　　调入当前框的直接的父frameset框中；_top：把文档调入原来的最顶部的浏览器窗口中。

代码如下：

<form action="login.php" method="post" target="_blank">...</form>

2.表单域

input元素所有type类型如下：（详情可见博文《HTML5的表单所有TYPE类型》）

表单其他元素的其他：

1).textarea(多行文本框)

代码如下：

<rextarea name="content" rows="5" cols="50"></textarea>

属性说明：

name：元素的名称。

rows：指定文本框的高度。

cols：指定文本框的宽度。

2).select(下拉框)

代码如下：

<form action="#" method="post">
    <h4>下拉的效果：</h4>
    地区：
    <select name="area">
        <option value="1">北京</option>
        <option value="2" selected>广州</option>
        <option value="3">上海</option>
        <option value="4">黑龙江</option>
    </select>

    <h4>多选的效果：</h4>
    地区：
    <select name="area" size="3" multiple>
       <option value="1">北京</option>
        <option value="2" selected>广州</option>
        <option value="3">上海</option>
        <option value="4">黑龙江</option>
    </select><br>这里size="3"表示这个选择框里显示三行

属性说明：

size	定义下拉选择框的行数
name	定义下拉选择框的名称
multiple	表示可以多选，如果不设置本属性，那么只能单选
value	定义选择项的值
selected	表示默认已经选择本项
disabled	是否禁用

分组标签<opgrounp>:

代码如下：

<form action="#" method="post">
    地区：
    <select name="area" size=""3 multiple>
        <optgroup label="国内"
            <option value="1">北京</option>
            <option value="2" selected>广州</option>
            <option value="3">上海</option>
            <option value="4">黑龙江</option>
        </optgroup>
        <optgroup label="国外"
            <option value="1">纽约</option>
            <option value="2" selected>巴黎</option>
            <option value="3">莫斯科</option>
            <option value="4">墨尔本</option>
        </optgroup>
    </select>

属性说明：

label属性：定义选项组合的名字。

 

3).其他标签

<fieldset>标签作用是吧表单中元素组合起来。

<legend>标签为fieldset元素定义标题（caption）

代码如下：

<fieldset>
    <legend>注册</legend>
    <form name="form" action="#" method="post">
        用户名：<input type="text" name="username">
        密码：<input type="password" name="pas">
        <input type="submit" name="sub" value="提交">
    </form>
</fieldset>

<label>标签为input元素定义标注（标记）。它的作用是将输入项或选项及其标签文字关联起来。

<label>标签的for属性应当与相关元素的id属性相同

代码如下：

<input type="radio" name="sex" value="1" id="man">
<label for="man">男</label>
<input type="radio" name="sex" value="0" id="woman">
<label for="woman">女</label>

（暂时到这里...）