Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1209:列表,表格,表单与框架
Blogger Information
Blog 37
fans 1
comment 0
visits 32496
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:列表,表格,表单与框架
Jason Pu?
Original
675 people have browsed it

一.列表（table）：

  1. html的列表(table)由一组标签来描述：table,thead,tbody,tr/th,table分为有序列表，无序列表和自定义列表三种

1：有序列表 ol>li,例:

  1. <ol>
  2.       <li>牛奶一箱</li>
  3.       <li>蛋糕一个</li>
  4.       <li>苹果10斤</li>
  5.     </ol>

2: 无序列表 ul>li,例：

  1. <ul>
  2.       <li>牛奶一箱</li>
  3.       <li>蛋糕一个</li>
  4.       <li>苹果10斤</li>
  5.     </ul>

3：自定义列表 dl>dd

二.表格的合并：

跨列合并：colspan=列数(num);
跨行合并：rowspan=行数(num);
用html列表创建一个课程表

效果如图：

实现代码如下：
  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.     <style></style>
  8.     <style type="text/css">
  9.         table{
  10.                 border: 1px solid #ccc;
  11.                 border-collapse: collapse;
  12.                 text-align: center;
  13.             }
  14.             tr,th,td{
  15.                 width: 80px;
  16.                 height: 30px;
  17.                 border: 1px solid #ccc;
  18.             }
  19.     </style>
  20. </head>
  21. <body>
  23.     <div class="container"  align="center">
  24.         <div >
  25.            <header>
  26.                <h2>学生课表</h2>
  27.            </header>
  28.             <button >学期</button>
  29.             <select name="" id="" xueqi_sel>
  30.                 <option value="">2020年第一学期</option>
  31.                 <option value="">2020年第二学期</option>
  32.             </select>
  33.         </div>
  34.         <table >
  35.             <tbody>
  36.                 <tr>
  37.                     <th></th>
  38.                     <th>Monday</th>
  39.                     <th>Tuseday</th>
  40.                     <th>Wednsday</th>
  41.                     <th>Thursday</th>
  42.                     <th>Friday</th>
  43.                 </tr>
  44.                 <tr>
  45.                     <td rowspan="3">上午</td>
  46.                     <td>Math</td>
  47.                     <td>English</td>
  48.                     <td>Chinese</td>
  49.                     <td>History</td>
  50.                     <td>Geography</td>
  51.                 </tr>
  52.                 <tr>
  53.                     <!-- <td colspan="3">上午</td> -->
  54.                     <td>Math</td>
  55.                     <td>English</td>
  56.                     <td>Chinese</td>
  57.                     <td>History</td>
  58.                     <td>Geography</td>
  59.                 </tr>
  60.                 <tr>
  61.                     <!-- <td colspan="3">上午</td> -->
  62.                     <td>Math</td>
  63.                     <td>English</td>
  64.                     <td>Chinese</td>
  65.                     <td>History</td>
  66.                     <td>Geography</td>
  67.                 </tr>
  68.                 <tr>
  69.                     <td rowspan="3">下午</td>
  70.                     <td>Math</td>
  71.                     <td>English</td>
  72.                     <td>Chinese</td>
  73.                     <td>History</td>
  74.                     <td>Geography</td>
  75.                 </tr>
  76.                 <tr>
  77.                     <!-- <td ></td> -->
  78.                     <td>Math</td>
  79.                     <td>English</td>
  80.                     <td>Chinese</td>
  81.                     <td>History</td>
  82.                     <td>Geography</td>
  83.                 </tr>
  84.                 <tr>
  85.                     <!-- <td ></td> -->
  86.                     <td>Math</td>
  87.                     <td>English</td>
  88.                     <td>Chinese</td>
  89.                     <td>History</td>
  90.                     <td>Geography</td>
  91.                 </tr>
  94.             </tbody>
  95.         </table>
  96.     </div>
  98. </body>
  99. </html>

三.表单(form)

<form> 标签用于为用户输入创建 HTML 表单。
action:处理表单的程序
method：表单提交类型,分为get/post,默认为get,数据直接放在请求头中
type:用户输入信息的类型，text为通用类型，email:邮箱，password:密码(不显示输入内容)
1:通用型：

  1. <form action="" method="POST" class="register">
  2.  <label for="username">帐号:</label>
  3. <input type="text" id="username" name="username" value="" placeholder="username" required />
  4.  </form>

2.邮箱型：

  1. <form action="" method="POST" class="register">
  2.  <label for="email">邮箱:</label>
  3.       <input type="email" id="email" name="email" value="" required placeholder="demo@email.com" />
  4. </form>

3.密码型：

  1. <form action="" method="POST" class="register">
  2.  <label for="password">密码:</label>
  3.       <input type="password" id="password" name="password" value="" required placeholder="不少于6位" />
  4. </form>

四.单选按钮与复选框
1.单选按钮：
单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性

  1. <form action="12.0.0.1">
  2.             <input type="radio" name="sex" value="male" id="male" ><label for="male">男</label>
  3.             <input type="radio" name="sex" value="female" id="female" ><label for="male">女</label>
  4.             <input type="radio" name="sex" value="ladyboy" id="ladyboy" ><label for="male">人妖</label>
  5.         </form>

2.复选框：
复选框的name属性值应该写与数组的格式名称[],这样才确保服务器可以接收到一组值

  1. <form action="">
  2.             <input type="checkbox" name="bobby[]" id="program" value="program"/><label for="program">写代码</label>
  3.             <input type="checkbox" name="bobby[]" id="sports" value="sports"/><label for="sports">运动</label>
  4.             <input type="checkbox" name="bobby[]" id="music" value="sports"/><label for="music">音乐</label>
  5.         </form>

3.下拉表单：

  1. <form action="">
  2.             <select name="education" id="education">
  3.                 <option value="1">小学</option>
  4.                 <option value="2">中学</option>
  5.                 <option value="3">大专</option>
  6.                 <option value="4">本科</option>
  7.                 <option value="5">研究生及以上</option>
  8.             </select>
  9.         </form>

4.文件域与隐藏域
隐藏域,在前端页面看不到的,它的值供后端处理时用,type属性设置为：”hidden”.

注意：上传的时候要注意请求类型必须是post，可以设置上传文件最大限制，方法是把name属性设置为：MAX_FILE_SIZE,value值为最大的限制数量，例：
  1. </select>
  2.             <label for="user_pic">头像</label>
  3.             <input type="hidden" name="MAX_FILE_SIZE" value="90000"/>
  4.             <input type="file" name="user_pic" id="user_pic" />
  5.             <br>
  6.             <br>
  7.             <label for="user-resume">简历</label>
  8.             <input type="hidden" name="MAX_FILE_SIZE" id="user-resume" value="90000"/>

文本域(textarea)：

  1.  <label for="comment">备注:</label>
  2.       <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
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