Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 初识列表表格与表单
Blogger Information
Blog 32
fans 0
comment 0
visits 22253
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
初识列表表格与表单
培(信仰)
Original
1866 people have browsed it

列表表单与表格

列表当容器使用，列表内可以放置任何类型的元素

列表

1.无序列表

ul + li
用一组标签定义
如果一个元素不是一个标签定义，用一组元素定义的，叫复合标签 

  1. <h3>购物车</h3>
  2.       <ul>
  3.           <li>牛奶一箱</li>
  4.           <li>苹果二斤</li>
  5.           <li>蛋糕三块</li>
  6.       </ul>
  7.       <hr>

2.有序列表

ol + li

  1. <ol>
  2.         <li>牛奶</li>
  3.         <li>苹果</li>
  4.         <li>蛋糕</li>
  5.     </ol>

3.自定义列表

dl + dt + li

  1. <dl>
  2.         <dt>名称:</dt>
  3.         <dd>php中文网</dd>
  4.         <dt>地址：</dt>
  5.         <dd>xxxx</dd>
  6.         <dt>联系：</dt>
  7.         <dd>电话：<a href="tel:135****">135****</a></dd>
  8.         <dd>email: <a href="mailto:xxx@xxx.com?subject=这是邮件主题&body=这是邮件内容">xxx@xxx.com</a> </dd>
  9.     </dl>

列表的应用

应用1： 导航

  1. <ul class="menu">
  2.         <li><a href="">首页</a></li>
  3.         <li><a href="">教学视频</a></li>
  4.         <li><a href="">社区问答</a></li>
  5.         <li><a href="">资源下载</a></li>
  6.         <li><a href="">登录</a></li>
  7.     </ul>

应用2： 图文列表

  1.     <ul class="list">
  2.         <li>
  3.             <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png" alt="图片"></a>
  4.             <a href="">web前端开发极速入门</a>
  5.         </li>
  6.         <li>
  7.             <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png" alt="图片"></a>
  8.             <a href="">web前端开发极速入门</a>
  9.         </li>
  10.         <li>
  11.             <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png" alt="图片"></a>
  12.             <a href="">web前端开发极速入门</a>
  13.         </li>
  14.         <li>
  15.             <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png" alt="图片"></a>
  16.             <a href="">web前端开发极速入门</a>
  17.         </li>
  18.         <li>
  19.             <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png" alt="图片"></a>
  20.             <a href="">web前端开发极速入门</a>
  21.         </li>
  22.         <li>
  23.             <a href=""><img src="https://img.php.cn/upload/course/000/000/001/5ec659c41669a893.png" alt="图片"></a>
  24.             <a href="">web前端开发极速入门</a>
  25.         </li>
  26.     </ul>

表格

列表是特殊表格
一组相关联的数据应该用表格
表格也是由一组标签来描述的：table,thead,tbody,tr,td/th
所有的数据必须填充到td /th 中 ,th是td的plus，自带了一个居中和加粗

案例一：商品信息表

  1. <table class="product">
  2.         <!-- 表格标题 -->
  3.         <caption>
  4.             商品信息表
  5.         </caption>
  6.         <!-- 表头 -->
  7.         <thead>
  8.             <!-- 每添加一组表格数据，必须先添加一行 -->
  9.             <tr>
  10.                 <th>ID</th>
  11.                 <th>品名</th>
  12.                 <th>单价</th>
  13.                 <th>数量</th>
  14.                 <th>单位</th>
  15.                 <th>金额</th>
  17.             </tr>
  18.         </thead>
  19.         <!-- 表格主体可以有多行，但是只有有一个表头 -->
  20.         <tbody>
  21.             <tr>
  22.                 <td>a100</td>
  23.                 <td>手机</td>
  24.                 <td>9999</td>
  25.                 <td>1</td>
  26.                 <td>台</td>
  27.                 <td>9999</td>
  28.             </tr>
  29.             <tr>
  30.                 <td>b200</td>
  31.                 <td>汽车</td>
  32.                 <td>99999</td>
  33.                 <td>1</td>
  34.                 <td>台</td>
  35.                 <td>99999</td>
  36.             </tr>            
  37.         </tbody>
  38.     </table>
  39.     <p class="page">
  40.         <a href="">首页</a>
  41.         <a href="">...</a>
  42.         <a href="">5</a>
  43.         <a href="" class="active">6</a>
  44.         <a href="">7</a>
  45.         <a href="">8</a>
  46.         <a href="">...</a>
  47.         <a href="">尾页</a>
  48.     </p>

案例二：行列合并 课程表案例

需要注意
1.合并方向问题

  • colspan=”2” 是向右侧合并1列，包括本列共2列合并
  • rowspan=”4” 向下方合并3行，包含本行共4行合并

2.合并的时候对应的被合并的行列要删除代码，可以理解为既然合并了就不用再存在了。
比如
colspan=”2” 后对应的右侧列要去掉1列
rowspan=”4” 后对应的下方行要去掉3行

  1. <table class="lesson">
  2.         <caption>
  3.             课程表
  4.         </caption>
  5.         <thead>
  6.             <tr>
  7.                 <th colspan="2"></th>
  8.                 <!-- <th></th> -->
  9.                 <th>星期一</th>
  10.                 <th>星期二</th>
  11.                 <th>星期三</th>
  12.                 <th>星期四</th>
  13.                 <th>星期五</th>
  14.             </tr>
  15.         </thead>
  16.         <tbody>
  17.             <tr>
  18.                 <td rowspan="4">上午</td>
  19.                 <td>1</td>
  20.                 <td>数学</td>
  21.                 <td>语文</td>
  22.                 <td>语文</td>
  23.                 <td>语文</td>
  24.                 <td>数学</td>
  25.             </tr>
  26.             <tr>
  27.                 <!-- <td>上午</td> -->
  28.                 <td>2</td>
  29.                 <td>语文</td>
  30.                 <td>数学</td>
  31.                 <td>数学</td>
  32.                 <td>语文</td>
  33.                 <td>美术</td>
  34.             </tr> 
  35.             <tr>
  36.                 <!-- <td>上午</td> -->
  37.                 <td>3</td>
  38.                 <td>数学</td>
  39.                 <td>音乐</td>
  40.                 <td>科学</td>
  41.                 <td>语文</td>
  42.                 <td>数学</td>
  43.             </tr>   
  44.             <tr>
  45.                 <!-- <td>上午</td> -->
  46.                 <td>4</td>
  47.                 <td>科学</td>
  48.                 <td>语文</td>
  49.                 <td>语文</td>
  50.                 <td>体育</td>
  51.                 <td>道法</td>
  52.             </tr> 
  53.             <tr class="rest">
  54.                 <td colspan="7">中午休息</td>
  55.             </tr>  
  56.             <tr>
  57.                 <td rowspan="3">下午</td>
  58.                 <td>5</td>
  59.                 <td>数学</td>
  60.                 <td>语文</td>
  61.                 <td>语文</td>
  62.                 <td>语文</td>
  63.                 <td>数学</td>
  64.             </tr>    
  65.             <tr>
  66.                 <!-- <td>下午</td> -->
  67.                 <td>6</td>
  68.                 <td>数学</td>
  69.                 <td>语文</td>
  70.                 <td>语文</td>
  71.                 <td>语文</td>
  72.                 <td>数学</td>
  73.             </tr>   
  74.             <tr>
  75.                 <!-- <td>下午</td> -->
  76.                 <td>7</td>
  77.                 <td>课外活动：</td>
  78.                 <td colspan="4">各班自行组织自愿参加</td>
  79.             </tr>                         
  80.         </tbody>
  81.     </table>

表单

服务器获取用户请求主要通过表单，同时也是风险来源。
需要考虑表单数据过滤等

  1. <!-- action: 处理表单的程序
  2.     method：表单的提交类型
  3.         GET 默认属性，数据直接放在url地址中，发送一些不敏感的数据，比如页数
  4.         POST 表单的数据在请求体中 ,更多使用-->
  5.     <form action="" method="" class="register" enctype="multipart/form-data">
  6.         <!-- 1. 单行文本框 -->
  7.         <!-- 增加用户体验，单击标签焦点落在文本框里
  8.             标签文本框的绑定
  9.           label 的for属性值与需要绑定的文本框的id值一致 -->
  11.         <!--input 的 type: 控件的类型
  12.                 - type="text" 文本框
  13.                 - type="email"邮箱
  14.                 - type="password" 密码 非明文 此类型 value属性失效，但是在method为GET时会显示在URL中
  15.                 - radio 单选框
  16.                 - checkbox 复选框
  17.                 - file 文件类型
  18.         name: 控件属性的标识符，数据的变量名
  19.         value: 值 数据的内容
  20.         required: 必填项
  21.         -->
  22.         <label for="userName">账号:</label>
  23.         <input type="text" id="userName" name="userName" value="admin" placeholder="用户名" required>
  24.         <label for="email">Email:</label>
  25.         <input type="email" id="email" name="email" value="xx@xx.com" placeholder="demo@emailname" required>
  26.         <label for="password">密码:</label>
  27.         <input type="password" id="password" name="password" value="111111" placeholder="不少于6位" required>
  29.         <!-- 2. 单选按钮与复选框 -->
  30.         <!-- 一组单选按钮必须共用同一个name值属性，否则不能实现单选，不能保证值的唯一性 -->
  31.         <!-- 将label的for属性设置为默认radio的id值 就可以实现点击标签回到默认状态 -->
  32.         <label for="secret">性别：</label>
  33.         <div>
  34.             <input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
  35.             <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
  36.             <input type="radio" name="gender" value="secret" id="secret" checked><label for="secret">保密</label>
  37.         </div>
  39.         <!-- 复选框的name属性值应该写成数组的格式名称，这样才确保服务器可以接受到一组值 -->
  40.         <!-- 注意radio checkbox的值有什么区别 -->
  41.         <label for="#">兴趣：</label>
  42.         <div>
  43.             <input type="checkbox" name="hobby[]" value="read" id="read"><label for="read">读书</label>
  44.             <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label>
  45.             <input type="checkbox" name="hobby[]" value="travel" id="travel" checked><label for="travel">旅游</label>
  46.             <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">编程</label>
  48.         </div>
  50.         <!-- 3. 下拉列表 -->
  51.         <!-- 默认第一个option为默认值 如果想修改默认可以在对应的option中增加 selected属性 -->
  52.         <!-- 如果在option 标签中出现label 显示label 
  53.             label 属性的优先级大于option 内部的文本 -->
  54.         <label for="">学历</label>
  55.         <select name="edu" id="">
  56.             <option value="1">初中</option>
  57.             <option value="2">高中</option>
  58.             <option value="3" selected>大学</option>            
  59.             <option value="4" label="老司机">教授</option>
  60.         </select>
  62.         <!-- 如果想要实现多选需要增加 select 的 multiple size="2" 这种情况很少使用，一般不会这么做-->
  63.         <label for="">喜欢的编程语言</label>
  64.         <select name="edu2" id="" multiple size="2">
  65.             <option value="1">Javascript</option>
  66.             <option value="2">Java</option>
  67.             <option value="3">C#</option>
  68.             <option value="4">C</option>
  69.             <option value="5">C++</option>
  70.             <option value="6">Python</option>
  71.         </select>
  73.         <!-- 4. 文件域和隐藏域 -->
  74.         <!-- 上传文件：
  75.         1. 请求类型必须是POST
  76.         2. 表单数据必须取消所有的默认编码，使用二进制流 
  77.         使用form的 enctype="multipart/form-data"属性
  78.          - application/x-www-form-urlencoded：使用默认编码 
  79.          - multipart/form-data:使用二进制原始数据传输
  80.         变量命名规则：字母下划线开头，不能使用-连接符name是元素的变量
  81.         限制文件大小  隐藏域 type="hidden",前端看不到，供后端处理使用
  82.     -->
  83.         <label for="user-pic">头像</label>
  84.         <input type="hidden" name="MAX_FILE_SIZE" value="80000">
  85.         <input type="file" name="user_pic" id="user-pic">
  86.         <!-- 头像占位符 -->
  87.         <div class="user-pic" style="grid-column: span 2"></div>
  89.         <label for="user-resume">简历：</label>
  90.         <input type="hidden" name="MAX_FILE_SIZE" value="100000">
  91.         <input type="file" name="user_resume" id="user-resume">
  92.         <!-- 简历占位符 -->
  93.         <div class="user-resume" style="grid-column: span 2"></div>
  95.         <!-- 5. 文本域 -->
  96.         <label for="comment">备注：</label>
  97.         <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  98.         <!-- <span class="tips">输入内容不能不能多于 <em>120</em> 字符</span> -->
  99.         <!-- 提交按钮 -->
  100.         <button>提交</button>
  101.     </form>

总结：

列表表单和表格是重要的容器，呈现数据和收集用户信息的重要载体。应用的在合适的位置，才能更好的发挥作用。需要注意 input 标签的 type属性的几个值，file类型时注意隐藏域的限制大小；表单form 的 method 属性GET和POST区别，上传文件是必须使用 method=”POST”,enctype=”multipart/form-data”属性。

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