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

HTML表单练习~百度注册

2015-09-11 23:07 651 查看

界面的展示：

1、建一个整体表单，表单里再建一个表格。
2、用户名后面是文本字段（type="text"）,密码后面为密码框（type="password"）,性别为单选按钮（type="radio" checked="checked"为已默认选了一个），同时激活百度空间前为多选按钮（type="checkbox"），总则放入文本域中（textarea）。
3、

此信息内容为图片的插入。注意表格的应用可以使图片可以设置为靠左显示。
4、表单可以通过提交按钮进行数据搜集送到服务器进行处理。
5、总体注意内部表格的设计，使最终显示效果比较匀称、美观。
6、具体代码实现：

<!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>
<form id="form1" name="form1" method="post" action="">
<table  width="200" align="center">
<tr>
<td><img src="images/bdlogo.png" width="200" height="40" /></td>
<td colspan="3" bgcolor="#33FFFF"> 用户注册 </td>
</tr>
<tr>
<td align="right" colspan="4"> <img src="images/i1.gif" />填写用户信息 </td>
</tr>
<tr>
<td>  用户名：     <input type="text" name="userName" value="" size="" maxlength="14" /></td>
<td colspan="3"> 不超过7个汉字，或14个字节（数字、字母或下划线） </td>
</tr>

<tr>
<td> 密码：         <input type="password" min="6" maxlength="14" /></td>
<td colspan="3" width="104">最少6个字符，不超过14个字符</td>
</tr>

<tr>
<td colspan="4"> 确认密码：  <input type="password" min="6" maxlength="14" /></td>
</tr>

<tr>
<td colspan="4">性别:              
<input name="gen" type="radio" value="男"  checked="checked" />男
<input name="gen" type="radio" value="女"  checked="checked" />女
</td>
</tr>

<tr>
<td colspan="4">个人爱好：    
<input type="checkbox" name="interest" value="fild" />文件
<input type="checkbox" name="interest" value="film"/>影视
<input type="checkbox" name="interest" value="music"/>音乐
<input type="checkbox" name="interest" value=""/>体育
</td>
</tr>

<tr>
<td colspan="4">出生日期：    
<select name="年" >
<option  value="name" selected="selected">1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>
年
<select name="月" >
<option  value="name">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>月
<select name="日" >
<option  value="name">dd</option>
<option>ff</option>
<option>f</option>
<option>f</option>
</select>日
</td>
</tr>

<tr>
<td colspan="3">家庭住址：    
<input type="text"/>
<td width="150" nowrap="nowrap"> *请输入详细的家庭住址 </td>
</td>
</tr>
<tr>
<td colspan="3"> 电子邮件：    
<input type="text"/>
<td> *请输入有效的电子邮件 </td>
</td>
</tr>

<tr>
<td colspan="4">
<input type="checkbox" name="" value="" />同时激活百度空间，展现精彩的自我
</td>
</tr>

<tr>
<td>
<input type="button" name="butButton" value="同意以下协议并提交"/>
</td>
<td colspan="3">
<input type="reset" name="butReset" value="重置"/>
</td>
</tr>

<tr>
<td colspan="4">
<textarea name="showText" cols="120" rows="10">
一、总则
1　用户应当同意本协议的条款并按照页面上的提示完成全部的注册程序。用户在进行注册程序过程中点击"同意"按钮即表示用户与百度公司达成协议，完全接受本协议项下的全部条款。
2　用户注册成功后，百度将给予每个用户一个用户帐号及相应的密码，该用户帐号和密码由用户负责保管；用户应当对以其用户帐号进行的所有活动和事件负法律责任。
3　用户可以使用百度各个频道单项服务，当用户使用百度各单项服务时，用户的使用行为视为其对该单项服务的服务条款以及百度在该单项服务中发出的各类公告的同意。
4　百度会员服务协议以及各个频道单项服务条款和公告可由百度公司随时更新，且无需另行通知。您在使用相关服务时,应关注并遵守其所适用的相关条款。
您在使用百度提供的各项服务之前，应仔细阅读本服务协议。如您不同意本服务协议及/或随时对其的修改，您可以主动取消百度提供的服务；您一旦使用百度服务，即视为您已了解并完全同意本服务协议各项内容，包括百度对服务协议随时所做的任何修改，并成为百度用户。
二、注册信息和隐私保护
1　百度帐号（即百度用户ID）的所有权归百度，用户完成注册申请手续后，获得百度帐号的使用权。用户应提供及时、详尽及准确的个人资料，并不断更新注册资料，符合及时、详尽准确的要求。所有原始键入的资料将引用为注册资料。如果因注册信息不真实而引起的问题，并对问题发生所带来的后果，百度不负任何责任。
2　用户不应将其帐号、密码转让、出售或出借予他人使用，如果百度发现使用者并非帐号注册者本人，百度有权停止继续服务。如用户发现其帐号遭他人非法使用，应立即通知百度。因黑客行为或用户违反本协议规定导致帐号、密码遭他人非法使用的，由用户本人承担因此导致的损失和一切法律责任，百度不承担任何责任。
3　百度的隐私权保护声明说明了百度如何收集和使用用户信息。您保证已经充分了解并同意百度可以据此处理用户信息。请点击链接查看：http://www.baidu.com/duty/yinsiquan.html。
</textarea>
</td>
</tr>
</table>
</form>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航