table的简单使用
<table>
<caption>表格标题</caption>
<tr>
<th>列名一</th>
<th>列名二</th>
</tr>
<tr>
<td>数据一</td>
<td>数据二</td>
</tr>
</table>
效果如下
我们可以给table加上一些属性,边框和宽度和高度
<table width="100%" border="1">
<caption>表格标题</caption>
<tr>
<th width="32%" height="120">列名一</th>
<th>列名二</th>
</tr>
<tr>
<td>数据一</td>
<td>数据二</td>
</tr>
</table>
效果如下
form的简单使用
form标签用于为用户输入创建 HTML 表单。
由文本框、密码框、多行文本框、单选、复选框、下拉菜单/列表、按钮、文件域、隐藏域等各种表单元素及其标记组成的。
表单用于向服务器传输数据。
<form name="表单名" method="提交方法" action="处理程序">
<input type="text" name="文本字段名称" maxlength=" " size=" " value="文本域"> <br>
<input type="password" name="密码字段名称" size=" " maxlength=" " value="密码域" ><br >
<input type="radio" name=" " value="单选按钮" /><input type="radio" name=" " value=" " /><input type="radio" name=" " value=" " checked /><br >
<input type="checkbox" name=" " value="复选框" /><input type="checkbox" name=" " value=" " checked /><input type="checkbox" name=" " value=" " checked /><br >
<input type="submit" name=" " value="提交按钮"/><br>
<input type="reset" name=" " value="表单清空按钮"/><br>
<input type="image" src="./图像按钮.jpg"/><br>
<input type="file" name=" " size=" " maxlength=" "><br>
<input type="hidden" name=" " value="隐藏域" /><br>
<select name="" size="" multiple>
<option value="" selected>下拉列表1</option>
<option value="">下拉列表2</option>
<option value="">下拉列表3</option>
</select>
</form>
效果如下
table+form制作的登录表单
制作如上表单
<table border="1">
<form id="form1" name="form1" method="post" action=“hello.htm">
<tr >
<td colspan="3" >学生信息注册</td>
</tr>
<tr>
<th>姓名:</th>
<th><input type="text" name="文本字段名称" maxlength=" " size=" " value=" "></th>
<td width="80px"></td>
</tr>
<tr>
<th>性别:</th>
<th><input type="radio" name=" " value="单选按钮" />男<input type="radio" name=" " value="单选按钮" />女</th>
<td></td>
</tr>
<tr>
<th>出生日期:</th>
<th><input type="text" name="文本字段名称" maxlength=" " size=" " value=" ">按YY—MM—DD</th>
<td></td>
</tr>
<tr>
<th>学校:</th>
<th><input type="text" name="文本字段名称" maxlength=" " size=" " value=" "></th>
<td></td>
</tr>
<tr>
<th>专业</th>
<th>
<select name="" size="" multiple>
<option value="" selected>计算机科学与技术</option>
<option value="">软件工程</option>
<option value="">信息安全</option></th>
<td></td>
</select>
</tr>
<tr>
<th>体育特长</th>
<th><input type="checkbox" name=" " value="复选框" />篮球<input type="checkbox" name=" " value="复选框" />排球<input type="checkbox" name=" " value="复选框" />足球<input type="checkbox" name=" " value="复选框" />游泳</th>
<td></td>
</tr>
<tr>
<th>上传照片</th>
<th><input type="file" name=" " size=" " maxlength=" "></th>
<td></td>
</tr>
<tr>
<th>密码:</th>
<th><input type="password" name="密码字段名称" size=" " maxlength=" " value="密码域" ></th>
<td></td>
</tr>
<tr>
<th>个人介绍</th>
<th height="100px"><input style="width: 280px;height: 90px;" type="text" name="文本字段名称" maxlength=" " value=" "></th>
<td></td>
</tr>
</form>
</table>