html5，表单的综合案例

时间：2023-03-10 06:41:10
html5，表单的综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单综合练习</title>
    <style type="text/css">
      form{width: 400px;background: #f7f7f7;padding: 10px;margin-top: 150px;margin-left: 300px;}
      button{background: #808080;padding: 8px;border-radius:5px;}
      button:hover{background: #919191;padding: 10px;border-radius:5px;}
      input{padding: 8px;background: #f8f8f8;}
      input:focus{padding: 8px;background: #a9a9a9;}
    </style>
</head>
<body>
    <form action="">
        <fieldset>
        <legend>信息注册</legend>
        <p><label for="user">账号：</label><input type="text" name="user" id="user" placeholder="账号" required=""></p>
        <p><label for="password">密码：</label><input type="password" name="password" id="password" placeholder="密码"></input></p>
        <p><label for="tel">电话：</label><input type="tel" name="tel" id="tel" placeholder="电话"></p>
        <p><label for="email">邮件：</label><input type="email" name="email" id="email" placeholder="电子邮箱"></p>
        <!-- <p><label for=""></label>这样单击后自动获得焦点</p> -->

    <!--     <input type="submit" value="注册"></input> -->
    <button>注册用户</button>
        </fieldset>
    </form>
</body>
</html>

相关文章