form表单，百度注册

作者: 隔壁小犊子i | 来源:发表于2017-09-03 22:10 被阅读0次

form表单，百度注册
表单
表单
27.html 表单的基础使用
表单
浮动的label
HTML 表单的使用
关于vue v-decorator
利用HTML表单标签编写一个注册页面
bootstrap表单

相当于一个控件集合，里面包含很多控件，点“提交”后会把表单中的所有控件的值都传给action到的页面，form里有一个method属性，method有两个属性，分别是 “post” 和 “get”，当我们用post时，会隐藏表单中的所有值，当method属性为 “get”时，可以查看到值，也就是所有值。

废话不多说，弄一个例子给大家看看。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>百度注册</title>
    
        <style type="text/css">
            
            *{
                margin: 0;
                padding: 0;
            }
            .clearfix:after{
                content: '';
                display: block;
                clear: both;
            }
            .clearfix{
                zoom: 1;
            }
            
            
            .box{
                width: 440px;
            }
            .box form{
                width: 100%;
            }
            .form-item{
                
                margin-bottom: 22px;
            }
            .form-item .title{
                width: 80px;
                font-size: 14px;
                color: #666;
                line-height: 40px;
                padding-right: 10px;
                text-align: right;
                float: left;
            }
            .form-item .inp{
                width: 350px;
                height: 40px;
                float: right;
            }
            .form-item .inp input{
                width: 100%;
                height: 100%;
                padding-left: 10px;
                font-size: 13px;
                color: #757575;
            }
            .form-item .inp input.read-inp{
                width: 10px;
                height: 10px;
            }
            .form-item .inp span{
                font-size: 12px;
                color: #666;
            }
            /*.read-content .title{
                height: 15px;
            }
            .read-content .inp{
                height: 15px;
            }*/
            .read-content{
                height: 15px;
            }
            .form-item .inp a{
                color: #1b66c7;
                text-decoration: none;
            }
            .form-item .inp .register-btn{
                width: 350px;
                height: 50px;
                border: none;
                border-radius: 2px;
                background: #3f89ec;
                color: #fff;
            }
        </style>
    
</head>
<body>
    <div class="box">
        <form action="" method="post">
            <div class="form-item clearfix">
                <!-- 用户名  -->
                <div class="title">
                    <label for="username">
                        用户名
                    </label>
                </div>
                <div class="inp">
                    <input type="text" name="username" id="username" value="" placeholder="请设置用户名" />
                </div>
            </div>
            
            <!-- 手机号 -->
            <div class="form-item clearfix">
                <div class="title">
                    <label for="number">
                        手机号
                    </label>
                </div>
                <div class="inp">
                    <input type="text" name="number" id="number" value="" placeholder="可用于登录和找回密码" />
                </div>
            </div>
            
            <!-- 验证码 -->
            <div class="form-item clearfix">
                <div class="title">
                    <label for="checkcode">
                        验证码
                    </label>
                </div>
                <div class="inp">
                    <input type="text" name="checkcode" id="checkcode" value="" placeholder="请输入验证码"/>
                </div>
            </div>
            
            <!-- 密码 -->
            <div class="form-item clearfix">
                <div class="title">
                    <label for="password">
                        密码
                    </label>
                </div>
                <div class="inp">
                    <input type="text" name="password" id="password" value="" placeholder="请设置登录密码"/>
                </div>
            </div>
            
            <!-- 用户协议 -->
            <div class="form-item clearfix read-content">
                <div class="title"></div>
                <div class="inp">
                    <input type="checkbox" name="read" id="read" value="" class="read-inp" />
                    <span>
                        阅读并接受<a href="#">《百度用户协议》</a>及<a href="#">《百度隐私权保护声明》</a>
                    </span>
                </div>
            </div>
            
            <!-- 注册按钮 -->
            <div class="form-item clearfix btn">
                <div class="title"></div>
                <div class="inp">
                    <input type="button" name="btn" id="btn" value="注册" class="register-btn" />
                </div>
            </div>
        </form>
    </div>
</body>
</html>

百度注册.jpg