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

表格、列表与表单

刚哥哥
刚哥哥原创
2020年12月13日 17:30:20602浏览

表格

课程表

  1. <table border="1px">
  2. <caption>合肥市第十六小学课程表</caption>
  3. <tr>
  4. <td colspan="2"></td>
  5. <td>星期一</td>
  6. <td>星期二</td>
  7. <td>星期三</td>
  8. <td>星期四</td>
  9. <td>星期五</td>
  10. </tr>
  11. <tr>
  12. <td rowspan="4" width="50px">上午</td>
  13. <td width="30px">1</td>
  14. <td>音乐</td>
  15. <td>体育</td>
  16. <td>语文</td>
  17. <td>数学</td>
  18. <td>英语</td>
  19. </tr>
  20. <tr>
  21. <td>2</td>
  22. <td>语文</td>
  23. <td>政治</td>
  24. <td>美术</td>
  25. <td>英语</td>
  26. <td>数学</td>
  27. </tr>
  28. <tr>
  29. <td>3</td>
  30. <td>语文</td>
  31. <td>美术</td>
  32. <td>数学</td>
  33. <td>体育</td>
  34. <td>音乐</td>
  35. </tr>
  36. <tr>
  37. <td>4</td>
  38. <td>美术</td>
  39. <td>语文</td>
  40. <td>美术</td>
  41. <td>数学</td>
  42. <td>体育</td>
  43. </tr>
  44. <tr>
  45. <td colspan="7" align="center">中午休息</td>
  46. <!-- <td></td>
  47. <td></td>
  48. <td></td>
  49. <td></td>
  50. <td></td>
  51. <td></td>
  52. <td></td> -->
  53. </tr>
  54. <tr>
  55. <td rowspan="3">下午</td>
  56. <td>5</td>
  57. <td>数学</td>
  58. <td>语文</td>
  59. <td>英语</td>
  60. <td>物理</td>
  61. <td>地理</td>
  62. </tr>
  63. <tr>
  64. <td>6</td>
  65. <td>数学</td>
  66. <td>大神</td>
  67. <td>英语</td>
  68. <td>物理</td>
  69. <td>地理</td>
  70. </tr>
  71. <tr>
  72. <td>7</td>
  73. <td>课外活动</td>
  74. <td colspan="4">各班各自组织,自愿参加</td>
  75. <!-- <td></td>
  76. <td></td>
  77. <td></td> -->
  78. </tr>
  79. </table>
  1. ## 表格标签:
  2. 1. 一个表格只能有一个表头(th标签定义表头),
  3. 2. caption 标签定义表格标题,表表格表题通常也只有一个。
  4. 3. tr 标签定义一行数据,
  5. 4. td 标签定义表格单元(实际放内容的)。
  6. 5. thead 标签定义表格的页眉。
  7. 6. tbody 标签定义表格的主体,如果不写,默认也会自动加上,如果不写容易出错,所以要写起,方便后面。
  8. 7. colspan 行合并,写在td标签标签中,合并行时要注意代码是否有多余的td标签。
  9. 8. rowspan 列合并,(同上)。
  10. 9. table 常用属性:
  11. border 设置表格的边框,
  12. width 设置表格的宽,
  13. height 设置表格的高,
  14. borderColor 设置表格边框颜色,
  15. bgColor 设置表格背景颜色,

列表

列表分为:有序列表、无序列表和自定义列表。

  1. 无序列表;
    1. <ui>
    2. <li>无序列表</li>
    3. <li>无序列表</li>
    4. </ul>
  2. 有序列表;

    1. <ol>
    2. <li>有序列表</li>
    3. <li>有序列表</li>
    4. </ol>
  3. 自定义列表;
    1. <dl>
    2. <dt>电脑</dt>
    3. <dd>笔记本电脑</dd>
    4. <dd>台式电脑</dd>
    5. <dt>手机</dt>
    6. <dd>苹果手机</dd>
    7. <dd>华为手机</dd>
    8. </dl>

    列表标签

    1、 ul 定义无序列表;
    2、 ol 定义有序列表;
    3、 li 定义有序和无序列表的列表项,(具体数据)
    4、 dl 定义自定义列表,dt定义自定义列表列表项,dd 定义自定义列表的描述(具体内容);自定义列表通常用来做网站导航栏。

表单

from 表单长用于收集用户输入的数据。

  1. <from>
  2. <input />
  3. </from>

from 属性:

1、 action 定义表单提交时执行的动作,(就是提交给谁,如果省略action属性,默认则提交到当前页)
2、 method 定义提交表单时说用方式,(get、post);

get:明文方式,通过浏览器地址栏发送,不安全,有大小现在,用于不敏感的数据传输。

post:不可见,适合密码、文件、传输。

from 表单元素:

input 元素是表单最重要的元素,它有很多形态,根据不同的type 属性值,有不同的功能。
text 定义常规文本输入框;
radio 定义单选按钮,单选的name属性值必须一样,
submit 定义提交按钮;
passWord 定义密码字段;
checkbox 定义复选框;复选框的name属性值必须一样,并且是数字的形式,不然后台代码自能获取到一个数据。
button 定义按钮;
tel 定义电话号码输入字段;
search 定义搜索字段;
email 定义邮箱;
datetime-local 允许用户选择日期和时间(无时区)

<select></select>下拉列表元素。

option 定义列表选项,
<optin value="zhi">zhi</option>
语法:

  1. <select>
  2. <option value="zhi">
  3. zhi
  4. </option>
  5. </select>

元素属性

1、 required 表示必须;
2、 checked 设置默认值;
3、 type 设置 input 控件类型;
4、 name 是后台代码获取用户提交数据的标识,(可以理解为数据变量名)
5、 value 表示数据值,它的值,就是后台代码获取到的值。
6、 id 一个标识符,用法很多。

label 标签:

  1. label标签不会向用户呈现任何特殊效果,在label元素内点击文本,就会触发此控件。label 标签的for属性值必须与表单里对应的元素id 值相同。

示例代码

用户注册表单

  1. <form action = "2.php" method = "POST" enctype = "multipart/form-data">
  2. <div>
  3. <label for = "username">账号:</label>
  4. <input type = "text" id = "username" value = "" placeholder = "username" required />
  5. </div>
  6. <div><label for = "uemail">邮箱:</label>
  7. <input type = "email" id = "uemail" value = "" placeholder = "php@qq.com" required />
  8. </div>
  9. <div>
  10. <label for = "pw">密码:</label>
  11. <input type = "password" id = "pw" value = "" placeholder = "输入6到16个字符" required />
  12. <br />
  13. <label for = "xingbie">性别:</label>
  14. <input type = "radio" id = "msex" name = "xingbie" value = "" /><label for = "msex"></label>
  15. <input type = "radio" id = "nsex" name = "xingbie" value = "" /><label for = "nsex"></label>
  16. <input type = "radio" id = "bsex" name = "xingbie" value = "" checked /><label for = "bsex">保密</label>
  17. <br />
  18. <label for = "#">兴趣:</label>
  19. <input type = "checkbox" name = "xingqu[]" value = "dlq" checked /><label for = "dlq">打篮球</label>
  20. <input type = "checkbox" name = "xingqu[]" value = "bc" checked /><label for = "bc">编程</label>
  21. <input type = "checkbox" name = "xingqu[]" value = "kc" /><label for = "kc">开车</label>
  22. <input type = "checkbox" name = "xingqu[]" value = "youyong" /><label for = "youyong">游泳</label>
  23. </div>
  24. <div>
  25. <label for = "xueli">学历:</label>
  26. <select name = "xueli" id = "xueli">
  27. <option value = "xx">小学</option>
  28. <option value = "cz">初中</option>
  29. <option value = "gz">高中</option>
  30. <option value = "dx">大学</option>
  31. </select>
  32. </div>
  33. <div>
  34. <label for = "touxiang">头像:</label>
  35. <input type = "hidden" name = "maxfilesize" value = "80000" />
  36. <input type = "file" name = "usertouxiang" id = "touxiang" />
  37. <!-- 头像占位符 -->
  38. <div class = "" style = "grid-column: span 2"></div>
  39. </div>
  40. <div>
  41. <label for = "jl">简历:</label>
  42. <input type = "file" name = "jianli" id = "jl" />
  43. </div>
  44. <div>
  45. <label for = "bz">备注:</label>
  46. <textarea name = "beizhu" id = "bz" cols = "30" rows = "10">在此处输入备注</textarea>
  47. </div>
  48. <div>
  49. <label for = "tj">提交</label>
  50. <input type = "submit" id = "tj" />
  51. <button>button提交</button>
  52. </div>
  53. </form>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议