search

博客列表 >列表，表格与表单

列表，表格与表单

小雨丶
小雨丶原创
2020年12月10日 16:18:33728浏览

列表，表格与表单

列表

列表分为：无序列表（ul），有序列表（ol）跟自定义列表（dl）

无序列表ul
<ul> <li></li> </ul>
有序列表ol
<ol> <li></li> </ol>
自定义列表dl
<dl> <dt>dt是列表标题</dt> <dd>dd是列表项</dd> </dl>

*li的父元素最好是ul,ol中的一个，利于抓取

*列表标签中可以包含其他标签，可以用来写导航，图文列表等

表格

表格的组成标签：table,tbody,thead,tr,td/th

  1. <table cellpadding="0" cellspacing="0" border="1">

<!-- 表格标题--> 

  1.             <caption>
  2.                 商品信息表
  3.             </caption>

<!-- 表头--> 

  1.             <thead>
  2.                 <tr>
  3.                     <td>ID</td>
  4.                     <td>品名</td>
  5.                     <td>单位</td>
  6.                     <td>数量</td>
  7.                     <td>金额</td>
  8.                 </tr>
  9.             </thead>

<!-- 表格的主体，一个表格可以有多个主体，但只能有一个表头--> 

  1.             <tbody>
  2.                 <tr>
  3.                     <td>a666</td>
  4.                     <td>手机</td>
  5.                     <td>888</td>
  6.                     <td>部</td>
  7.                     <td>1</td>
  8.                 </tr>
  9.                 <tr>
  10.                     <td>a666</td>
  11.                     <td>手机</td>
  12.                     <td>888</td>
  13.                     <td>部</td>
  14.                     <td>1</td>
  15.                 </tr>
  16.                 <tr>
  17.                     <td>a666</td>
  18.                     <td>手机</td>
  19.                     <td>888</td>
  20.                     <td>部</td>
  21.                     <td>1</td>
  22.                 </tr>
  23.                 <tr>
  24.                     <td>a666</td>
  25.                     <td>手机</td>
  26.                     <td>888</td>
  27.                     <td>部</td>
  28.                     <td>1</td>
  29.                 </tr>
  30.                 <tr>
  31.                     <td>a666</td>
  32.                     <td>手机</td>
  33.                     <td>888</td>
  34.                     <td>部</td>
  35.                     <td>1</td>
  36.                 </tr>
  37.             </tbody>
  38.         </table>

<!-- 表格：行与列的合并-->

colspan合并列,rowspan合并行

  1. <table cellpadding="0" cellspacing="0" border="1">
  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.                 </tr>
  14.             </thead>
  15.             <tbody>
  16.                 <tr>
  17.                     <td rowspan="4">上午</td>
  18.                     <td>1</td>
  19.                     <td>数学</td>
  20.                     <td>语文</td>
  21.                     <td>英语</td>
  22.                     <td>生物</td>
  23.                     <td>地理</td>
  24.                 </tr>
  25.                 <tr>
  26.                     <td>1</td>
  27.                     <td>数学</td>
  28.                     <td>语文</td>
  29.                     <td>英语</td>
  30.                     <td>生物</td>
  31.                     <td>地理</td>
  32.                 </tr>
  33.                 <tr>
  34.                     <td>1</td>
  35.                     <td>数学</td>
  36.                     <td>语文</td>
  37.                     <td>英语</td>
  38.                     <td>生物</td>
  39.                     <td>地理</td>
  40.                 </tr>
  41.                 <tr>
  42.                     <td>1</td>
  43.                     <td>数学</td>
  44.                     <td>语文</td>
  45.                     <td>英语</td>
  46.                     <td>生物</td>
  47.                     <td>地理</td>
  48.                 </tr>
  49.             </tbody>
  50.         </table>

*caption 标签必须紧随 table 标签之后，
只能对每个表格定义一个标题，
通常这个标题会被居中于表格之上。

*所有的数据必须填充到td/th中，th是td的plus，自带加粗，居中

表单

  • from
    1.   属性action：处理表单的程序
    2.   method：表单提交的类型——GET/POST两种，默认GET

  • input

    • 文本框
      type:控件类型
      name:数据的变量名
      value:数据的值
      required:必填选项
      placeholder:提示信息

      1.   type="text"
      2.   <input type="text" id="username" name="username" required/>
      4.   type="email"
      5.   <label for="email">邮箱：</label>
      6.   <input type="email" id="email" name="email" value="youxiang@163.com" required>
      8.   type="password"
      9.   <label for="password">密码：</label>
      10.   <input type="password" id="password" name="password" placeholder="不少于6位" required/>

    • 单选按钮
      一组单选，必须公用一个name属性值（name相同）
      默认值：checked
      1.   <label for="man">性别</label>
      2.   <input type="radio" name="gender" value="male" id="man" checked><label for="man">男</label>
      3.   <input type="radio" name="gender" value="male" id="women"><label for="women">女</label>
    • 复选框
      name值应该写成数组格式，这样才能确保服务器可以收到一组数据，默认值也是添加checked
      1.   <label for="">兴趣:</label>
      2.   <span><input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">游戏</label></span>
      3.   <span><input type="checkbox" name="hobby[]" value="game" id="shoot"><label for="shoot">摄影</label></span>
      4.   <span><input type="checkbox" name="hobby[]" value="game" id="travel" checked><label for="travel">旅游</label></span>
      5.   <span><input type="checkbox" name="hobby[]" value="game" id="program" checked><label for="program">编程</label></span>
    • 文件域和隐藏域
      1.请求类型必须是POST
      2.将表单数据编码设置为：enctype = “application/x-www-form-urlencoded”,传文件用multipart/form-data
      3.name是js或者php或者服务器中的数据,注意命名规则
      1.   <form action="" method="post" enctype="multipart/form-data">
      2. <label for="user-pic">头像：</label>
      3. <input type="file" name="user_pic" id="user-pic">
      4. <!-- 隐藏域，在前端看不见，值供后台处理时用-->
      5.       <input type="hidden" name="MAX_FILE_SIZE" value="80000">
      6.       <!--头像占位符-->
      7.       <div class="user-pic" style="grid-column:span 2;"></div>
      8.   </form>
  • select下拉框

<!-- multiple显示成列表 size显示数量,默认项是添加selected--> 

  1.         <label for="">学历：</label
  2.         <select name="edu" id="edu">
  3.             <option value="1">初中</option>
  4.             <option value="2">高中</option>
  5.             <option value="3" selected>大专</option>
  6.             <option value="4">本科</option>
  7.             <option value="5">研究生</option>
  8.             <option value="6" label="高级选项">这里的数据没有用</option>
  9.         </select>

  • textarea多行文本框

    1.       <label for="comment">备注：</label>
    2.       <textarea name="comment" id="comment" cols="30" rows="10"></textarea>
  • 表单控件的form属性

<!-- 不建议用此方法，会影响布局-->

<!-- form 中没有写东西，在要提交的标签上写上form=‘form的id’--> 

  1. <form action="" method="get" id="info"></form>
  2. <div class="form-content">
  3.    <div>
  4.        <label for="username">用户名：</label>
  5.        <input type="text" name="username" id="username" placeholder="不能为空" form="info" required>
  6.     </div>
  7.     <div>
  8.       <label for="email">邮箱：</label>
  9.       <input type="email" name="email" id="email" form="info">
  10.     </div>
  11.     <div>
  12.       <label for="password">密码：</label>
  13.       <input type="password" name="password" id="password" form="info">
  14.     </div>
  15.     <button form="info">提交</button>
  16. </div>

tbody虽然能自动生成，但是不能省略
label中for = input中的ID
get能看到密码等,不安全;
GET可以上传非敏感数据，数量不能太多，例如页码是可以的

作业

课程表

  1. <table cellpadding="0" cellspacing="0" border="1">
  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.     </tr>
  14.     </thead>
  15.     <tbody>
  16.     <tr>
  17.         <td rowspan="4">上午</td>
  18.         <td>1</td>
  19.         <td>数学</td>
  20.         <td>语文</td>
  21.         <td>英语</td>
  22.         <td>生物</td>
  23.         <td>地理</td>
  24.     </tr>
  26.     <tr>
  27.         <td>2</td>
  28.         <td>数学</td>
  29.         <td>语文</td>
  30.         <td>英语</td>
  31.         <td>生物</td>
  32.         <td>地理</td>
  33.     </tr>
  34.     <tr>
  35.         <td>3</td>
  36.         <td>数学</td>
  37.         <td>语文</td>
  38.         <td>英语</td>
  39.         <td>生物</td>
  40.         <td>地理</td>
  41.     </tr>
  42.     <tr>
  43.         <td>4</td>
  44.         <td>数学</td>
  45.         <td>语文</td>
  46.         <td>英语</td>
  47.         <td>生物</td>
  48.         <td>地理</td>
  49.     </tr>
  50.     <tr>
  51.         <td colspan="7">中午休息</td>
  52.     </tr>
  53.     <tr>
  54.         <td rowspan="4">下午</td>
  55.         <td>1</td>
  56.         <td>物理</td>
  57.         <td>化学</td>
  58.         <td>体育</td>
  59.         <td>计算机</td>
  60.         <td>自习</td>
  61.     </tr>
  63.     <tr>
  64.         <td>2</td>
  65.         <td>物理</td>
  66.         <td>化学</td>
  67.         <td>体育</td>
  68.         <td>计算机</td>
  69.         <td>自习</td>
  70.     </tr>
  71.     <tr>
  72.         <td>3</td>
  73.         <td>物理</td>
  74.         <td>化学</td>
  75.         <td>体育</td>
  76.         <td>计算机</td>
  77.         <td>自习</td>
  78.     </tr>
  79.     <tr>
  80.         <td>4</td>
  81.         <td>物理</td>
  82.         <td>化学</td>
  83.         <td>体育</td>
  84.         <td>计算机</td>
  85.         <td>自习</td>
  86.     </tr>
  87.     </tbody>
  88. </table>

`

上一条：前端开发环境与htm基础下一条：14期1209作业：表格与表单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多