请选择 进入手机版 | 继续访问电脑版
立即注册 登录
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索

表单美化页面 源代码



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link href="form.css" rel="stylesheet"/>
</head>
<body>
<form action="#" method="get">
    <fieldset id="account">
        <legend>用户注册</legend>
        <label for="name">姓名:</label>
        <input type="text" required placeholder="姓名" id="name" autocomplete="off"/>
        <label for="email">Email:</label>
        <input type="email" required placeholder="email@example.com" id="email" autocomplete="off"/>
        <label for="web">网址:</label>
        <input type="url" required placeholder="http://www.example.com" id="web" autocomplete="off"/>
        <label for="number">年龄:</label>
        <input type="number" required placeholder="年龄" id="number" min="1" max="100" step="1"/>
        <label for="range">网址:</label>
        <input type="range" required id="range" min="0" max="10000" step="100"/>
        <label for="msg">其他:</label>
        <textarea id="msg" required></textarea>
        <input type="submit" value="注册"/>
    </fieldset>
</form>
</body>
</html>



*:focus{
    outline: none;
}
form{
    width:300px;
    margin:20px auto;
}
input,textarea{
    font-family: Arial,sans-serif;
    background-color:#fff;
    border:1px solid #ccc;
    font-size:20px;
    width:300px;
    min-height: 30px;
    display:block;
    margin-bottom:5px;
    margin-top:5px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
}
fieldset#account{
    width:250px;
    amrgin:10px;
    background:rgb(244,244,244);
    background:rgba(244,244,244,0.7);
    border-radius:25px;
    border:3px double #999;
    padding:0 20px;
}
legend{
    font-size:20px;
    font-weight:bold;
    letter-spacing: 5px;
    color:#999;
    margin-left:-20px;
    text-align: center;
    padding:0 10px;
    text-shadow: 1px 1px 0 #ccc;
}
textarea{
    min-height:80px;
}
input:focus,textarea:focus{
    box-shadow:0 0 25px #ccc;
    transform: scale(1.05);
}
input:not(:focus),textarea:not(:focus){
    opacity:0.5;
}
input:required,textarea:required{
    background:url('images/asterisk_orange.png') no-repeat 280px 7px;
}
input:valid,textarea:valid{
    background:url('images/tick.png') no-repeat 280px 5px;
}
input:focus:invalid,textarea:focus:invalid{
    background:url('images/cancel.png') no-repeat 280px 7px;
}
input[type=submit]{
    padding:10px;
    background:none;
    opacity: 1.0;
}

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表于 2017-4-16 21:00:22 | 显示全部楼层 |阅读模式

回复 | 使用道具 举报

该帖共收到 5 条回复!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

美图秀

    • 2018第二届中国城市基础设施建设与管理国际
    • 超级好用的个人日程管理系统免费发放
    • 政府全额补贴的美国物联网展会
    • 论坛野心揭秘
    • 什么是物联网的思维

物联网圈官方微信公众平台

QQ|Archiver|手机版|小黑屋|物联网圈 ( 沪ICP备16025735号  

GMT+8, 2018-10-20 14:31 , Processed in 0.426978 second(s), 33 queries .

快速回复 返回顶部 返回列表