HTML注册表单的页面制作

最新推荐文章于 2024-09-20 22:38:40 发布

爱睡觉的小馨

最新推荐文章于 2024-09-20 22:38:40 发布

阅读量7.8k

点赞数 9

分类专栏： HTML与CSS5网页设计

本文链接：https://blog.csdn.net/qq_45696288/article/details/108754456

版权

HTML与CSS5网页设计专栏收录该内容

21 篇文章 8 订阅

订阅专栏

效果1：
效果2：

效果1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

        <style>

                h2{
                    text-align: center;
                }

                form{
                    width: 800px;
                    height: 800px;
                    border: 1px solid red;
                    margin: auto;
                    background: rgb(106, 131, 70);
                }

                p{
                    width: 700px;
                    height: 80px;
                    background: white;
                    border-radius: 20px 20px 20px 20px;
                    line-height: 80px;
                    margin: auto;
                    margin-top: 30px;
                    padding-left: 50px;
                }

                span{
                    margin-left: 200px;
                }

                #b{
                    width: 60px;
                    height: 50px;
                    border: 1px solid rgb(61, 121, 96);
                    background: rgb(61, 121, 96);
                    margin:auto;
                    margin-top: 50px;
                    border-radius: 30px 30px 30px 30px;
                    text-align: center;
                    line-height: 50px;
                }

                div > input{
                    background: rgb(61, 121, 96);
                }

        </style>

</head>

<body>

    <h2>注册表单</h2>
        <form action="">

            <p>用户昵称：<span><input type="text"></span> </p>

            <p>Email：<span><input type="email" required placeholder="example@domain.com"></span></p>

            <p>工作年龄：<span><input type="range" min="1" max="30"> 30 </span></p>

            <p>年龄：<span><input type="number" required placeholder="your age" min="1" max="20" step="3"></span></p>

            <p>出生日期：<span><input type="date"></span></p>

            <p>个人主页：<span><input type="url"></span></p>

            <div id="b"><input type="button" value="注册"></div>


    </form>

</body>

</html>

在这里插入图片描述

效果2：


<html>

    <head>
      <meta charset="utf-8">
      <title>注册表单</title>
      <STYLE type=text/css>
        * {
          margin: 0;
          padding: 0;
          list-style: none;
        }
    
        body {
          font-size: 12px;
          font-family: "Times New Roman", Times, serif;
          line-height: 1.25;
          text-align: center;
        }
    
        h1 {
          font-weight: bold;
          line-height: 2em;
          margin: 10px auto;
        }
    
        form {
          width: 500px;
          margin: 0 auto;
          background: #9cbc2c;
          border-radius: 5px;
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
          padding: 4px;
        }
    
        fieldset {
          padding: 10px;
          border-style: none;
        }
    
        #regForm ol li {
          margin-bottom: 12px;
          background: white;
          border: 1px solid #f7f7f7;
          border-radius: 5px;
          padding: 5px 10px;
          line-height: 30px;
          height: 30px;
          position: relative;
        }
        #regForm label {
          float: left;
          width: 120px;
          font: italic 13px/30px Georgia, "Times New Roman", Times, serif;
        }
        #regForm button {
          margin: 5px auto;
          background: #384313;
          font: 14px Georgia, "Times New Roman", Times, serif;
          color: #ffffff;
          letter-spacing: 1px;
          text-shadow: 0 1px 1px #000000;
          border-radius: 14px;
          border-style: none;
          padding: 4px 15px;
        }
        #regForm ol li:hover {
          background: #f7f7f7;
          border-color: #9cbc2c;
        }
    
      </STYLE>
    </head>
    
    <body>
      <h1>注册表单</h1>
      <form id=regForm onsubmit="return chkForm();" method=post>
        <fieldset>
          <ol>
              <!-- span 与 lable是一样功能的标签-->
            <li><label for=username>用户昵称：</label>
              <input id=username name=username type="text" autofocus required>
            </li>
            <li><label for=uemail>Email：</label>
              <input id=uemail type=email name=uemail required placeholder="example@domain.com">
            </li>
            <li><label for=age>工作年龄：</label>
              <input id=age type=range name=range1 max="60" min="18">
              <outputonforminput="value=range1.value">30</output>
            </li>
            <li><label for=age2>年龄:</label>
              <input id=age2 type=number required placeholder="your age">
            </li>
            <li><label for=birthday>出生日期：</label>
              <input id=birthday type=date>
            </li>
            <li><label for=search>个人主页：</label>
              <input id=search type=url required list="searchlist">
              <datalist id=searchlist>
                <option label="Google" value="http://www.google.com" >
                <option label="Yahoo" value="http://www.yahoo.com" >
                <option label="Bing" value="http://www.bing.com" >
                <option label="Baidu" value="http://www.baidu.com" >
              </datalist>
            </li>
              <li>
              <select>
                <option>1</option>
                <option>2</option>
              </select>
            </li>
          </ol>
        </fieldset>
        <div><button type=submit>注册</button> </div>
      </form>
    </body>
    
    </html>