前端开发实用的表单

前端开发共享 百度云
百度前端开发绩效
前端开发百度文库
前端开发传智播客百度资源

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”Author” content=”aoliann” />
        <meta name=”Keywords” content=”表单” />
        <title>智能表单</title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            body {
                height: 700px;
                background: url(https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1504410220&di=e0b2de3a8f48aee8d9750e9536f7b573&src=http://d.hiphotos.baidu.com/zhidao/pic/item/0824ab18972bd4072ef527017e899e510fb3091f.jpg)
                    no-repeat center center;
                background-size: cover;
            }
            #box {
                position: fixed;
                top: 50%;
                left: 50%;
                width: 600px;
                height: 480px;
                padding: 30px 0px;
                background: rgba(0, 0, 0, 0.5);
                margin: -260px 0 0 -300px;
                border-radius: 10px;
            }
            #box form {
                height: 100%;
                width: 90%;
            }
            #box form div.list {
                width: 100%;
                line-height: 35px;
                margin: 20px 0;
                text-align: center;
            }
            #box form div.list span {
                display: block;
                float: left;
                width: 180px;
                height: 35px;
                line-height: 35px;
                color: #fff;
                text-align: right;
                font-size: 16px;
            }
            #box form div.list input {
                width: 280px;
                height: 35px;
                border: 0;
                padding: 0 10px;
            }
            #box form div.list input.sub {
                width: 140px;
                background: #5ab6df;
                color: #fff;
                margin-top: 20px;
                border-radius: 10px;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id=”box”>
            <form action=”https://www.baidu.com” method=”post”>
                <div class=”list”>
                    <span>姓名:</span>
                    <input
                        type=”text”
                        id=”txtName”
                        autofocus
                        required=”required”
                    />
                </div>
                <div class=”list”>
                    <span>电话:</span>
                    <input type=”tel” id=”txtTel” required=”required” />
                </div>
                <div class=”list”>
                    <span>年龄:</span>
                    <input type=”number” id=”txtAge” required=”required” />
                </div>
                <div class=”list”>
                    <span>邮箱:</span>
                    <input type=”email” id=”txtEmail” required=”required” />
                </div>
                <div class=”list”>
                    <span>网址:</span>
                    <input type=”url” id=”txtUrl” required=”required” />
                </div>
                <div class=”list”>
                    <span>出生日期:</span>
                    <input type=”date” id=”txtDate” required=”required” />
                </div>
                <div class=”list”>
                    <span>所在城市:</span>
                    <input
                        type=”text”
                        id=”txtCity”
                        list=”dlCity”
                        required=”required”
                    />
                    <datalist id=”dlCity”>
                        <option value=”北京”>北京</option>
                        <option value=”上海”>上海</option>
                        <option value=”广州”>广州</option>
                        <option value=”深圳”>深圳</option>
                    </datalist>
                </div>
                <div class=”list”>
                    <input class=”sub” type=”submit” value=”提交信息” />
                </div>
            </form>
        </div>
    </body>
</html>
百度前端开发
web前端开发最佳实践百度云
百度前端开发者api
» 本文来自:前端开发者 » 《前端开发实用的表单》
» 本文链接地址:https://www.rokub.com/6769.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!