在HTML开发中,标签的种类和数量很多,不可能说每一种都研究透。很多可以用CSS来控制的标签,我们基本没有必要在上面浪费时间。所以,我们只要掌握在HTML开发中比较常用的标签就完全可以了。
首先,先写一个最简单的登录表单。
<html>
<head>
<title>表单的应用</title>
</head>
<body>
<table border="1" width="500" align="center">
<form name="frm" action="login.php">
<caption>表单的应用</caption>
<tr>
<th>文本域(<u>U</u>)</th>
<td>
<input type="text" name="username" value="username">
</td>
</tr>
<tr>
<th>密码域</th>
<td>
<input type="password" name="password" value="password">
</td>
</tr>
<span style="white-space:pre"> </span><tr>
<span style="white-space:pre"> </span><td colspan="2" align="center">
<span style="white-space:pre"> </span><input type="submit" name="sub">
<span style="white-space:pre"> </span><input type="reset">
<span style="white-space:pre"> </span><input type="image" src="ucai.png"><span style="white-space:pre"> </span><!--这是添加相对路径的一张照片-->
<span style="white-space:pre"> </span></td>
<span style="white-space:pre"> </span></tr>
<span style="white-space:pre"> </span></form>
<span style="white-space:pre"> </span></table>
<span style="white-space:pre"> </span></body>
</html>
这是程序运行后的结果:(图片只是我随意截取的一个logo,绝不是打广告)
一个简单的表单就完成了,注意<form>标签应该放在<table>里面,添加其他字段元素时,也应该遵循这个方式。
接下来,再添加一个单选框和复选框。
<tr>
<th>复选框</th>
<td>
game<input type="checkbox">
movie<input type="checkbox">
travel<input type="checkbox">
reading<input type="checkbox">
writing<input type="checkbox">
</td>
</tr>
<tr>
<th>单选框</th>
<td>
<input type="radio" name="sex" checked>boy
<input type="radio" name="sex">girl
<input type="radio" name="sex">secret
</td>
</tr>
复选框的type="checkbox",单选框的type="radio".
然而,复选框可一全部选择,也可以都不选择。单选框则必须有一个选择的,所以要加上一个默认项,也就在后面添加一个checked。还有,单选框中的选项都是以互斥的方式存在的,所有将他们相当于放在一个数组中一样,也就是命名都一样的话,就可以保证他们的互斥性。要不然,就一个都选不了。
这是运行后的结果:
表单中少不了的肯定有列表,下面再介绍几种常用的列表:普通列表,下拉列表,多选列表。
<th>下拉列表</th>
<td>
<select name="list">
<option>--请选择--</option>
<option>111111</option>
<option selected>222222</option><span style="white-space:pre"> </span><!--默认选项-->
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
<tr>
<th>普通列表</th>
<td>
<select name="list1" size="4"><span style="white-space:pre"> </span><!--下拉长度为4-->
<option>--请选择--</option>
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
<tr>
<th>多选列表</th>
<td>
<select name="list2" multiple><span style="white-space:pre"> </span><!--multiple表示为多选列表-->
<option>--请选择--</option>
<option>111111</option>
<option>222222</option>
<option>333333</option>
<option>444444</option>
<option>555555</option>
<option>666666</option>
<option>777777</option>
<option>888888</option>
</select>
</td>
</tr>
标签的内外关系不要搞混了。
运行结果:
最后,再写一个多行文本域。在很多需要描述的地方,多行文本域就派上用场了。
<tr>
<th>多行文本域</th>
<td>
<textarea cols="20" rows="10" name="message">typing your message here</textarea>
</td>
</tr>
就是很简单,一个<testarea></textarea>搞定了。cols和rows属性就不多讲了。
看看运行后的样子:
字数超过文本框大小时,会自动添加滚动条。
好了,常用的也就是这些了,大家共同学习进步。