form表单实现用户注册界面
2015-11-19 00:00
711 查看
<input type="元素名称"/>
button: 普通按钮 value=“按钮的文字” js/jquery代码
checkbox 复选框 checked=“checked”默认选中
file 上传控件
hidden 隐藏域 value=“值” 和php脚本程序交互
image 图片提交按钮 src=“图片路径”图片形态
<form> action=“处理页面” method=“post/get”
submit 和图片提交按钮image功能一样 按钮形态
password 密码框
radio 单选框 排他效果 name=“相同”
text 文本框
reset 重置 把所有表单元素还原成默认状态
value=“按钮上的文字”
<texteara cols=“文本列数” row=“文本行数”> 没有滚动条cols+2
代码部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<table border="2px" bordercolor="#FF0000" width="800px" height="700px" align="center">
<tr>
<td valign="top">
<table align="center" border="0px" width="750px">
<tr height="40px" valign="bottom">
<td width="120pxS" align="center"><strong style="font-size:12px">个人资料：</strong></td>
<td style="font-size:12px; color:#666"><a style="color:#F00">*</a> 为必填项</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
</table>
<table align="center" border="0px" width="650px">
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>验证码：</td>
<td><input type="text"></td>
<td style="width:40px"><img src="1.png"</td>
<td style="font-size:12px; color:#666">点击切换</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>手机号码：</td>
<td width="60pxpx"><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多11个字符，例如：13812345678</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>电子邮箱：</td>
<td width="60pxpx"><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">此邮箱用来确认你的身份</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>设置密码：</td>
<td width="60pxpx"><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">长度为6-20个字符之间</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>重置密码：</td>
<td width="60px"><input type="text"></td>
<td colspan="2" style="font-size:12px"></td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>姓 名：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">请输入真实姓名，最多10个字符</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>昵 称：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">请输入昵称，最多30个字符</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>性 别：</td>
<td colspan="3" style="font-size:12px"><input type="radio" name="us">男<input type="radio" name="us">女</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>所在地：</td>
<td colspan="3">
<select style="width:150px">
<option selected>请选择（省）</option>
<option>广东省</option>
</select>
<select>
<option selected>请选择（市）</option>
<option>广州市</option>
</select>
</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>固定电话：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多12个字符，例如：02012345678</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>传 真：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多12个字符，例如：02012345678</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>地 址：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">请填写正确的地址</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>邮政编码：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多6个字符，例如：123456</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>服务条款：</td>
<td colspan="3">
<textarea cols="60" rows="8"></textarea>
</td>
</tr>
<tr>
<td colspan="4" style="font-size:12px" align="center"><a style="color:#F00">点击线面“我接受”按钮，即表示您同意上面的服务条款和隐私政策</a></td>
</tr>
<tr>
<td colspan="4" style="font-size:12px" align="center"><a style="color:#F00">提醒：您是否已详细阅读并同意关于服务条款？同意，请点击下满：</a></td>
</tr>
<td colspan="4" align="center"><input type="submit" value="我接受，创建我的用户"></td>
</tr>
</table>
</td>
</table>
</body>
</html>
button: 普通按钮 value=“按钮的文字” js/jquery代码
checkbox 复选框 checked=“checked”默认选中
file 上传控件
hidden 隐藏域 value=“值” 和php脚本程序交互
image 图片提交按钮 src=“图片路径”图片形态
<form> action=“处理页面” method=“post/get”
submit 和图片提交按钮image功能一样 按钮形态
password 密码框
radio 单选框 排他效果 name=“相同”
text 文本框
reset 重置 把所有表单元素还原成默认状态
value=“按钮上的文字”
<texteara cols=“文本列数” row=“文本行数”> 没有滚动条cols+2
代码部分：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<table border="2px" bordercolor="#FF0000" width="800px" height="700px" align="center">
<tr>
<td valign="top">
<table align="center" border="0px" width="750px">
<tr height="40px" valign="bottom">
<td width="120pxS" align="center"><strong style="font-size:12px">个人资料：</strong></td>
<td style="font-size:12px; color:#666"><a style="color:#F00">*</a> 为必填项</td>
</tr>
<tr>
<td colspan="2"><hr></td>
</tr>
</table>
<table align="center" border="0px" width="650px">
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>验证码：</td>
<td><input type="text"></td>
<td style="width:40px"><img src="1.png"</td>
<td style="font-size:12px; color:#666">点击切换</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>手机号码：</td>
<td width="60pxpx"><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多11个字符，例如：13812345678</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>电子邮箱：</td>
<td width="60pxpx"><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">此邮箱用来确认你的身份</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>设置密码：</td>
<td width="60pxpx"><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">长度为6-20个字符之间</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>重置密码：</td>
<td width="60px"><input type="text"></td>
<td colspan="2" style="font-size:12px"></td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>姓 名：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">请输入真实姓名，最多10个字符</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>昵 称：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">请输入昵称，最多30个字符</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>性 别：</td>
<td colspan="3" style="font-size:12px"><input type="radio" name="us">男<input type="radio" name="us">女</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>所在地：</td>
<td colspan="3">
<select style="width:150px">
<option selected>请选择（省）</option>
<option>广东省</option>
</select>
<select>
<option selected>请选择（市）</option>
<option>广州市</option>
</select>
</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>固定电话：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多12个字符，例如：02012345678</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>传 真：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多12个字符，例如：02012345678</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>地 址：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">请填写正确的地址</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>邮政编码：</td>
<td><input type="text"></td>
<td colspan="2" style="font-size:12px; color:#666">最多6个字符，例如：123456</td>
</tr>
<tr>
<td align="right" style="font-size:12px; width:80px"><a style="color:#F00">*</a>服务条款：</td>
<td colspan="3">
<textarea cols="60" rows="8"></textarea>
</td>
</tr>
<tr>
<td colspan="4" style="font-size:12px" align="center"><a style="color:#F00">点击线面“我接受”按钮，即表示您同意上面的服务条款和隐私政策</a></td>
</tr>
<tr>
<td colspan="4" style="font-size:12px" align="center"><a style="color:#F00">提醒：您是否已详细阅读并同意关于服务条款？同意，请点击下满：</a></td>
</tr>
<td colspan="4" align="center"><input type="submit" value="我接受，创建我的用户"></td>
</tr>
</table>
</td>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- saltstack 基础
- saltstack SLS
- 玩转微信2次开发2_微信支付开发_处理响应（微擎版）
- 互联网中介还能撑多久：大批裁员 业绩造假
- Java Web开发环境配置
- Maple助力理论到应用部署
- The G1 Garbage Collector
- scala中until方法
- scala版本99乘法表
- scala中for循环（二）
- byteUtils分享
- Android 开发之学习官方文档中的PackageManager记录
- Android下横竖屏切换的处理
- 若水工作室之Android从零开始学开发教程
- JSON 官网中文
- java中volatile 关键字
- laravel git上传问题 php升级 nginx修改
- ZooKeeper服务端单机版 ZooKeeperServer初始化源码分析
- AutoCompleteTextView组件的功能和用法
- Android的TabHost组件的功能和用法