Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单控件的实例演示与课程表
Blogger Information
Blog 16
fans 0
comment 0
visits 11407
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单控件的实例演示与课程表
多@点的博客
Original
511 people have browsed it

表单控件的实例演示

表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
  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>表单</title>
  7.     <link rel="stylesheet" href="css/form.css">
  8. </head>
  9. <body>
  10.     <h3 class="title">用户注册</h3>
  11.     <form action="check.php" method="POST" class="register" enctype="multipart/form-data">
  12.         <!-- 单行文本框 -->
  13.         <label for="username">账号：</label>
  14.         <input type="text" id="username" name="username" value="" placeholdel="不能为空" required />
  15.         <label for="email">邮箱：</label>
  16.         <input type="email" id="email" name="email" value="" placeholdel="demo@email.com" required />
  17.         <label for="password">密码：</label>
  18.         <input type="password" id="password" name="password" value="" placeholdel="不少于6位" required />
  19.         <!-- 单选按钮与复选框 -->
  20.         <label for="secret">性别：</label>
  21.         <div>
  22.             <input type="radio" name="gender" value="male" id="male"/><label for="male">男</label>
  23.             <input type="radio" name="gender" value="female" id="female"/><label for="female">女</label>
  24.             <input type="radio" name="gender" value="secret" id="secret" checked/><label for="secret">保密</label>
  25.         </div>
  26.         <label for="#">兴趣：</label>
  27.         <div>
  28.             <input type="checkbox" name="hobby[]" value="game" id="game" checked /><label for="game">游戏</label>
  29.             <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label>
  30.             <input type="checkbox" name="hobby[]" value="travel" id="travel" /><label for="travel">旅游</label>
  31.             <input type="checkbox" name="hobby[]" value="program" id="program" checked /><label for="program">编程</label>
  32.         </div>
  33.         <!-- 下拉列表框     -->
  34.         <label for="edu">学历：</label>
  35.         <select name="edu" id="edu">
  36.             <option value="1">小学</option>
  37.             <option value="2">初中</option>
  38.             <option value="3">高中</option>
  39.             <option value="4" selected>本科</option>
  40.             <option value="4">研究生</option>
  41.         </select>
  42.         <!-- 文件与隐藏域 -->
  43.         <label for="user-pic">头像：</label>
  44.         <input type="hidden" name="MAX_FILE_SIZE" value="80000"/>
  45.         <input type="file" name="user-pic" id="user-pic"/>
  46.         <div class="user-pic" style="grid-column:span 2"></div>
  47.         <label for="user-resume">简历：</label>
  48.         <input type="hidden" name="MAX_FILE_SIZE" value="100000"/>
  49.         <input type="file" name="user-resume" id="user-resume"/>
  50.         <div class="user-resume" style="grid-column:span 2"></div>
  51.         <!-- 文本域 -->
  52.         <label for="comment">备注：</label>
  53.         <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  54.         <button>提交</button>
  56.     </form>
  57. </body>
  58. </html>
  59. <script src="css/demo.js"></script>

课程表

html代码
  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>课程表</title>
  7.     <link rel="stylesheet" href="css/table.css" />
  8. </head>
  9. <body>
  10.     <table class="lesson">
  11.         <caption>
  12.             北京中学课程表
  13.         </caption>
  14.         <thead>
  15.             <tr>
  16.                 <th colspan="2"></th>
  17.                 <th>星期一</th>
  18.                 <th>星期二</th>
  19.                 <th>星期三</th>
  20.                 <th>星期四</th>
  21.                 <th>星期五</th>
  22.                 <th>星期六</th>
  23.                 <th>星期日</th>
  24.             </tr>
  25.         </thead>
  26.         <tbody>
  27.             <tr>
  28.                 <td rowspan="5">上午</td>
  29.                 <td>1</td>
  30.                 <td>语文</td>
  31.                 <td>英语</td>
  32.                 <td>数学</td>
  33.                 <td>物理</td>
  34.                 <td>电脑</td>
  35.                 <td rowspan="5">图书馆自习</td>
  36.                 <td rowspan="5">音乐鉴赏</td>
  37.             </tr>
  38.             <tr>
  39.                 <td>2</td>
  40.                 <td>地理</td>
  41.                 <td>英语</td>
  42.                 <td>历史</td>
  43.                 <td>物理</td>
  44.                 <td>语文</td>
  45.             </tr>
  46.             <tr>
  47.                 <td>3</td>
  48.                 <td>生物</td>
  49.                 <td>历史</td>
  50.                 <td>数学</td>
  51.                 <td>语文</td>
  52.                 <td>化学</td>
  53.             </tr>
  54.             <tr>
  55.                 <td>4</td>
  56.                 <td>语文</td>
  57.                 <td>物理</td>
  58.                 <td>历史</td>
  59.                 <td>地理</td>
  60.                 <td>化学</td>
  61.             </tr>
  62.             <tr>
  63.                 <td>5</td>
  64.                 <td>语文</td>
  65.                 <td>英语</td>
  66.                 <td>历史</td>
  67.                 <td>物理</td>
  68.                 <td>生物</td>
  69.             </tr>
  70.             <tr class="rest">
  71.                 <td colspan="9">中午午休</td>
  72.             </tr>
  73.             <tr>
  74.                 <td rowspan="3">下午</td>
  75.                 <td>6</td>
  76.                 <td>数学</td>
  77.                 <td>英语</td>
  78.                 <td>地理</td>
  79.                 <td>物理</td>
  80.                 <td>化学</td>
  81.                 <td colspan="2" rowspan="4" class="move">自由活动</td>
  82.             </tr>
  83.             <tr>
  84.                 <td>7</td>
  85.                 <td>美术</td>
  86.                 <td>英语</td>
  87.                 <td>历史</td>
  88.                 <td>物理</td>
  89.                 <td>语文</td>
  90.             </tr>
  91.             <tr>
  92.                 <td>8</td>
  93.                 <td>语文</td>
  94.                 <td>英语</td>
  95.                 <td>高数</td>
  96.                 <td>电脑</td>
  97.                 <td>大扫除</td>
  98.             </tr>
  99.             <tr class="night">
  100.                 <td colspan="7">晚自习</td>
  101.             </tr>
  102.         </tbody>
  103.     </table>
  104. </body>
  105. </html>
css代码
  1. .lesson{
  2.     border-collapse:collapse;
  3.     width:600px;
  4.     text-align:center;
  5.     margin:auto;
  6.     margin-top:100px;
  7. }
  8. .lesson caption{
  9.     font-size:1.4rem;
  10.     font-weight:800;
  11.     margin:1em;
  12. }
  13. .lesson thead{
  14.     background-color:lightcyan;
  15. }
  16. .lesson th,.lesson td{
  17.     border:1px solid;
  18.     padding:0.5em;
  19. }
  20. .lesson .rest {
  21.     background-color: #efefef;
  22.   }
  23. .lesson .night {
  24.     background-color: #4231da;
  25. }
  26. .lesson .move {
  27.     background-color: #dcee3a;
  28. }
  29. .lesson td[rowspan="5"],
  30. .lesson td[rowspan="3"] {
  31.   background-color: rgb(186, 245, 213);
  32. }

总结

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<thead> 标签用于组合 HTML 表格的表头内容。
<tfoot> 标签用于组合 HTML 表格的页脚内容。
<tbody> 标签用于组合 HTML 表格的主体内容。
<tr> 标签定义 HTML 表格中的行。
<th> 标签定义 HTML 表格中的表头单元格。
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 标签定义 HTML 表格中的标准单元格。
<td> 元素中的文本通常是普通的左对齐文本。
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