devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML案例：征婚网站（前端学习的第六天）_前端征婚网

作者：花生_TL007 | 2024-04-11 06:46:55

赞

踩

前端征婚网
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.  
  10. <body>
  11.     <h3>青春不常在</h3>
  12.     <form action="" name="信息表单">
  13.         <table width="500">
  14.             <tr>
  15.                 <td>姓名</td>
  16.                 <td><input type="text" name="name" value="name"></td>
  17.             </tr> <!-- 第一行 -->
  18.  
  19.             <tr>
  20.                 <td>性别：</td>
  21.                 <td>
  22.                     <label for="nan">男</label> <input type="radio" id="nan" value="男" name="sex">
  23.                     <label for="nv">女</label> <input type="radio" id="nv" value="女" name="sex">
  24.                 </td>
  25.             </tr><!-- 第二行 -->
  26.  
  27.             <tr>
  28.                 <td>生日</td>
  29.                 <td>
  30.                     <select name="" id="">
  31.                         <option value="">--请选择年份--</option>
  32.                         <option value="">2001</option>
  33.                         <option value="">2002</option>
  34.                     </select>
  35.                     <select name="" id="">
  36.                         <option value="">--请选择月份--</option>
  37.                         <option value="">1</option>
  38.                         <option value="">2</option>
  39.                     </select>
  40.                     <select name="" id="">
  41.                         <option value="">--请选日期--</option>
  42.                         <option value="">1</option>
  43.                         <option value="">2</option>
  44.                     </select>
  45.                 </td>
  46.             </tr><!-- 第三行 -->
  47.  
  48.             <tr>
  49.                 <td>所在地区</td>
  50.                 <td>
  51.                     <input type="text" value="北京">
  52.                 </td>
  53.             </tr><!-- 第四行 -->
  54.  
  55.             <tr>
  56.                 <td>婚姻状况</td>
  57.                 <td>
  58.                     <label for="未婚">未婚</label> <input type="radio" name="婚姻状况" value="未婚" id="未婚" checked="checked">
  59.                     <label for="离异">离异</label> <input type="radio" name="婚姻状况" value="离异" id="离异">
  60.                 </td>
  61.             </tr><!-- 第五行 -->
  62.  
  63.             <tr>
  64.                 <td>学历</td>
  65.                 <td>
  66.                     <select name="" id="">
  67.                         <option value="">本科</option>
  68.                         <option value="" selected="selected">研究生</option>
  69.                         <option value="">博士</option>
  70.                     </select>
  71.                 </td>
  72.             </tr> <!-- 第六行 -->
  73.  
  74.             <tr>
  75.                 <td>喜欢类型</td>
  76.                 <td>
  77.                     <label for="清纯">清纯</label> <input type="checkbox" id="清纯" name="类型" value="清纯">
  78.                     <label for="萝莉">萝莉</label> <input type="checkbox" id="萝莉" name="类型" value="萝莉">
  79.                     <label for="御姐">御姐</label> <input type="checkbox" id="御姐" name="类型" value="御姐">
  80.                 </td>
  81.             </tr> <!-- 第七行 -->
  82.  
  83.             <tr>
  84.                 <td>自我介绍</td>
  85.                 <td>
  86.                     <textarea name="自我介绍" cols="30" rows="5" placeholder="请输入你的自我介绍"></textarea>
  87.                 </td>
  88.             </tr><!-- 第八行 -->
  89.  
  90.             <tr>
  91.                 <td>请上传你的照片</td>
  92.                 <td> <input type="file"> </td>
  93.             </tr><!-- 第九行 -->
  94.  
  95.             <tr>
  96.                 <td></td>
  97.                 <td><input type="submit" value="提交"></td>
  98.             </tr><!-- 第十行 -->
  99.  
  100.             <tr>
  101.                 <td></td>
  102.                 <td><input type="checkbox" value="true">我同意将以上信息公开到我的社交账号</td>
  103.             </tr><!-- 第十一行 -->
  104.  
  105.             <tr>
  106.                 <td></td>
  107.                 <td>
  108.                     <h2>我承诺</h2>
  109.                     <ul>
  110.                         <li>真诚</li>
  111.                         <li>真心</li>
  112.                     </ul>
  113.                 </td>
  114.             </tr><!-- 第十二行 -->
  115.  
  116.         </table>
  117.     </form>
  118.  
  119. </body>
  120.  
  121. </html>

效果：

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/403441
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号