Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1209列表\表格\表单
Blogger Information
Blog 15
fans 0
comment 0
visits 9217
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
1209列表\表格\表单
fanyigle_php
Original
1530 people have browsed it

1.列表
列表的主要作用是用来做容器,装其他标签内容;
一个标签不够需要其他标签来帮忙的,引申复合标签配套使用;
2.表格
表格由表头\表身\表尾组成;
每一行都是tr打头,td/th是单元格装东西;
表格支持横纵合并;
3.表单
表单的任务是收集用户数据;
概况起来说,用户需要看到有意义的提示,然后输入合法的信息;
form 是大哥,小弟都进来;大哥把数据打包决定以post还是get的方式把数据发给服务器的某某某;小弟的身份以name区分,小弟要说啥用value表示;在用户这边小弟以type=xxx显得不同
label标签一是可以用文本提示用户要输入什么,二是可以做个id简单跳转;
input是输入控件,完成实际采集工作,文本类就是text\password\email,
单选radio多选checkbox,多选时name要用数组来收集
列表select+option
隐藏域hidden悄悄给服务器传递信息;
文件域file的特别之处是form的method要为post,enctype也要选带form的;

form表单和输入控件也可以通过控件的form属性指向表单的id以实现关联。

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>课程表练习</title>
  7.     <style>
  8.       table,
  9.       th,
  10.       td {
  11.         border: 1px solid black;
  12.         border-collapse: collapse;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <!-- 1.列表练习 -->
  18.     <ul>
  19.       <li>苹果</li>
  20.       <li>香蕉</li>
  21.       <li>菠萝</li>
  22.     </ul>
  23.     <ol>
  24.       <li>先学HTML</li>
  25.       <li>再学CSS</li>
  26.       <li>最后学PHP</li>
  27.     </ol>
  28.     <dl>
  29.       <dt>地址</dt>
  30.       <dd>光明村88号</dd>
  31.       <dt>电话</dt>
  32.       <dd>12316</dd>
  33.     </dl>
  34.     <!-- 2.表格练习:课程表 -->
  35.     <table>
  36.       <caption>
  37.         我的课程表
  38.       </caption>
  39.       <thead>
  40.         <tr>
  41.           <td>时间</td>
  42.           <td>序号</td>
  43.           <td>星期一</td>
  44.           <td>星期二</td>
  45.           <td>星期三</td>
  46.           <td>星期四</td>
  47.           <td>星期五</td>
  48.         </tr>
  49.       </thead>
  50.       <tbody>
  51.         <tr>
  52.           <td rowspan="4">上午</td>
  53.           <td>1</td>
  54.           <td>语文</td>
  55.           <td>数学</td>
  56.           <td>英语</td>
  57.           <td>化学</td>
  58.           <td>地理</td>
  59.         </tr>
  60.         <tr>
  61.           <!-- <td></td> -->
  62.           <td>2</td>
  63.           <td>语文</td>
  64.           <td>数学</td>
  65.           <td>英语</td>
  66.           <td>化学</td>
  67.           <td>地理</td>
  68.         </tr>
  69.         <tr>
  70.           <!-- <td></td> -->
  71.           <td>3</td>
  72.           <td>语文</td>
  73.           <td>数学</td>
  74.           <td>英语</td>
  75.           <td>化学</td>
  76.           <td>地理</td>
  77.         </tr>
  78.         <tr>
  79.           <!-- <td></td> -->
  80.           <td>4</td>
  81.           <td>语文</td>
  82.           <td>数学</td>
  83.           <td>英语</td>
  84.           <td>化学</td>
  85.           <td>地理</td>
  86.         </tr>
  87.         <tr>
  88.           <td colspan="7" style="text-align: center">中午休息</td>
  89.         </tr>
  90.         <tr>
  91.           <td rowspan="3">下午</td>
  92.           <td>1</td>
  93.           <td>语文</td>
  94.           <td>数学</td>
  95.           <td>英语</td>
  96.           <td>化学</td>
  97.           <td rowspan="3">课外活动</td>
  98.         </tr>
  99.         <tr>
  100.           <!-- <td></td> -->
  101.           <td>2</td>
  102.           <td>语文</td>
  103.           <td>数学</td>
  104.           <td>英语</td>
  105.           <td>化学</td>
  106.           <!-- <td>地理</td> -->
  107.         </tr>
  108.         <tr>
  109.           <!-- <td></td> -->
  110.           <td>3</td>
  111.           <td>语文</td>
  112.           <td>数学</td>
  113.           <td>英语</td>
  114.           <td>化学</td>
  115.           <!-- <td>地理</td> -->
  116.         </tr>
  117.       </tbody>
  118.     </table>
  120.     <!-- 3.表单填写 -->
  121.     <h3>用户注册</h3>
  122.     <form action="" method="POST" enctype="multipart/form-data">
  123.       <!-- 单行文本框输入 -->
  124.       <label for="username">用户名:</label>
  125.       <input
  126.         type="text"
  127.         name="username"
  128.         value=""
  129.         id="username"
  130.         placeholder="请输入用户名"
  131.         required
  132.       />
  133.       <br />
  134.       <label for="password">密码:</label>
  135.       <input
  136.         type="password"
  137.         name="password"
  138.         value=""
  139.         id="password"
  140.         placeholder="请输入密码"
  141.         required
  142.       />
  143.       <br />
  144.       <label for="email">邮箱:</label>
  145.       <input
  146.         type="email"
  147.         name="email"
  148.         value=""
  149.         id="email"
  150.         placeholder="abc@qq.com"
  151.         required
  152.       />
  153.       <!-- 单选和复选框 -->
  154.       <div>
  155.         <label for="secret">性别:</label>
  156.         <input type="radio" name="sex" value="男" id="male" /><label for="male"
  157.           >男</label
  158.         >
  159.         <input type="radio" name="sex" value="女" id="female" /><label
  160.           for="female"
  161.           >女</label
  162.         >
  163.         <input type="radio" name="sex" value="保密" id="secret" checked /><label
  164.           for="secret"
  165.           >保密</label
  166.         >
  167.       </div>
  168.       <div>
  169.         <label for="">爱好:</label>
  170.         <input
  171.           type="checkbox"
  172.           name="hobby[]"
  173.           value="program"
  174.           id="program"
  175.         /><label for="program">编程</label>
  176.         <input type="checkbox" name="hobby[]" value="sleep" id="sleep" /><label
  177.           for="sleep"
  178.           >睡觉</label
  179.         ><input type="checkbox" name="hobby[]" value="majo" id="majo" /><label
  180.           for="majo"
  181.           >打麻将</label
  182.         >
  183.       </div>
  184.       <!-- 下拉列表 -->
  185.       <label for="edu">学历:</label>
  186.       <select name="edu" id="edu" multiple size="3">
  187.         <option value="1">初中</option>
  188.         <option value="2">高中</option>
  189.         <option value="3" label="大学1">大学</option>
  190.       </select>
  192.       <!-- 文件域/隐藏域 -->
  193.       <br />
  194.       <input type="hidden" name="filesize" value="300000" />
  195.       <input type="file" name="fileselect" id="fileselect" />
  197.       <!-- 文本域 -->
  198.       <div>
  199.         <label for="explain">说明</label>
  200.         <textarea
  201.           name="explain"
  202.           id="explain"
  203.           cols="20"
  204.           rows="3"
  205.           placeholder="内容不超过60个字"
  206.         ></textarea>
  207.       </div>
  208.       <button>提交</button>
  209.     </form>
  210.   </body>
  211. </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