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

列表,表格与表单

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

列表,表格与表单

列表

列表分为:无序列表(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/>
      3. type="email"
      4. <label for="email">邮箱:</label>
      5. <input type="email" id="email" name="email" value="youxiang@163.com" required>
      6. type="password"
      7. <label for="password">密码:</label>
      8. <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>
  25. <tr>
  26. <td>2</td>
  27. <td>数学</td>
  28. <td>语文</td>
  29. <td>英语</td>
  30. <td>生物</td>
  31. <td>地理</td>
  32. </tr>
  33. <tr>
  34. <td>3</td>
  35. <td>数学</td>
  36. <td>语文</td>
  37. <td>英语</td>
  38. <td>生物</td>
  39. <td>地理</td>
  40. </tr>
  41. <tr>
  42. <td>4</td>
  43. <td>数学</td>
  44. <td>语文</td>
  45. <td>英语</td>
  46. <td>生物</td>
  47. <td>地理</td>
  48. </tr>
  49. <tr>
  50. <td colspan="7">中午休息</td>
  51. </tr>
  52. <tr>
  53. <td rowspan="4">下午</td>
  54. <td>1</td>
  55. <td>物理</td>
  56. <td>化学</td>
  57. <td>体育</td>
  58. <td>计算机</td>
  59. <td>自习</td>
  60. </tr>
  61. <tr>
  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>3</td>
  71. <td>物理</td>
  72. <td>化学</td>
  73. <td>体育</td>
  74. <td>计算机</td>
  75. <td>自习</td>
  76. </tr>
  77. <tr>
  78. <td>4</td>
  79. <td>物理</td>
  80. <td>化学</td>
  81. <td>体育</td>
  82. <td>计算机</td>
  83. <td>自习</td>
  84. </tr>
  85. </tbody>
  86. </table>

`

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议