12.1表单概述_牛客博客

12.1表单概述

表单是较为复杂的HTML元素，经常与脚本、***页、后台数据处理等结合在一起使用，是设计***页的必备元素。

利用表单可以在HTML页面中插入一些表单控件(元素)，如文本框、提交按钮、重置按钮、单选按钮、复选框、下拉列表框等，完成各类信息的采集。

表单的主要功能:为用户提供输入信息的接口，将输入信息发送到服务器并等待服务器响应。

12.1.1表单标记

1、基本语法:

<form>
<input type="text" name="">
<textarea name="" rows="" cols=""></textarea><select name="">
<option value="" selected> </option ></seleit>
</form>

2、语法说明:

<form>...</form>是一个容器标签，定义一个表单区域。
表单对象需要放在<form>与</form>之间。

3、属性说明:参见教材P192表12-1.

name:规定表单名称，表单命名之后就可以用脚本语言(如JavaScript)对它进行控制。
action:规定当提交表单时，向何处发送表单数据。
method: get/post，指定如何发送表单数据。
enctype:规定表单数据在发送到服务器之前如何编码。

示例:12-1-1。

<!-- edu_12_1_1.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>表单的使用实例</title></head>
<body>
<form name ="form1" method="post" action="form_action.jsp”enctype="text/plain">
<h3>输入课程成绩</h3>
姓名:<input type="text"/> <br/>
高等数学:<input type="text" size="15"/>
大学物理:<input type="text" size="15"/> <br/> <br/><input type="submit" value="成绩提交"/>
<input type="reset" value="成绩重置"/>
</form>
</body>
</html>

12.2定义域和域标题

在表单中使用域可以将表单的相关元素进行分组。
分组的作用:当一组表单元素放到fieldset标记内时，
- 浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果;
- 还可创建一个子表单来处理这些元素。
分组的方法:
- 利用** $<fieldset> </fieldset>$ 域标记**分组。
- 利用** $<legend> </legend>$ 标记定义域标题**。
基本语法

<form>
<fieldset>
<legend align= "left | center | right”>域标题</legend>
<input name="" type="radio" value="" checked>
……
</fieldset>
</form>

语法说明: $<legend>...</legend>$ 必须放在fieldset标记内。示例:12-2-1

<!-- edu_12_2_1.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定义域和域标题实例</title>
    </head>
    <body>
        <form>
            <fieldset>
                <legend align="center">基本信息</legend>
                姓名:<input name="name" type="text">性别: <input name="sex" type="text">
            </fieldset>
            <fieldset>
                <legend align="center">其他信息</legend>
                身高:<input name="height" type="text">
                体重:<input name="weight"type="text">
            </fieldset>
        </form>
    </body>
</html>

12.3表单信息输入
表单中输入信息的主要标记是input标记。

1、基本语法:

$<form><input name="" type=""/></form>$

2、语法说明:

$<input>$ 是单独标记;
输入类型由type属性定义。

12.3表单信息输入

<!-- edu_12_3_1.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单行文本输入框实例</title>
    </head>
    <body>
        <h4>输入用户信息</h4>
        <form>
            朗户名:<input type="text" name="chu" maxlength="20" size="10" />身份:<input type="text" name="jiu" readonly value="学生"><br/>
            密&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" name="psw"maxlength="20" size="10">
        </form>
    </body>
</html>

<!-- edu_12_3_2.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>复选框与单选钮的应用</title>
        <style type="text/css">
            fieldset{width:300px;height:120px;border:2px double #003399;padding-left:30px;}
        </style>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>请填写个人信息</legend><br/>
                姓名: <input type="text" name="xm" maxlength="10" size="10"><br/>
                爱好:
                <input type="checkbox" name="c1" value="读书"/>读书
                <input type="checkbox" name="c2" value="唱歌” checked="checked"/>唱歌
                <input type="checkbox" name="c3" value="游戏" checked="checked"/>游戏<br/>
                性别:
                <input type="radio" name="sex" value="male" checked="checked" />男性
                <input type="radio" name="sex" value="female"/>女性 
           </fieldset>
        </form>
    </body>
</html>

<!-- edu_12_3_3.html -->
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图像按钮实例</title>
        <style type="text/css">
            body{text-align:center;}
            input{width:150px;height:120px;}
        </style>
    </head>
    <body>
        <form>
            <h3>我国首艘航母辽宁号</h3>
            <input type="image" name="image" src="liaoninghao.jpg" align="center" />
            <input type="submit" value="提交">
        </form>
    </body>
</html>

【注】点击图片的不同位置，传入的东西不同

<!-- edu_12_3_4.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种按钮的应用</title>
    <style type=“text/css">
        input{width:100px;height:25px;}
        body{text-align:center;}
        fieldset{width:400px;height:180px;}
    </style>
</head>
<body>
    <form>
        <fieldset>
            <legend>三种按钮的应用</legend>
            <h3>请输入用户信息: </h3>
            用户名: <input type="text" name="username" size="10"/>
            密码:<input type="password" name="password" size="10" /><br/><br/>
            &nbsp; &nbsp;<input type="submit" name="submit" value="提交"/><input type="reset" name="reset" value="重置"/>
            <input type="button" name="button" value="注册新用户" onclick="javascript:alert("注册新用户");">
        </fieldset>
    </form>
</body>
</html>

<!-- edu_12_3_5.html --><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件选择框与隐藏框的应用例</title><style type="text/css">
    Ifieldset{width:500px;height:150px;margin:20px;}
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>文件选择框与隐藏框的应用例</legend><h4>请输入个人信息: </h4>
            姓名:<input type="text" name="name" size="10"/></br>
            性别:<input type="radio" name="sex" value="male"/>男<input type="radio" name="sex" value="female" />女</br>年龄:<input type="text" name="age" size="8"/><br/>
            <h4>请选择文件: </h4>
            <input type="file" name="file" size="40"><br>
            <input tvpe="hidden" name="admin" value="ABCD">
        </fieldset>
    </form>
</body>
</html>