Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > l链接，列表，表格，表单实例演示
Blogger Information
Blog 28
fans 0
comment 0
visits 22123
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
l链接，列表，表格，表单实例演示
暝皑祯π_π
Original
635 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>红包申请表</title>
  7.   </head>
  8.   <body>
  9.       <!-- 表格实例 -->
  10.     <table
  11.       id="b"
  12.       border="1"
  13.       align="conter"
  14.       cellspacing="0"
  15.       cellpadding="2"
  16.       width="800"
  17.       height="900"
  18.     >
  19.       <thead align="center">
  20.         <th colspan="5">红包申请表</th>
  21.       </thead>
  22.       <tbody>
  23.         <tr>
  24.           <td>申请人姓名</td>
  25.           <td>***</td>
  26.           <td>申请人性别</td>
  27.           <td>***</td>
  28.           <td rowspan="7">生活照片</td>
  29.         </tr>
  30.         <tr>
  31.           <td>申请人年龄</td>
  32.           <td>***</td>
  33.           <td>婚姻状况</td>
  34.           <td>***</td>
  35.         </tr>
  36.         <tr>
  37.           <td colspan="4">联系方式</td>
  38.         </tr>
  39.         <tr>
  40.           <td>是否有姐妹</td>
  41.           <td>姐妹姓名1</td>
  42.           <td>姐妹姓名2</td>
  43.           <td>姐妹姓名3</td>
  44.         </tr>
  45.         <tr>
  46.           <td rowspan="3" align="center">是/否</td>
  47.           <td>***</td>
  48.           <td>***</td>
  49.           <td>***</td>
  50.         </tr>
  51.         <tr>
  52.           <td>联系电话1</td>
  53.           <td>联系电话2</td>
  54.           <td>联系电话3</td>
  55.         </tr>
  56.         <tr>
  57.           <td>***</td>
  58.           <td>***</td>
  59.           <td>***</td>
  60.         </tr>
  61.         <tr>
  62.           <td colspan="2">目前与我的关系</td>
  63.           <td colspan="3">***</td>
  64.         </tr>
  65.         <tr>
  66.           <td colspan="2">以后想发展什么关系</td>
  67.           <td colspan="3">***</td>
  68.         </tr>
  69.         <tr>
  70.           <td>申请金额</td>
  71.           <td colspan="4">人民币： **百 **拾 **元 **角 **分</td>
  72.         </tr>
  73.         <tr>
  74.           <td rowspan="3">申请理由</td>
  75.           <td colspan="4" rowspan="3"></td>
  76.         </tr>
  77.         <tr></tr>
  78.         <tr></tr>
  80.         <tr>
  81.           <td rowspan="2">申请时间</td>
  82.           <td colspan="5" rowspan="2"></td>
  83.         </tr>
  84.         <tbody>
  85.         <tr></tr>
  86.        <tfoot>
  87.            <tr>
  88.                <td colspan="5">备注：1寸照片两张，1500字申请书，身份证，户口本复印证。500元保证金。另附申请理由陈述书，不少于1500字。</td>
  89.            </tr>
  90.        </tfoot>
  91.     </table>
  92.     <!-- 链接实例 -->
  93.     <a href="" download="示例文本.zip">示例文本</a>
  94.     <a href="tel:123456789">咨询热线</a>
  95.     <a href="mailto:111111@qq.com">发信息给我</a>
  96.     <!-- 表单实例 -->
  97.     <form action="1.php" method="POST">
  98.         <section>
  99.         <input type="submit" value="提交">
  100.     </section>
  101.     </form>
  102.    <br>
  103.    <br>
  104.    <form action="2.php" method="POST">
  105.        <section>
  106.            <label for="yonghuming">用户名：</label>
  107.            <input type="text" name="yonghuming" id="yonghuming" placeholder="请输入" required><br>
  108.            <label for="mima">密码：</label>
  109.            <input type="password" name="mima" id="mima" placeholder="密码" required>
  110.        </section>
  111.        <br>
  112.    </form>
  113.    <form action="3.php" method="POST">
  114.        <label for="secret">性别</label>
  115.        <div>
  116.         <input type="radio" name="gender" id="man" value="男人">
  117.         <input type="radio" name="gender" id="woman" value="女人">
  118.         <input type="radio" name="gender" id=”secret value="保密" checked>
  119.        </div>
  120.        <br>
  121.    </form>
  122.    <form action="4.php" method="POST">
  123.        <section>
  124.            <label for="interest">兴趣</label>
  125.            <div>
  126.                <input type="checkbox" name="interst[]" id="game" value="游戏">
  127.                <input type="checkbox" name="interst[]" id="photography" value="摄影">
  128.                <input type="checkbox" name="interst[]" id="programme" value="编程" checked>
  129.            </div>
  130.        </section>
  132.    </form>
  133. <!-- 列表实例 -->
  135. <h3>0403学习内容总结</h3>
  136. <ul>
  137.     <li>语义化元素</li>
  138.     <ol>
  139.         <li>语义化结构元素</li>
  140.         <li>语义化标签</li>
  141.     </ol>
  142.     <li>列表</li>
  143.     <ol>
  144.         <li>有序列表</li>
  145.         <li>无序列表</li>
  146.     </ol>
  147.     <li>表格</li>
  148.     <ol>
  149.         <li>表格页眉(thead）一个表格中只能有一个页眉</li>
  150.         <li>表格主体（tbody）一个表格中可以有几个表格主体</li>
  151.         <li>表格页尾（tfoot）一个表格中只能有一个页尾</li>
  152.     </ol>
  153.     <li>表单</li>
  154.     <ol>
  155.         <li>form元素</li>
  156.         <li>input元素</li>
  157.     </ol>
  158. </ul>
  159. <div>
  160. <a href="#b"><img src="![](https://img.php.cn/upload/image/283/370/483/1586000717889553.png)" alt="返回头部"></a>
  161. </div>
  162.   </body>
  163. </html>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post