form表单实现用户注册界面

原创 2015年11月19日 14:25:58

<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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

HTML5 - 用户注册表单

用户注册

表单验证(登录/注册)

登录,注册是我们使用的较多的表单认证,每个项目都从头开始写,显然是没有必要的。下面和大家分享下我所写的表单验证: 下面的代码,会附上完整代码,使用的过程中,只需要根据自己的项目进行简单的修改即可,非常...

JQuery实现的登陆注册页面表单

一个用JQuery实现非常友好的登陆注册界面表单,可以学习一下,附上代码:需要引入JQuery库jquery-2.1.1.min.js ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

网站注册页面Demo及表单验证功能源码

页面的构建简单地应用了bootstrap,通过js代码实现了注册表单的验证功能。代码如下: 用户注册 ...

完成一个较为完整的用户注册页面

实验目的: 要求能够熟练掌握javascript的一系列知识要点,并能够熟练的应用到实际项目中,能够通过javascript语法、对象、事件、函数等来完成页面上的脚本代码。 实验内容: 要求: 完成一...

HTML用户注册界面的实现

该代码实现用户注册信息 1.验证用户名是否合法 2.验证密码是否符合规则 3.验证两次输入密码是否一致 4.如果以上都通过,提交该表单 实现后界面图 代码下载 代码: ...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

创建web表单用户注册页面

html> html lang="en"> head> meta http-equiv="Content-Type" content="text/html" charset="UTF-8">...

简单制作用户注册表单

表单概述:        表单主要用于收集网页浏览者的相关信息,其标签为,表单的基本格式语法如下:                        其中,action="url"指定处理提交表单...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:form表单实现用户注册界面
举报原因:
原因补充:

(最多只允许输入30个字)