HTML表格标签-05-简易注册页面

Posted 2021-10-05 做个机灵鬼

1.表格标签,使内容排版更加整齐
2.列表标签
3.表单标签

  <table width="600" >
    <h4>青春不常在 捉紧谈恋爱</h4>
    <tr>
      <td>性别:</td>
      <td>
        <input type="radio"  name="sex" id="nan"><label for="nan"><img src="amages/man.jpg"> 男</label>
        <input type="radio" name="sex" id="nv"><label for="nv"><img src="amages/women.jpg"> 女</label>
      </td>
    </tr>
    <!-- 第二行 -->
    <tr>
      <td>生日</td>
      <td>
        <select>
          <option>--请选择年份--</option>
          <option>2021</option>
          <option>2020</option>
          <option>2019</option>
        </select>
       <select>
          <option>--请选择月份--</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select>
          <option>--请选择日--</option>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </td>
    </tr>
    <!-- 第三行 -->
    <tr>
      <td>所在地区</td>
      <td><input type="text" value="北京思密达"></td>
    </tr>
    <!-- 第四行 -->
    <tr>
      <td>婚姻状况</td>
      <td>
        <input type="radio"  name="sex" id="marry" checked="checked"><label for="marry">未婚</label>
        <input type="radio" name="sex" id="lihun"><label for="lihun">离异</label> 
      </td>
    </tr>
    <!-- 第五行 -->
    <tr>
      <td>学历</td>
      <td><input type="text" value="本科"></td>
    </tr>
    <!-- 第六行 -->
    <tr>
      <td>喜欢的类型</td>
      <td>
        <input type="checkbox" id="chengshu"><label for="chengshu">成熟</label>
        <input type="checkbox" id="young"><label for="young">小鲜肉</label>
        <input type="checkbox" id="keai"><label for="keai">可爱的</label>
        <input type="checkbox" id="huopo"><label for="huopo">活泼的</label>
      </td>
    </tr>
    <!-- 第七行 -->
    <tr>
      <td>个人简介</td>
      <td>
        <textarea></textarea>
      </td>
    </tr>
    <!-- 第八行 -->
    <tr>
      <td></td>
      <td>
        <input type="submit" value="免费注册">
      </td>
    </tr>
    <!-- 第九行 -->
    <tr>
      <td></td>
      <td>
         <input type="checkbox" checked=checked >我同意注册条款和加入会员政策
      </td>
    </tr>
    <!-- 第十行 -->
    <tr>
      <td></td>
      <td> <a href="#" target="_blank">我是会员 立即登陆</a></td>
    </tr>
    <!-- 第十一行 -->
    <tr>
      <td></td>
      <td>
        <h4>我承诺</h4>
        <ul>
          <li>年满18岁,单身</li>
          <li>抱着严谨的态度</li>
          <li>真诚寻找另一半</li>
        </ul>
      </td>
    </tr>
  </table>

页面效果: