首页 > 代码库 > HTML高级标签（3）————表单的应用
HTML高级标签（3）————表单的应用
在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=http://www.mamicode.com/"username">><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=http://www.mamicode.com/"ucai.png"><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>就是非常easy，一个<testarea></textarea>搞定了。cols和rows属性就不多讲了。看看执行后的样子：
字数超过文本框大小时，会自己主动加入滚动栏。
好了，经常使用的也就是这些了，大家共同学习进步。
HTML高级标签（3）————表单的应用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。