Blogger Information
Blog 2
fans 0
comment 0
visits 1848
Related recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格/表单/表单域
潘海龙
Original
697 people have browsed it

表格与表单

表格

数据格式化展示的工具

<tr></tr>标签是表格的一行,<td></td>标签是表格的列,tr 和 td 相交即单元格,单元格内是数据。<table></table>是数据的容器,应用:<table></table><tr>…<td></table>
表头thead,表主体tbody,表底部tfoot;单元格水平合并colspan,单元格垂直合并rowspan,必须用在<td></td>标签中。
<table></table>标签中,用<colgroup></colgroup>标签为表的每一列设置个性的样式,【注意:占位符的应用】

示例Demo1

  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>表格1</title>
  7. </head>
  8. <body>
  9. <!-- 表格:数据格式化展示的工具 -->
  10. <!-- table 是表格容器 -->
  11. <table border="1" cellspacing="0" cellpadding="5" width="300" height="130">
  12. <!-- 为每一列设置个性的样式 -->
  13. <colgroup>
  14. <col bgcolor="cyan">
  15. <col bgcolor="yellow" span="3">
  16. </colgroup>
  17. <caption>
  18. 安睡宝宝商品表
  19. </caption>
  20. <!-- thead 表头,在当前代码中thead的写法是非必要的写法,用了thead后代码规划整洁 -->
  21. <thead>
  22. <tr>
  23. <!-- th是td的plus,添加了加粗和居中效果 -->
  24. <th>货号</th>
  25. <th>名称</th>
  26. <th>规格</th>
  27. <th>价格</th>
  28. </tr>
  29. </thead>
  30. <!-- tbody 表格的主体,如果:代码中没写,浏览器默认它是表格主体,自动加上。建议大家代码中写上tbody -->
  31. <tbody>
  32. <tr>
  33. <td>K7</td>
  34. <td>爱的安睡曲</td>
  35. <td>56片/L</td>
  36. <td>78</td>
  37. </tr>
  38. <tr>
  39. <td>S7</td>
  40. <td>七优安护</td>
  41. <!-- 单元格的垂直合并 -->
  42. <!-- rowspan / colspan:必须用在dt标签中 -->
  43. <td rowspan="2">52片/L</td>
  44. <td>53</td>
  45. </tr>
  46. <tr>
  47. <td>S7-p</S></td>
  48. <td>尿片</td>
  49. <!-- <td>52片/L</td> -->
  50. <td>43</td>
  51. </tr>
  52. </tbody>
  53. <!-- 表格的底部 -->
  54. <tfoot>
  55. <tr>
  56. <!-- 单元格的水平合并 -->
  57. <td>说明</td>
  58. <td colspan="3">这3款都是安睡宝宝系列</td>
  59. </tr>
  60. </tfoot>
  61. </table>
  62. </body>
  63. </html>

运行图

dome1

表单

表单是用户将信息发送到服务器上的最重要的手段之一。
form表单元素;<form></form>之间元素叫表单控件元素。
<form><input/></form>

复选框会返回多个值,所以 name 属性应该使用数组的方式,要加上[]。如:hobby[],
对表单来讲,name 和 id 是一个意思,

文件域

隐藏域

内联框架

iframe,内联框架,相当于画中画,应用网站后台。

示例demo2

  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>表单1</title>
  7. </head>
  8. <body>
  9. <h3>安睡宝宝会员注册</h3>
  10. <hr />
  11. <div>
  12. <form>
  13. <!-- fieldset 表单域/表单控件分组 -->
  14. <fieldset style="background-color:yellowgreen;border-radius: 20px;">
  15. <legend>基本信息(必填)</legend>
  16. <div>
  17. <!-- 内部的元素:表单控件元素 -->
  18. <!-- 单行文本框 -->
  19. <!-- type文本框类型,name文本框变量,value文本框的值,placeholder文本框提示, -->
  20. <!-- required是布尔属性,它的值是true/false,只要出现这个属性就表示true,否则就是false -->
  21. <label for="username">宝宝名:</label>
  22. <!-- 宝宝名与文本框绑定 -->
  23. <input
  24. id="username"
  25. type="text"
  26. name="username"
  27. value=""
  28. placeholder="不少于8个字符"
  29. required
  30. autofocus
  31. />
  32. </div>
  33. <div>
  34. <!-- 密码框是一个增强版本的文本框,因为里面显示的内容与文本框不一样。原因在于在html中对相关的数据做了预制的规则。 -->
  35. <label for="pwd">密码:</label>
  36. <input
  37. id="pwd"
  38. type="password"
  39. name="password"
  40. value=""
  41. placeholder="不少于8个字符"
  42. required
  43. </div>
  44. <div>
  45. <label for="yueling">月龄:</label>
  46. <input
  47. id="yueling"
  48. type="text"
  49. name="yueling"
  50. value=""
  51. placeholder="***个月"
  52. required
  53. </div>
  54. <div>
  55. <label for="chima">当前使用纸尿裤的尺码:</label>
  56. <input type="text" id="chima" list="chimaxinhao">
  57. <datalist id="chimaxinhao">
  58. <option value="NB">初生儿(NB;≤5kg)</option>
  59. <option value="S">小号(S;4-8kg)</option>
  60. <option value="M">中号(M;6-11kg)</option>
  61. <option value="L">大号(L;9-14kg)</option>
  62. <option value="XL">加大号(XL;12-17kg)</option>
  63. <option value="XXL">特大号(XXL;≥15kg)</option>
  64. <option value="buqingchu">不清楚</option>
  65. </datalist>
  66. </div>
  67. </fieldset>
  68. <fieldset style="background-color:yellowgreen;border-radius: 20px;">
  69. <legend>其它(选填)</legend>
  70. <div>
  71. <label for="">宝宝生日:</label>
  72. <input type="date" name="brithday">
  73. </div>
  74. <div>
  75. <label for="biaozhun">体形:</label>
  76. <!-- 单选按钮的每一个选项控件的name属性的值必须完全一样 -->
  77. <input type="radio" name="bodytype" id="pianpang"><label for="pianpang">偏胖</label>
  78. <input type="radio" name="bodytype" id="pianshou"><label for="pianshou">偏瘦</label>
  79. <!-- checked,默认选项 -->
  80. <input type="radio" name="bodytype" id="biaozhun" checked><label for="biaozhun">标准</label>
  81. </div>
  82. <!-- 预定义复合框/下拉列表 -->
  83. <div>
  84. <label for="">宝妈爱好:</label>
  85. <!-- 因为复选框会返回多个值,所以name属性应该使用数组的方式 -->
  86. <input type="checkbox" name="hobby" id="meishi"><label for="meishi">美食</label>
  87. <input type="checkbox" name="hobby" id="dongman"><label for="dongman">动漫</label>
  88. <input type="checkbox" name="hobby" id="mengwa" checked><label for="mengwa">萌娃</label>
  89. <input type="checkbox" name="hobby" id="sheying"><label for="sheying">摄影</label>
  90. <input type="checkbox" name="hobby" id="dianying"><label for="dianying">电影</label>
  91. <input type="checkbox" name="hobby" id="lvyou"><label for="lvyou">旅游</label>
  92. </div>
  93. <div>
  94. <label for="saiwa">晒娃:</label>
  95. <input type="file" name="saiwa_img" id="saiwa">
  96. <!-- 限制文件上传的大小,用隐藏域设定。 -->
  97. <input type="hidden" name="MAX_FILE_SIZE" value="8388608">
  98. </div>
  99. </fieldset>
  100. <hr />
  101. <div>
  102. <button style="background-color: tomato;border-radius: 20px;">提交</button>
  103. </div>
  104. </form>
  105. </body>
  106. </html>

运行图

demo2

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