html注册栏网页练习代码

时间:2022-11-22 17:24:51

html

body>
    <form action="#" method="get">
        <div>
            <label for="yonghu">用户名<span> * </span></label>
            <input type="text" placeholder="" name="username" id="yonghu" required>
            <span>请使用邮箱的电子邮箱</span>
        </div>
        <div>
            <label for="mima">密码<span> * </span></label>
            <input type="password" placeholder="" name="pwd" id="mima" required>
            <span class="qiangdu">密码强度:
                <span>弱</span>
                <span>中</span>
                <span>强</span>
            </span>
        </div>
        <div>
            <label for="queren">确认密码<span> * </span></label>
            <input type="password" name="pwd" id="queren" required>
        </div>
        <div>
            <label for="mubiao">注册目标<span> * </span></label>
            <input type="radio" name="xiangmu" value="huiyuan" required checked> 会员 <span>(快速卖出或买进农产品)</span>
            <div>
                <input type="radio" name="xiangmu" value="nongyejingjiren"
                    required> 农业经纪人 <span>(为广大会员服务,促成农产品交易)</span>
            </div>
            <div>
                <input type="radio" name="xiangmu" value="qudaolianmeng" required> 渠道联盟 <span>(成为我们的合作伙伴)</span>
            </div>
            <div>
                <input type="radio" name="xiangmu" value="xinxiyuan" required> 信息员 <span>(采集发布热点农业信息)</span>
            </div>
            <div>备注:Lorem ipsum dolor si Consectetur, dolorum.</div>
        </div>
        <div>
            <label for="xingming">姓名<span> * </span></label>
            <input type="text" placeholder="" name="myname" id="xingming" required>
            <span>真实姓名(与身份证信息一致)</span>
        </div>
        <div>
            <label for="shouji">手机<span> * </span></label>
            <input type="text" placeholder="" name="mobile" maxlength="11" id="shouji" required>
            <span>真实姓名(与身份证信息一致)</span>
        </div>
        <div>
            所在区域<span> * </span>
            <select name="area" id="area" required>
                <option value="guojia">中国</option>
                <option value="tajike">塔吉克斯坦</option>
            </select>
            <select name="area1" id="area1" required>
                <option value="diqu">---地区---</option>
                <option value="meiguo">---美国---</option>
            </select>
            <span>选择所在的省/市</span>
        </div>
        <div>
            <label for="yanzhengma">验证码<span> *  </span></label>
            <input type="text" placeholder="" name="yanzheng" id="yanzhengma" required>
            <a href="#">看不清,换一张</a>
        </div>
        <div class="yidong">
            <button class="tijiao">同意以下条款并注册</button>
            <a href="#">登入</a><a href="#">找回密码</a>
        </div>
        <textarea name="" id="" cols="50" rows="5"></textarea>
    </form>
</body>
</html>
css
form {
    width: 800px;
    margin: auto;
}
form>div {
    margin: 10px 0;
}
label {
    font-size: 16px;
    font-weight: bold;
}
form>div>label {
    display: inline-block;
    width: 100px;
    text-align: right;
}
label>span:first-child {
    color: red;
}
div>span:last-of-type {
    font-size: 12px;
    color: cadetblue;
}
a {
    display: inline-block;
    text-decoration: none;
    margin: 0 10px;
}
form>div:nth-child(4)>div {
    margin-left: 104px;
}
form>div:nth-child(4)>div>span {
    display: inline-block;
    width: 300px;
    text-align: left;
}
.qiangdu>span {
    display: inline-block;   
    color: red;
    padding: 0 5px;
}
.qiangdu>span:nth-child(2) {
    color: black;
}
.qiangdu>span:last-child {
    color: green;
}
form>div:nth-child(7){
    margin-left:25px;
    font-size: 16px;
    font-weight: bold;
   
}
form>div:nth-child(7)>span:first-child{
   color: red;
  
}
.tijiao{
    display: inline-block;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    background-image: linear-gradient(orange);
}
.yidong{
    margin-left: 100px;
   
}
 
 

html注册栏网页练习代码的更多相关文章

  1. 用javascript实现禁止页面后退返回上一页的代码

    用javascript实现禁止页面后退返回上一页的代码:  有时候我们需要用户在点击了如下一步的按钮时,页面跳转到了下一个页面,这时想不允许用户返回后退到上一页,可以采用下面的方法:  在需要跳转的页 ...

  2. JSP注册登录页教程

    转载请标明原文地址:http://www.cnblogs.com/zhangyukof/p/6785258.html  一.准备工作 已搭建好的SSH框架工程一个,如果没有,请参考我的上一篇文章&lt ...

  3. Dubbo Multicast 注册中心即相关代码实现

    Dubbo 的 Multicast注册中心有下面特点: 不需要启动任何中心节点,只要广播地址一样,就可以互相发现 组播受网络结构限制,只适合小规模应用或开发阶段使用. 组播地址段: 224.0.0.0 ...

  4. MVC视图布局页常用代码

    1.在视图 Views 中新建文件夹  Shared 2.在 Shared 中新建布局页-母版页   _Layout.cshtml @{ Layout = null; } <!DOCTYPE h ...

  5. 使用事件注册器进行swoole代码封装

    在使用swoole的时候,事件回调很难维护与编写,写起来很乱.特别在封装一些代码的时候,使用这种注册,先注册用户自己定义的,然后注册些默认的事件函数. Server.php class Server ...

  6. PHP注册手机获取验证码代码

    php代码: <?php require dirname(__FILE__).'/include/common.inc.php';//这是在cms2008下面做的测试 header(" ...

  7. zf-分页后台代码

    java : public ResultPage getDeptList(int page, int pageRows) throws Exception { String hql="fro ...

  8. 132页Filter代码分析

    1.long before = System.currentTimeMillis(); long after = System.currrentTimeMillis(); 解析:这两段代码之间定义的是 ...

  9. PHPCMS登录后不是进入会员中心而是转入登录前页最新代码

    phpcms比如会员在登录前是停留在下载页面的,但是下载页面是要求会员登录后才能下载,所以会员就有这个登陆过程,但是一般的会员系统是登录进会员中心的,就会有点体验不好  这里教大家修改下 能达到登录后 ...

随机推荐

  1. WPF 中,如何使用自定义的resources

    第一步,先自己自定义一个Resources 1.新建一个xaml文件,在其中自定义好自己的Resources 这个Resource 的根节点是 <ResourceDictionary xmlns ...

  2. javascript和jquery动态创建html元素

    1.javascript创建元素 创建select var select = document.createElement("select");        elect.opti ...

  3. 【6】和作为连续序列s

    称号:输入一个整数s,并打印出所有s整数的连续序列(含有至少2的数量). 如输入9,输出2.3.4和4.5两个序列 方案一:因为序列至少要2个数,则两个数上限值为(1+s)/2,我们能够枚举该序列的起 ...

  4. &lbrack;ios2&rsqb; CABasicAnimation【转】

    caanimation 整理了解  http://geeklu.com/2012/09/animation-in-ios/ 几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABa ...

  5. python实现类jq的json路径过滤

    开发过程中访问接口时经常用到jq来过滤json,用着觉得不是很爽,于是自己搞一个舒服的 ^_^ 先说需求: 输入:参数1:被过滤对象(json.dict.list), 参数2:过滤路径 输出:过滤结果 ...

  6. TypeScript入门知识三(函数新特性)

    一,Rest and Spread操作符: 用来声明任意数量的方法参数也就是"..."操作符 输出结果: 18 jajj 89 function test (a, b, c) { ...

  7. WCF 配置App&period;Config

    <system.serviceModel> <bindings> <basicHttpBinding> <binding name="/> & ...

  8. 安装SourceTree工具,无需注册就可以正常使用SourceTree

    1. 下载SourceTree安装包 2. 双击安装包进行安装,默认会直接安装在系统盘,此时桌面就会SourceTree的快捷键 3. 双击打开桌面的SourceTree,就会提示让你安装授权,那么接 ...

  9. 解决vsftpd乱码

    不管是中文环境还是英文环境,需要改的地方如下: /etc/sysconfig/i18n 其内容改为: LANG="zh_CN.GB2312"SYSFONT="latarc ...

  10. 在ROS Kinetic和Gazebo 8中使用智能汽车仿真演示

    在ROS Kinetic和Gazebo 8中使用智能汽车仿真演示 智能车无人驾驶技术是目前人工智能和机器人技术的研究热点,有许多开源平台可以使我们零基础零成本入门无人驾驶技术.本文分享一下目前ROS官 ...