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>
