表格练习案例

最新推荐文章于 2023-02-26 18:31:46 发布

code enthusiasts

最新推荐文章于 2023-02-26 18:31:46 发布

阅读量195

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/girllan/article/details/118530008

版权

前端专栏收录该内容

12 篇文章

订阅专栏

这是一个HTML注册页面的示例，包含性别选择、生日输入、地区填写、婚姻状况、学历填写、喜欢类型的选择以及个人介绍的文本区域。用户可以选择性别、出生年月日、填写所在地区、婚姻状态、最高学历，并勾选喜欢的类型。此外，还需要填写个人简介并同意注册条款。页面底部提供了免费注册按钮和会员登录链接。

摘要由CSDN通过智能技术生成

简单表格案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta charset="UTF-8">
  <title>注册页面</title>
  <style>
    .married-form {
      width:500px;
      margin-bottom: 6px;
      font: 16px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    }

    .left-section {
      margin-right: 30px;
    }
    /* 开启相对定位，不会影响布局 */
    #brief-intro {
      position: relative;
      top: -140px;
    }

    #others {
      margin-left: 110px;
    }
  </style>
</head>

<body>
  <form action="#" method="POST" name="marray">
    <h4>青春不常在，抓紧谈恋爱</h4>
    <div id="gender" class="married-form">
      <span class="left-section">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</span>
      <label for="man">
        <input type="radio" name="sex" id="man">
        <img src="./images/man.jpg" alt="男">男
      </label>
      <label for="woman">
        <input type="radio" name="sex" id="women">
        <img src="./images/women.jpg" alt="女">女
      </label>
    </div>
    <div id="birthday" class="married-form">
      <span class="left-section">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日:</span>
      <label for="year">
        <select id="year">
          <option selected="selected">-请选择年份-</option>
          <option>2019</option>
          <option>2020</option>
          <option>2021</option>
        </select>
        <label for="month">
          <select id="month">
            <option selected="selected">-请选择月份-</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
          <label for="day">
            <select id="day">
              <option selected="selected">-请选择日-</option>
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </select>
          </label>
    </div>
    <div id="area" class="married-form">
      <span class="left-section">所在地区:</span>
      <input type="text" value="广州" style="width:350px">
    </div>
    <div id="maritalState" class="married-form">
      <span class="left-section">婚姻状况:</span>
      <label for="unmarried">
        <input type="radio" name="marital" id="unmarried">未婚
      </label>
      <label for="married">
        <input type="radio" name="marital" id="married">已婚
      </label>
      <label for="divorced">
        <input type="radio" name="marital" id="divorced">离婚
      </label>
    </div>
    <div id="education" class="married-form">
      <span class="left-section">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历:</span>
      <label for="edu">
        <input type="text" value="博士后" id="edu" style="width:350px">
      </label>
    </div>
    <div id="lovedType" class="married-form">
      <span class="left-section">喜欢类型:</span>
      <label for="graceful">
        <input type="checkbox" name="type" id="graceful">妩媚的
      </label>
      <label for="cute">
        <input type="checkbox" name="type" id="cute">可爱的
      </label>
      <label for="young">
        <input type="checkbox" name="type" id="young">小鲜肉
      </label>
      <label for="old">
        <input type="checkbox" name="type" id="old">老腊肉
      </label>
      <label for="allLoved">
        <input type="checkbox" name="type" id="allLoved" checked="checked">都喜欢
      </label>
    </div>
    <div id="personalIntroduce" class="married-form">
      <span class="left-section" id="brief-intro">个人介绍:</span>
      <label for="intro">
        <textarea name="perIntro" id="intro" cols="48" rows="10">个人简介</textarea>
      </label>
    </div>
    <div id="others" class="married-form">
      <div id="login">
        <input type="submit" value="免费注册">
        <br>
        <input type="checkbox">我同意注册条款和会员加入标准
        <br>
        <a href="#">我是会员，立即登录</a>
      </div>
      <h5>我承诺</h5>
      <ul>
        <li>年满18岁、单身</li>
        <li>抱着严肃的态度</li>
        <li>真诚寻找另一半</li>
      </ul>
    </div>
  </form>
</body>

</html>

在这里插入图片描述