简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 表格和表单
Blogger Information
Blog 17
fans 0
comment 0
visits 6186
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
234 people have browsed it

表格和表单

1. 表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>课程表</title>
  8.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         课程表
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <th>时间</th>
  17.           <th>星期1</th>
  18.           <th>星期2</th>
  19.           <th>星期3</th>
  20.           <th>星期4</th>
  21.           <th>星期5</th>
  22.         </tr>
  23.       </thead>
  24.       <tbody>
  25.         <tr>
  26.           <td rowspan="3">上午</td>
  27.           <td>语文</td>
  28.           <td>语文</td>
  29.           <td>语文</td>
  30.           <td>语文</td>
  31.           <td>语文</td>
  32.         </tr>
  33.         <tr>
  34.           <!-- <td>上午</td> -->
  35.           <td>语文</td>
  36.           <td>语文</td>
  37.           <td>语文</td>
  38.           <td>语文</td>
  39.           <td>语文</td>
  40.         </tr>
  41.         <tr>
  42.           <!-- <td>上午</td> -->
  43.           <td>语文</td>
  44.           <td>语文</td>
  45.           <td>语文</td>
  46.           <td>语文</td>
  47.           <td>语文</td>
  48.         </tr>
  49.         <tr>
  50.           <td>中午</td>
  51.           <td colspan="5">午休</td>
  52.           <!-- <td>语文</td>
  53.           <td>语文</td>
  54.           <td>语文</td>
  55.           <td>语文</td>
  56.           <td>语文</td> -->
  57.         </tr>
  58.         <tr>
  59.           <td rowspan="3">下午</td>
  60.           <td>语文</td>
  61.           <td>语文</td>
  62.           <td>语文</td>
  63.           <td>语文</td>
  64.           <td>语文</td>
  65.         </tr>
  67.         <tr>
  68.           <!-- <td>上午</td> -->
  69.           <td>语文</td>
  70.           <td>语文</td>
  71.           <td>语文</td>
  72.           <td>语文</td>
  73.           <td>语文</td>
  74.         </tr>
  75.         <tr>
  76.           <!-- <td>上午</td> -->
  77.           <td>语文</td>
  78.           <td>语文</td>
  79.           <td>语文</td>
  80.           <td>语文</td>
  81.           <td>语文</td>
  82.         </tr>
  83.       </tbody>
  84.     </table>
  85.     <style>
  86.       td,
  87.       th {
  88.         border: 1px solid black;
  89.       }
  90.       table caption {
  91.         font-weight: bolder;
  92.         font-size: larger;
  93.         margin-bottom: 5px;
  94.       }
  95.       table thead {
  96.         background-color: lightgreen;
  97.       }
  98.       table {
  99.         box-sizing: content-box;
  100.         width: 500px;
  101.         margin: 0 auto;
  102.         text-align: center;
  103.         border-collapse: collapse;
  104.         border: 2px solid black;
  105.       }
  107.     </style>
  108.   </body>
  109. </html>

2. 表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>用户注册</title>
  8.   </head>
  9.   <body>
  10.     <form action="register.php" method="post">
  11.       <fieldset style="display: inline-grid; gap: 1em">
  12.         <legend>用户注册</legend>
  13.         <div>
  14.           <label for="username">用户名:</label>
  15.           <input
  16.             type="text"
  17.             name="username"
  18.             id="username"
  19.             placeholder="至少8位"
  20.           />
  21.         </div>
  22.         <div>
  23.           <label for="email">邮&nbsp&nbsp&nbsp箱:</label
  24.           ><input
  25.             type="email"
  26.             name="email"
  27.             id="email"
  28.             placeholder="username@126.com"
  29.           />
  30.         </div>
  31.         <div>
  32.           <label for="pwd">密&nbsp&nbsp&nbsp码:</label>
  33.           <input type="password" name="pwd" id="pwd" />
  34.         </div>
  35.         <div>
  36.           <label for="age">年&nbsp&nbsp&nbsp龄:</label>
  37.           <input
  38.             type="number"
  39.             name="age"
  40.             id="age"
  41.             value="24"
  42.             min="18"
  43.             max="70"
  44.             step="2"
  45.           />
  46.         </div>
  47.         <div>
  48.           <label for="birthday">年&nbsp&nbsp&nbsp龄:</label>
  49.           <input
  50.             type="date"
  51.             name="birthday"
  52.             id="birthday"
  53.             value="1980-02-01"
  54.             min="1949-01-01"
  55.             max="2004-01-01"
  56.           />
  57.         </div>
  58.         <div>
  59.           <label for="secret">性&nbsp&nbsp&nbsp别:</label>
  60.           <input type="radio" name="gender" id="male" value="male" /><label
  61.             for="male"
  62.             >男</label
  63.           ><input type="radio" name="gender" id="female" value="female" /><label
  64.             for="female"
  65.             >女</label
  66.           ><input
  67.             type="radio"
  68.             name="gender"
  69.             id="secret"
  70.             value="secret"
  71.             checked
  72.           /><label for="secret">保密</label>
  73.         </div>
  74.         <div>
  75.           <label for="blog">博&nbsp&nbsp&nbsp客:</label>
  76.           <input type="url" name="blog" id="url" placeholder="http://" />
  77.         </div>
  78.         <div class="color">
  79.           <label for="color">背景:</label>
  80.           <input
  81.             type="color"
  82.             name="bgcolor"
  83.             id="color"
  84.             value="#ffff00"
  85.             onchange="setBgColor(this,this.form)"
  86.           />
  87.         </div>
  88.         <div>
  89.           <label for="">爱&nbsp&nbsp&nbsp好:</label
  90.           ><input type="checkbox" name="hobby[]" id="game" value="game" /><label
  91.             for="game"
  92.             >游戏</label
  93.           ><input
  94.             type="checkbox"
  95.             name="hobby[]"
  96.             id="computer"
  97.             value="computer"
  98.           /><label for="computer">电脑</label
  99.           ><input type="checkbox" name="hobby[]" id="film" value="film" /><label
  100.             for="film"
  101.             >看电影</label
  102.           ><input
  103.             type="checkbox"
  104.             name="hobby[]"
  105.             id="shopping"
  106.             value="shopping"
  107.           /><label for="shopping">购物</label>
  108.         </div>
  109.          <div>
  110.           <label for="keyword">关键字</label>:</label>
  111.           <input
  112.             type="search"
  113.             name="keyword"
  114.             id="keyword"
  115.            placeholder="请输入关键词"
  116.           />
  117.         </div>
  118.         <div><label for="upload">表格上传</label><input type="file" name="excel_upload" id="upload" accept=".xls,.xlsx"/>
  119.          <button type="button" onclick="fileUploads(this.form)">上传</button></div>
  120.         <div><label for="education">教育程度</label>
  121.         <select name="edu" id="edu">
  122.           <option value="" selected disabled>请选择</option>
  123.           <option value="0">文盲</option>
  124.           <optgroup label="义务教育">
  125.             <option value="1">小学</option>
  126.             <option value="2">初中</option>
  127.             <option value="3">高中</option>
  128.           </optgroup>
  129.           <optgroup label="高等教育">
  130.             <option value="4">大专</option>
  131.             <option value="5">大学本科</option>
  132.             <option value="6">硕士研究生</option>
  133.             <option value="7">博士研究生</option>
  134.           </optgroup>
  135.         </select>
  136.         </div>
  137.         <div class="like">
  138.           <label for="firm">工作单位: </label>
  139.           <input type="search" name="firm" list="firms" id="keyword" />
  140.           <datalist id="firms">
  141.             <option value="百度">百度</option>
  142.             <option value="阿里巴巴">阿里巴巴</option>
  143.             <option value="亚马逊">亚马逊</option>
  144.             <option value="京东">京东</option>
  145.             <option value="腾讯">腾讯</option>
  146.             <option value="php中文网">php中文网</option>
  147.           </datalist>
  148.         </div>
  149.         <div>
  150.           <label for="comment">自我介绍:</label>
  151.           <textarea name="comment" id="comment" cols="30" rows="5" maxlength="200" style="resize: none">
  152.             简单介绍下自己
  153.           </textarea>
  154.         </div>
  155.       </fieldset>
  156.     </form>
  157.      <script>
  158.       function showPsw(ele, form) {
  159.         const psw = form.password
  160.         if (psw.type === 'password') {
  161.           psw.type = 'text'
  162.           ele.textContent = '隐藏'
  163.         } else if (psw.type === 'text') {
  164.           psw.type = 'password'
  165.           ele.textContent = '显示'
  166.         } else {
  167.           return false
  168.         }
  169.       }
  171.       // 设置表单背景
  172.       function setBgColor(ele, form) {
  173.         form.firstElementChild.style.backgroundColor = ele.value
  174.       }
  176.       // 文件上传
  177.       function fileUploads(form) {
  178.         let tips = ''
  179.         if (form.excel_upload.value.length === 0) {
  180.           tips += '文件不能为空'
  181.         } else {
  182.           tips += '上传成功'
  183.         }
  184.         alert(tips)
  185.       }
  186.     </script>
  187.   </body>
  188. </html>
Correcting teacher：PHPzPHPz

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！