表单标签是最常用的标签，常用于与服务器的交互，比如一些文本框、按钮、密码、提交等等。我们常用的登录一个网页的账号密码，就是使用表单标签制作的。
表单最外面的标签就是<form>标签，利用<form>表单内容</form>来修饰表单。其中<form>常用的有action和method两个属性，action主要是指表单向何处提交数据，一般为URL；而method则表示提交表单数据的HTTP方法，有get和post两个取值。接下来看看form内部常用到的一些标签。
1.input标签
input标签中最重要的属性就是type属性，type属性决定了它代表哪种输入形式；type主要有button、checkbox、file、hidden、image、password、radio、reset、submit、text等等。以下通过实例来演示input标签的用法。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title size="10" color="red">welcome to HTML</title>
</head>
<body>
<title>表单示例</title>
<form action="01.html" method="get">
姓名：<input type="text" name="name" value="张三"/><br/>
手机号码：<input type="text" id="text1" name="phone" value="1234567890"/><br/>
密码：<input type="password" id="text2" name="password" value="***********"/><br/>
性别：<input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女<br/>
兴趣爱好：<input type="checkbox" checked="checked"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球<br/>
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置信息">
</form>
</body>
</html>得到如下网页：
从上可以看出使用了text、password、radio、checkbox、submit、reset等类型的对象，其中文本类的默认值由value属性实现，而单选框和复选框的默认值则由checked属性实现。上面代码中显示如果提交数据则会显示01.html网页的内容，接下来点击提交键，观看结果。
以上便是提交数据之后显示的页面，也就是form中action的值所对应的网页。
2.select标签
我们在一个网页填写信息的时候，常会遇到下拉菜单，而select标签就是用来制作下拉菜单的。以下通过在上面的例子中添加下拉菜单，使得页面更加丰富。
其中select是由option属性集合组成的。每个option标签的返回结果都是下拉菜单的一个值。option有value和selected属性，前者表示显示的值，后者表示默认选中该值。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title size="10" color="red">welcome to HTML</title>
</head>
<body>
<title>表单示例</title>
<form action="01.html" method="get">
姓名：<input type="text" name="name" value="张三"/><br/>
手机号码：<input type="text" id="text1" name="phone" value="1234567890"/><br/>
密码：<input type="password" id="text2" name="password" value="***********"/><br/>
性别：<input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女<br/>
兴趣爱好：<input type="checkbox" checked="checked"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球<br/>
生日:<select name="year">
<option value="0">请输入年份</option>
<option value="1990" selected="selected">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<select name="month" >
<option value="0">请输入月份</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select name="day" >
<option value="0">请输入天</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br/>
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置信息">
</form>
</body>
</html>得到如下网页，可以看到下拉菜单的显示效果。
3.textarea标签
textarea标签表示多行输入文本标签，通过cols和rows来控制可见列数和可见行数。
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title size="10" color="red">welcome to HTML</title>
</head>
<body>
<title>表单示例</title>
<form action="01.html" method="get">
姓名：<input type="text" name="name" value="张三"/><br/>
手机号码：<input type="text" id="text1" name="phone" value="1234567890"/><br/>
密码：<input type="password" id="text2" name="password" value="***********"/><br/>
性别：<input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女<br/>
兴趣爱好：<input type="checkbox" checked="checked"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球<br/>
生日:<select name="year">
<option value="0">请输入年份</option>
<option value="1990" selected="selected">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<select name="month" >
<option value="0">请输入月份</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select name="day" >
<option value="0">请输入天</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br/>
自我评价：<textarea cols="20" rows="2"></textarea>
<br/>
<input type="submit" value="提交"/>
<input type="reset" value="重置信息">
</form>
</body>
</html>得到如下网页：
4.表单整齐化
之前讲过表格标签，表格看上去就比较整齐，所以在表单标签中引入表格标签，然后把表单元素作为表格的每个单元格的元素，那么整体布局就会比较整齐。代码如下所示：
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title size="10" color="red">welcome to HTML</title>
</head>
<body>
<title>表单示例</title>
<form action="01.html" method="get" id="f1">
<table width="100%">
<center>
<tr>
<td align="right">姓名：</td>
<td><input type="text" name="name" value="张三"/></td>
</tr>
<br/>
<tr>
<td align="right">手机号码：</td>
<td ><input type="text" id="text1" name="phone" value="1234567890"/></td>
</tr>
<br/>
<tr>
<td align="right">密码：</td>
<td><input type="password" id="text2" name="password" value="***********"/></td>
</tr>
<br/>
<tr>
<td align="right">性别：</td>
<td><input type="radio" id="text3" name="sex" checked="checked"/>男<input type="radio" id="text4" name="sex" />女</td>
</tr>
<br/>
<tr>
<td align="right">兴趣爱好：</td>
<td><input type="checkbox" checked="checked"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>乒乓球<input type="checkbox"/>羽毛球</td>
</tr>
<br/>
<tr>
<td align="right">生日:</td>
<td><select name="year">
<option value="0">请输入年份</option>
<option value="1990" selected="selected">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
</select>
<select name="month" >
<option value="0">请输入月份</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select name="day" >
<option value="0">请输入天</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select></td>
<tr>
<br/>
<tr>
<td align="right">自我评价：</td>
<td><textarea cols="20" rows="2"></textarea></td>
<tr>
<br/>
<tr>
<td align="right"><input type="submit" value="提交"/></td>
<td><input type="reset" value="重置信息"></td>
</tr>
</center>
</table>
</form>
</body>
</html>页面布局如下所示：
很明显，在表单标签中添加了表格标签后，将左右两边的布局划分的较之前的整齐。
扫一扫
7242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
