简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 课时表格+用户注册表单
Blogger Information
Blog 20
fans 0
comment 0
visits 11670
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
619 people have browsed it

一.表格

表格

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       width="80%"
  13.       align="center"
  14.       cellspacing="0"
  15.       cellpadding="5"
  16.     >
  17.       <caption style="font-weight: bolder; margin-bottom: 1em">
  18.         课时表
  19.       </caption>
  20.       <thead>
  21.         <tr bgcolor="lightcyan">
  22.           <th colspan="2">时间</th>
  23.           <th>星期一</th>
  24.           <!--td-->
  25.           <th>星期二</th>
  26.           <th>星期三</th>
  27.           <th>星期四</th>
  28.           <th>星期五</th>
  30.           <!-- <th></th> -->
  31.         </tr>
  32.       </thead>
  33.       <tbody>
  34.         <tr>
  35.           <th rowspan="3">上午</th>
  36.           <th>9:00-9:40</th>
  37.           <th>语文</th>
  38.           <th>数学</th>
  39.           <th>英语</th>
  40.           <th>音乐</th>
  41.           <th>体育</th>
  42.           <!-- <th></th> -->
  43.         </tr>
  44.         <tr>
  45.           <!-- <th></th> -->
  46.           <th>9:55-10:35</th>
  47.           <th>语文</th>
  48.           <th>数学</th>
  49.           <th>英语</th>
  50.           <th>音乐</th>
  51.           <th>体育</th>
  52.         </tr>
  53.         <tr>
  54.           <!-- <th></th> -->
  55.           <th>10:50-11:30</th>
  56.           <th>语文</th>
  57.           <th>英语</th>
  58.           <th>数学</th>
  59.           <th>音乐</th>
  60.           <th>体育</th>
  61.         </tr>
  62.         <tr>
  63.           <th colspan="7">午休(11:30-13:00)</th>
  64.           <!-- <th></th>
  65.         <th></th>
  66.         <th></th>
  67.         <th></th>
  68.         <th></th>
  69.         <th></th> -->
  70.         </tr>
  71.         <tr>
  72.           <th
  73.             rowspan="2
  74.         "
  75.           >
  76.             下午
  77.           </th>
  78.           <th>13:00-13:40</th>
  79.           <th>语文</th>
  80.           <th>英语</th>
  81.           <th>数学</th>
  82.           <th>音乐</th>
  83.           <th>体育</th>
  84.         </tr>
  85.         <tr>
  86.           <th>13:55-14:35</th>
  87.           <th>数学</th>
  88.           <th>英语</th>
  89.           <th>语文</th>
  90.           <th>体育</th>
  91.           <th>音乐</th>
  92.           <!-- <th></th> -->
  93.         </tr>
  94.       </tbody>
  95.       <tfoot>
  96.         <tr>
  97.           <th>备注</th>
  98.           <th colspan="6">每天16:00之前提交作业</th>
  99.           <!-- <>> -->
  100.           <!-- <th></th> -->
  101.           <!-- <th></th> -->
  102.           <!-- <th></th> -->
  103.           <!-- <th></th> -->
  104.         </tr>
  105.       </tfoot>
  106.     </table>
  107.   </body>
  108. </html>

二.用户注册表单

用户表单注册

  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <!-- get:数据在url地址中 -->
  11.     <!-- post:数据在请求体中 -->
  12.     <form action="" style="display: grid; gap: 0.5em" method="POST">
  13.       <fieldset>
  14.         <legend>必填项</legend>
  15.         <!-- 文本输入框 -->
  16.         <div>
  17.           <label for="username">账号: </label>
  18.           <input
  19.             type="text"
  20.             id="username"
  21.             autofocus
  22.             required
  23.             placeholder="必须是6-8位"
  24.           />
  26.           <!-- <label>账号：<input type="text"></label> -->
  27.         </div>
  29.         <div>
  30.           <label for="password">密码: </label>
  31.           <input
  32.             type="password"
  33.             id="password"
  34.             required
  35.             placeholder="必须是字母+数字 "
  36.           />
  37.         </div>
  39.         <div>
  40.           <label for="email">邮箱</label>
  41.           <input
  42.             type="email"
  43.             name="email"
  44.             id="email"
  45.             placeholder="demo@email.com"
  46.           />
  47.         </div>
  48.       </fieldset>
  49.       <div>
  50.         <!-- 单选按钮：多选 -->
  51.         <label for="secre">性别：</label>
  52.         <input type="radio" name="gender" value="male" id="male" /><label
  53.           for="male"
  54.           >男</label
  55.         >
  56.         <input type="radio" name="gender" value="female" id="female" /><label
  57.           for="female"
  58.           >女</label
  59.         >
  60.         <input
  61.           type="radio"
  62.           name="gender"
  63.           value="secre"
  64.           id="secre"
  65.           checked
  66.         /><label for="secret">保密</label>
  67.       </div>
  69.       <div>
  70.         <!-- 复选框 -->
  71.         <label>爱好：</label>
  72.         <!-- 因为允许同时提交多个值，所以name属性要写成数组格式 -->
  73.         <input type="checkbox" name="hobby[]" id="programmer" checked /><label
  74.           for="programmer"
  75.           >编程</label
  76.         >
  77.         <input type="checkbox" name="hobby[]" id="trave" /><label for="trave"
  78.           >旅游</label
  79.         >
  80.         <input
  81.           type="checkbox"
  82.           name="hobby[]"
  83.           id="play basketball"
  84.           checked
  85.         /><label for="play basketball">打篮球</label>
  86.         <input type="checkbox" name="hobby[]" id="shot" /><label for="shot"
  87.           >摄影</label
  88.         >
  89.         <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  90.           >游戏</label
  91.         >
  92.         <input type="checkbox" name="hobby[]" id="listen to music" /><label
  93.           for="listen to music"
  94.           >听音乐</label
  95.         >
  96.       </div>
  98.       <!-- 下拉列表 -->
  99.       <select name="level" id="">
  100.         <option value="1">铜牌会员</option>
  101.         <option value="2">银牌会员</option>
  102.         <option value="3" selected>金牌会员</option>
  103.         <option value="4">钻石会员</option>
  104.       </select>
  106.       <!-- datalist -->
  107.       <!-- 相当于输入框+下拉列表-->
  108.       <!-- input+select -->
  109.       <div>
  110.         <label for="">关键字</label>
  111.         <input type="search" name="search" id="" list="my-key" />
  112.         <datalist id="my-key">
  113.           <option value="html"></option>
  114.           <option value="css"></option>
  115.           <option value="javacript"></option>
  116.         </datalist>
  117.       </div>
  119.       <div>
  120.         <button type="submit">提交</button>
  121.       </div>
  122.       <!-- <div><button>提交</button></div> -->
  123.     </form>
  124.   </body>
  125. </html>
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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！