表格、表单练习

一：邮箱页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body background="jianbian.jpg">
<form>
<table border="0" cellpadding="0" cellspacing="0" width="600" height="480">
<tr>
<td><b>邮箱：</b></td>
<td colspan="2"><input type="text" /></td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="2"><font color="#333333">需要通过邮箱激活账户，不支持sohu，21.cn，sogou的邮箱</font></td>
</tr>
<tr></tr>
<tr>
<td><b>登录用户名：</b></td>
<td colspan="2"><input type="text" /></td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="2"><font color="#333333">仅在登录时使用，字符数不少于4个</font></td>
</tr>
<tr></tr>
<tr>
<td><b>显示名称：</b></td>
<td colspan="2"><input type="text" /></td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="2"><font color="#333333">即昵称字符不少2个</font></td>
</tr>
<tr></tr>
<tr>
<td><b>密码：</b></td>
<td colspan="2"><input type="password" /></td>
</tr>
<tr></tr>
<tr>
<td><b>确认密码：</b></td>
<td colspan="2"><input type="password" /></td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="2"><font color="#333333">至少8位，必须包含字母、特殊符号、数字</font></td>
</tr>
<tr></tr>
<tr>
<td><b>性别：</b></td>
<td>
<select size="1">
<option value="1">男</option>
<option value="2">女</option>
</select>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<input type="checkbox" checked="checked" />男
<input type="checkbox" checked="checked" />女
</td>
<td>
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" checked="checked" />女
</td>
</tr>
<tr></tr>
<tr>
<td><b>喜好：</b></td>
<td colspan="2">下拉：
<select size="1">
<option value="1">看书</option>
<option value="2">爬山</option>
<option value="3">听音乐</option>
<option value="4">上网</option>
<option value="5">购物</option>
</select>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp多选：
<input type="checkbox" checked="checked" />看书
<input type="checkbox" checked="checked" />爬山
<input type="checkbox" checked="checked" />听音乐
<input type="checkbox" checked="checked" />上网
<input type="checkbox" checked="checked" />购物
</td>
</tr>
<tr></tr>
<tr>
<td></td>
<td colspan="2">
<a href="http://home.cnblogs.com/">
<input type="submit" /></a><font color="#FF0000">设value值可以改按钮的名字</font>
<a href="http://home.cnblogs.com/" target="_blank">
<input type="submit" value="注册" />
</a>
</td>
</tr>
<tr>
<td></td>
<td colspan="2"><input type="reset" /><font color="#FF0000">form可写可不写，但是在有重置（reset）时必须有form</font></td>
</tr>
</table>
</form>
</body>
</html>

二、QQ注册界面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="340" height="1000" >
<tr height="318">
<td colspan="4"><img src="捕获.PNG" /></td>
</tr>
<tr>
<td width="67" ></td>
<td width="103" align="center" background="捕获4.PNG">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册账号</td>
<td width="103" background="捕获4.PNG"></td>
<td width="67"></td>
</tr>
<tr>
<td></td>
<td align="right" background="捕获4.PNG">昵称</td>
<td background="捕获4.PNG"><input type="text" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" background="捕获4.PNG">密码</td>
<td background="捕获4.PNG"><input type="password" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" background="捕获4.PNG">确认密码</td>
<td background="捕获4.PNG"><input type="password" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" background="捕获4.PNG" >性别</td>
<td background="捕获4.PNG">
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" checked="checked" />女
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" background="捕获4.PNG">生日</td>
<td background="捕获4.PNG">
<select size="1">
<option value="1">公历</option>
<option value="2">阴历</option>
</select>
<select size="1">
<option value="1">年</option>
<option value="2">1986年</option>
<option value="3">1987年</option>
<option value="4">1988年</option>
<option value="5">1989年</option>
<option value="6">1990年</option>
<option value="7">1991年</option>
<option value="8">1992年</option>
</select>
<select size="1">
<option value="1">月</option>
<option value="2">1月</option>
<option value="3">2月</option>
<option value="4">3月</option>
<option value="5">4月</option>
<option value="6">5月</option>
<option value="7">6月</option>
<option value="8">7月</option>
</select>
<select size="1">
<option value="1">日</option>
<option value="2">1日</option>
<option value="3">2日</option>
<option value="4">3日</option>
<option value="5">4日</option>
<option value="6">5日</option>
<option value="7">6日</option>
<option value="8">7日</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" background="捕获4.PNG">所在地</td>
<td background="捕获4.PNG">
<select size="1">
<option value="1">国家</option>
<option value="2">中国</option>
<option value="3">英国</option>
</select>
<select size="1">
<option value="1">省</option>
<option value="2">山东</option>
<option value="3">西东</option>
<option value="4">湖南</option>
<option value="5">湖北</option>
<option value="6">江苏</option>
<option value="7">浙江</option>
</select>
<select size="1">
<option value="1">市</option>
<option value="2">淄博</option>
<option value="3">烟台</option>
<option value="4">青岛</option>
<option value="5">济南</option>
<option value="6">潍坊</option>
<option value="7">威海</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td align="right" background="捕获4.PNG">手机号码</td>
<td background="捕获4.PNG"><input type="text" /></td>
<td></td>
</tr>
<tr>
<td></td>
<td background="捕获4.PNG"></td>
<td background="捕获4.PNG">可通过该手机号码快速找回密码</td>
<td></td>
</tr>
<tr>
<td></td>
<td background="捕获4.PNG"></td>
<td background="捕获4.PNG">中国大陆地区以外的手机号码&nbsp;&nbsp;&nbsp;&nbsp;
<a href="http://home.cnblogs.com/">点击这里</a>
<td></td>
</td>
</tr>
<tr>
<td></td>
<td background="捕获4.PNG"></td>
<td background="捕获4.PNG">
<input type="submit" value="立即注册" />
</td>
<td></td>
</tr>
<tr>
<td></td>
<td background="捕获4.PNG"></td>
<td background="捕获4.PNG"><input type="checkbox" checked="checked" />同时开通QQ空间</td>
<td></td>
</tr>
<tr>
<td></td>
<td background="捕获4.PNG"></td>
<td background="捕获4.PNG"><input type="checkbox" checked="checked" />我已阅读并同意相关服务条款和隐私政策</td>
<td></td>
</tr>
<tr height="10"></tr>
<tr height="10"></tr>
<tr height="10"></tr>
</table>
</body>
</html>

时间： 2024-10-12 16:15:30

表格、表单练习的相关文章

Bootstrap框架(基础篇)之列表,表格,表单

继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootst

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能: # 文档类型 <!DOCTYPE html> <html lang="zh-cn">     <!-- Html Code --> </html> 说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性. # 移动先行 <meta name="viewport" content="width=device-width, initi

表格 表单总结

HTML表格table <table>标签表示这是一个表格,构成元素有<tr>.<td>.<th> HTML表单 **form** <form>标签表示这是一个表单,它的属性有action. method,action表示提交到的地址, method表示提交的方式,有post和get **input** <input>标签表示输入控件,它的属性有type,type的有: text 表示文本框 radio 表示单选框 checkbox

CSS3-animation，表格表单的格式化

animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes  fadeIn(animationName) from{ } 50%{ } to{ } /*from起始关键帧,to结束关键帧,也可以用0%,100%分别表示起始与结束*/ oparity的值为0表示不可见,为1的时候表示完全可见 3.在元素中应用: .b{ animation-name:fadeIn: ani

【2】HTML表格表单

单元格中数据的对齐方式 Align = left Align = center Align = right Valign = top Valign = middle Valign = bottom 合并单元格 水平合并在 或 标记中使用 COLSPAN 属性,可以设置单元格所跨的列数,例如COLSPAN=3表示跨3列. 垂直合并在 或 标记中使用 ROWSPAN 属性,可以设置单元格所跨的行数,例如ROWSPAN=3表示跨3行. 表格总结 表格的基本结构 表格标记table的属性 border/

表格表单及样式重置、特性

1.表格 用table标签,标签 table的标签基本特性是 display:table; <thead> 表格头部 <tbody> 表格主体 <tfoot> 表格尾部 <tr>行 <th>表格标题 <td>单元格 一般只用<tbody> colspan 属性规定单元格可横跨的列数 只能放在th,td标签中<th colspan='2'> rowspan 属性规定单元格可横跨的行数 只能放在td标签中<t

DOM针对表格表单以及CSS

1.表格操作(只针对表格) -创建 tableElement.insertRow(position) - 新增一行 rowElement.insertCell(position) - 新增一个单元格 (这里需要注意的是:position从0开始) -删除 tableElement.deleteRow(position) rowElement.deleteCell(position) -访问 tableElement.rows - 表格中的行 rowElement.cells - 行中的列2.表单

PHP基础 表格 表单控件初涉 还有图像热点

今天说了挺杂的,导图全都是文字 表格主要是跨行和跨列 表单控件是重点,后期js还要用到 今天的作业是注册页面效果(纯效果无JS),还有做了一个表格 在线效果展现:http://bbqwifi.info/homework/index.html

html表格表单标签的结合

今天我尝试将表格表单基本标签结合起来放在网页中,发现再没用表单元素中<form></form>时各类标签功能都可显示,只是不能提交网页,所有与提交网页的标签都不能使用提交功能,而且按钮类的功能都不能实现,其他的可以使用 <td height="300"> 输入用户名<input type="text" name="1" value=""/><br /> 输入密码<