您的位置：首页 > Web前端 > HTML

HTML表单表格综合练习

2016-06-06 17:25 633 查看 
<!--html--文件声明，让浏览器知道这是HTML文件-->
<html>
<!--head--开头，提供文件整体资讯-->
<head>
<!--title--标题,定义文件标题，显示与浏览页面顶部-->
<title>QQ注册</title>
</head>
<!--body--本文，设计文件格式，显示本文内容-->
<body>
<!--fieldset--分组标签，显示分组边框-->
<fieldset>
<!--legend--分组标题，标题嵌入分组边框中-->
<legend>欢迎注册QQ账号</legend>
<!--form--表单标记  action--表单提交的目标  method：表单提交的方式，包括post，get-->
<form action="http://qzone.qq.com" method="post">
<!--table--表格标记  border--表格边框粗细  bordercolor--表格边框颜色  cellpadding--单元格填充  cellspacing--单元格间距 width--表格宽度-->
<table border="1" bordercolor="red" cellpadding="20" cellspacing="0" width="500">
<!--tr--表格行-->
<tr>
<!--td--表格列  align--单元格对齐方式   --空格-->
<td align="right">注册邮箱:  </td>
<!--text--表单类型，单行文本框  表单控件名称，方便脚本调用  表单宽度-->
<td><input type="text" name="email" size="20"></td>
</tr>
<tr>
<td></td>
<!--a--连接标记  href--超链接，下表示空链接-->
<td>你可以使用<a href="#">账号</a>注册或<a href="#">手机号</a>注册</td>
</tr>
<tr>
<td align="right">密码:  </td>
<!--password--密码框-->
<td><input type="password" name="psd" size="20"></td>
</tr>
<tr>
<td align="right">真实姓名:  </td>

4000
<td><input type="text" name="username" size="20"></td>
</tr>
<tr>
<td align="right">性别:  </td>
<!--radio--单选按钮  两个选项的name为同一值才能实现单选-->
<td><input type="radio" name="sex">男    <input type="radio" name="sex">女 </td>
</tr>
<tr>
<td align="right">出生年月:  </td>
<td>
<!--select--下拉列表-->
<select name="year">
<!--option--下拉列表选项-->
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
</select>年
<select name="month">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>月
<select name="day">
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
</select>日
</td>
</tr>
<tr>
<td align="right">爱好:  </td>
<td>
<!--checkbox--多选按钮-->
<input type="checkbox" name="hobby" >唱歌   
<input type="checkbox" name="hobby" >运动   
<input type="checkbox" name="hobby" checked>看书   
</td>
</tr>
<tr>
<td align="right">个性签名:  </td>
<!--textarea--多行文本框-->
<td><textarea name="signature" cols="20" rows="3">填写你的个性签名吧!</textarea></td>
</tr>
<tr>
<td></td>
<!--img--图形标记  src--图片路径-->
<td><img src="1.jpg" height="30" width="50"><a href="1.html" >看不清，换一张</a></td>
</tr>
<tr>
<td align="right">验证码:  </td>
<td><input type="text" name="yzm" size="20"></td>
</tr>
<tr>
<td></td>
<!--image--图片按钮 后接src，作用同submit按钮-->
<td><input type="image" src="2.gif" name="goto"></td>
</tr>
<tr>
<!--colspan--跨列，合并水平方向单元格-->
<td colspan="2" align="center">
<!--submit--提交按钮  value值显示在按钮上   reset--重置按钮，清空内容-->
<input type="submit" value="提交">      <input type="reset">
</td>
</tr>

</table>
</form>

</fieldset>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML 表格标记 表单标记
相关文章推荐
新的分享
章节导航