博客列表 >关于表格和表单的简易写法

关于表格和表单的简易写法

Tyrrell
Tyrrell原创
2021年03月23日 10:05:20743浏览

如何做出一张八行六列的课程表?
准备工具:
vscode编译器
FastStone Capture取色器,用于颜色选取

<!-- 表格 (table)-->
<table border="1px" cellspacing="0px" cellpadding="5px" height="250px" width="450px">
<!-- 表格标题 -->
<caption style="font-weight: bold">
周一至周五课程安排
</caption>
<!-- 第一行、表头 -->
<thead>
<tr bgcolor="#DEFEFF">
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>

  1. <!-- 内容 -->
  2. <tbody align="center">
  3. <!-- align=“cente”居中对齐 -->
  4. <!-- 第二行 -->
  5. <tr>
  6. <!-- 上午 -->
  7. <td rowspan="3" bgcolor="#87CEF8">上午</td>
  8. <td>语文</td>
  9. <td>计算机</td>
  10. <td>数学</td>
  11. <td>美术</td>
  12. <td>体育</td>
  13. </tr>
  14. <!-- 第三行 -->
  15. <tr>
  16. <td>计算机</td>
  17. <td>语文</td>
  18. <td>体育</td>
  19. <td>数学</td>
  20. <td>英语</td>
  21. </tr>
  22. <!-- 第四行 -->
  23. <tr>
  24. <td>体育</td>
  25. <td>数学</td>
  26. <td>英语</td>
  27. <td>语文</td>
  28. <td>计算机</td>
  29. </tr>
  30. <!-- 第五行 -->
  31. <tr>
  32. <td colspan="6" bgcolor="#DEDEDE">午间休息</td>
  33. </tr>
  34. <!-- 第六行 -->
  35. <tr>
  36. <td rowspan="2" bgcolor="#87CEF8">下午</td>
  37. <td>英语</td>
  38. <td>语文</td>
  39. <td>体育</td>
  40. <td>计算机</td>
  41. <td>数学</td>
  42. </tr>
  43. <!-- 第七行 -->
  44. <tr>
  45. <td>计算机</td>
  46. <td>语文</td>
  47. <td>英语</td>
  48. <td>数学</td>
  49. <td>体育</td>
  50. </tr>
  51. </tbody>
  52. <!-- 表格底部 -->
  53. <tfoot>
  54. <!-- 第八行 -->
  55. <tr bgcolor="#8FEE8F">
  56. <td>备注:</td>
  57. <td colspan="5">每天下午18:00-12:00,进行晚自习</td>
  58. </tr>
  59. </tfoot>
  60. </table>

2、如何做出一张简易的用户注册表单?
准备工具:
vscode编译器

<div>
<!-- 表单(form) -->
<h1>信息注册页面</h1>
<form action="" method="POST">
<!-- method==提交类型(详见:前端开发-html元素.svg里的method:提交类型) -->
<!-- label== 控件变迁-->
<!-- for===与指定控件的id属性进行绑定,实现点击标签时(“文本输入”),被绑定的标签自动获取焦点 -->

<!-- 文本输入框 -->
<label for="name">名字:</label>
<input type="text" id="name" />
<br /><br />

<!-- 密码输入框 -->
<label for="password">密码:</label>
<input type="password" name="" id="password" />
<br /><br />

<!-- 单选框 -->
<div>
<label for="">性别:</label>
<input type="radio" name="Gender" id="male" />
<label for="male">男</label>
<input type="radio" name="Gender" id="female" />
<label for="female">女</label>
<input type="radio" name="Gender" id="secrecy" />
<label for="secrecy">保密</label> <br /><br />
</div>

  1. <!-- 多选框 -->
  2. <label for="">爱好:</label>
  3. <input type="checkbox" name="" id="game" />
  4. <label for="game">游戏</label>
  5. <input type="checkbox" name="" id="read a book" />
  6. <label for="read a book">看书</label>
  7. <input type="checkbox" name="" id="Travel" />
  8. <label for="Travel">旅游</label>
  9. <input type="checkbox" name="" id="motion" />
  10. <label for="motion">运动</label>
  11. <input type="checkbox" name="" id="foodie" />
  12. <label for="foodie">吃货</label>
  13. </form>
  14. <br />
  15. <!-- 下拉列表 -->
  16. <label for="">星座:</label>
  17. <select name="constellation" id="">
  18. <option value="scorpio">天蝎座</option>
  19. <option value="aquarius">水瓶座</option>
  20. <option value="leo">狮子座</option>
  21. <option value="libra">天秤座</option>
  22. <option value="Gemini">双子座</option>
  23. </select>
  24. <br /><br />
  25. <!-- 邮件 -->
  26. <div>
  27. <label for="email">邮件:</label>
  28. <input type="email" name="" id="email" />
  29. </div>
  30. <br />
  31. <!-- 文本域 -->
  32. <label for="remarks:">备注:</label><br />
  33. <textarea name="remarks:" id="remarks:" cols="40" rows="10"></textarea>
  34. <div>
  35. <!-- 提交按钮 -->
  36. <input type="button" value="提交" />
  37. </div>
  38. </div>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议