HTML高级标签（3）————表单的应用

来源：互联网发布：java密码的正则表达式编辑：程序博客网时间：2024/05/21 10:46

在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属性就不多讲了。

看看运行后的样子：

字数超过文本框大小时，会自动添加滚动条。

好了，常用的也就是这些了，大家共同学习进步。

3 0