网页开发学习（三）：表单

表单是网页中提供的一种交互式操作手段，无论是提交搜索的信息，还是网上注册等都需要使用表单。用户可以通过提交表单信息与服务器进行动态交流。表单主要可以分为两部分：一是HTML源代码描述的表单；二是提交后的表单处理，需要使用服务器端编写好 JSP等代码对客户端提交的信息作出回应。
基本语法如下：

<form name="" method="" action="" enctype="">
表单项、文字、图片等
</form>

name属性变身术表单的名称；method属性指定传输方式，可以选择post或get；action属性用来指定接纳表单数据的JSP页面或者Servlet，如果该属性为空则提交给当前页面。

常用表单项

表单最重要的作用是获取用户信息，这就需要在表单中加入表单项（控件），例如文本框、单选按钮等。

表单项	说明
< input type=”text” >	单行文本框
< input type=”password” >	密码文本框
< input type=”submit” >	提交按钮，将表单里的信息提交给表单里action所指向的地址
< input type=”image” >	图片提交
< input type=”reset” >	重置按钮，重设表单内容
< input type=”button” >	普通按钮
< input type=”hidden” >	隐藏元素
< input type=”radio” >	单选按钮
< input type=”checkbox” >	复选框
< input type=”file” >	文件域
< select >…< /select >	列表框
< textarea >…< /textarea >	多行列表框

（1）单行文本框。单行文本框允许用户输入一些简短的单行信息，例如用户姓名、地址等。基本语法如下：

< input type=text name="名称" size="数值" value="预设内容" maxlength="数值" />

name：设定文本框的名称
size：设定文本框的宽度
value：设定文本框的预设内容
maxlength：设定文本框的输入长度

这里写图片描述
（2）密码文本框。密码文本框主要用于一些保密信息的输入，例如密码。

< input type="password" name="名称" size="数值" value="预设内容" maxlength="数值"/>

用法与单行文本框基本相同。
这里写图片描述
（3）提交按钮。通过提交按钮可以将表单里的信息提交给表单action所指向的文件地址。

< input type="submit" name="名称" value="预设内容" />

name：设定提交按钮的名称
value：设定按钮上显示的文本，默认为“提交”

这里写图片描述

（4）图片提交。作用与（3）相同，不同的是“图片提交”以一个图片作为表单的提交按钮，其中src属性表示图片的路径。

< input type="image" src="图片路径" name="名称" alt="替代文本" width="宽度" height="高度" />

alt：鼠标经过图像或者图像不显示时的替换文本
例如：

< input type="image" src="image/image2.jpg" name="image2" alt="点击提交"  />

（5）重置按钮。作用是重置用户填写的信息。

< input type="reset" name="名称" value="预设内容" />

这里写图片描述
（6）普通按钮。表单中还会经常用到普通按钮，它没有默认动作，有时需要利用JavaScript来做一些特殊的效果时使用。

< input type="button" name="名称" value="预设内容" />

（7）隐藏元素。隐藏元素多用于在提交表单是想服务器传递一些不需要用户设定但程序必须的参数值。这在动态网页中的需求更加明显。

< input type=hidden" name="参数名称" value="参数取值" />

隐藏元素一般是位于< form >< /form >标签内，在表单提交时一同被发送给服务器端，例如：

<input type="hidden" name="userIP" value="123.123.123.123">
<input type="hidden" name="region" value="northeast">
<input type="submit" value="注册">

这三句代码的作用是在表单提交是，将用户的IP地址和用户所在的地区传送给服务器端，这种数据传递用户往往不会发觉。
（8）单选按钮。通常是给出几个选项供用户选择，一次只能选择一个。应用单选按钮时要确定显示给用户的文字和不同选项的取值。

<input type="radio" name="名称" value="选项内容" checked="checked">

（9）复选框。与单选按钮不同的是，复选框可以同时选择多个。

<input type="checkbox" name="名称" value="选项内容" checked="checked">

这里写图片描述
（10）文件域。用来填写文件路径，通过表单上传文件的地方。

<input type="file" name="名称">

这里写图片描述
（11）列表框。可以显示多个选项贡献厅，且用户能同时选择一个或多个。

<select name="名称" size="大小" multiple="multiple">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
...
</select>

multiple：设定此下拉列表可多选，如果为单选则省略该项。
size：设定下拉列表中显示选项的个数

这里写图片描述
（12）多行文本框。用来输入较多的文字信息，长在新闻发布和论坛等系统中用到。

<textarea name="名称" rows="文本框的显示行数" cols="文本框的显示列数"></textarea>

当用户输入的文字超过显示容量时，多行文本框会自动生成滚动条。
这里写图片描述

使用以上内容自己写了个简单的表单，预览图如下：
这里写图片描述

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单应用</title>
</head>

<body>
    <form action="" method="post" enctype="multipart/form-data" name="form1">
    <table border="1">
        <tr>
            <td colspan="2">会员注册</td>
        </tr>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="userid"/></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="pass"/></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password" name="pass2"/></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gander" value="male"/>男
                <input type="radio" name="gander" value="female"/>女
            </td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="checkbox" value="001"/>体育
                <input type="checkbox" name="checkbox2" value="002"/>音乐
                <input type="checkbox" name="checkbox3" value="003"/>文学
                <input type="checkbox" name="checkbox4" value="004"/>其他
            </td>
        </tr>
        <tr>
            <td>所住城市：</td>
            <td><select name="select">
                <option value="01">上海</option>
                <option value="02">南京</option>
                <option value="03">北京</option>
                <option value="04">广州</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>照片：</td>
            <td><input type="file" name="phpto">
            <input type="button" value="上传" onclick="alter('已经提交')"></td>
        </tr>
        <tr>
            <td>备注：</td>
            <td><textarea name="textfield" rows="3"></textarea></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td><input type="Submit" value="提交">
                &nbsp;&nbsp;
                <input type="reset" name="Submit2" value="重置">
            </td>
        </tr>
    </table>
    </form>
</body>
</html>

网页开发学习（三）：表单

常用表单项

猜你喜欢