search

博客列表 >表格与表单作业练习

表格与表单作业练习

Sinan学习博客
Sinan学习博客原创
2023年01月17日 20:58:13329浏览

表格与表单

一、表格练习（课程表）

  1.     <!-- 以下table属性已经淘汰不建议使用，没学css之前暂时使用。 -->
  2.     <table border="1" width="700" align="center">
  3.       <caption>
  4.         <h3>课程表</h3>
  5.       </caption>
  6.       <thead>
  7.         <tr height="30">
  8.           <th colspan="2"></th>
  9.           <!-- <th></th> 可注释或者删除 -->
  10.           <th>星期一</th>
  11.           <th>星期二</th>
  12.           <th>星期三</th>
  13.           <th>星期四</th>
  14.           <th>星期五</th>
  15.         </tr>
  16.       </thead>
  17.       <tbody>
  18.         <tr height="30" align="center">
  19.           <td rowspan="4">上午</td>
  20.           <td>1</td>
  21.           <td>语文</td>
  22.           <td>语文</td>
  23.           <td>数学</td>
  24.           <td>英语</td>
  25.           <td>数学</td>
  26.         </tr>
  27.         <tr height="30" align="center">
  28.           <!-- <td>xxx</td> 可注释或者删除 -->
  29.           <td>2</td>
  30.           <td>语文</td>
  31.           <td>电脑</td>
  32.           <td>生物</td>
  33.           <td>地辅</td>
  34.           <td>数学</td>
  35.         </tr>
  36.         <tr height="30" align="center">
  37.           <!-- <td>xxx</td> 可注释或者删除 -->
  38.           <td>3</td>
  39.           <td>体育</td>
  40.           <td>语文</td>
  41.           <td>英语</td>
  42.           <td>体育</td>
  43.           <td>历史</td>
  44.         </tr>
  45.         <tr height="30" align="center">
  46.           <!-- <td>xxx</td> 可注释或者删除 -->
  47.           <td>4</td>
  48.           <td>数学</td>
  49.           <td>语文</td>
  50.           <td>体育</td>
  51.           <td>数学</td>
  52.           <td>英语</td>
  53.         </tr>
  54.         <tr height="30">
  55.           <td align="center">休息</td>
  56.           <td colspan="6">11:30~13:30</td>
  57.           <!-- <td></td>
  58.         <td></td>
  59.         <td></td>
  60.         <td></td>
  61.         <td></td> 可注释或者删除 -->
  62.         </tr>
  63.         <tr height="30" align="center">
  64.           <td rowspan="3">下午</td>
  65.           <td>1</td>
  66.           <td>生物</td>
  67.           <td>心理</td>
  68.           <td>历史</td>
  69.           <td>英辅</td>
  70.           <td>美术</td>
  71.         </tr>
  72.         <tr height="30" align="center">
  73.           <!-- <td>xxx</td> 可注释或者删除 -->
  74.           <td>2</td>
  75.           <td>物理</td>
  76.           <td>体育</td>
  77.           <td>法治</td>
  78.           <td>地理</td>
  79.           <td>语文</td>
  80.         </tr>
  81.         <tr height="30" align="center">
  82.           <!-- <td>xxx</td> 可注释或者删除 -->
  83.           <td>3</td>
  84.           <td>班会</td>
  85.           <td>自习</td>
  86.           <td>音乐</td>
  87.           <td>电脑</td>
  88.           <td>法治</td>
  89.         </tr>
  90.       </tbody>
  91.       <tfoot>
  92.         <tr height="30">
  93.           <td align="center">备注</td>
  94.           <td colspan="6">学前预习，学后复习，认真完成作业。</td>
  95.           <!-- <td>xxx</td>
  96.           <td>xxx</td>
  97.           <td>xxx</td>
  98.           <td>xxx</td>
  99.           <td>xxx</td> 可注释或者删除 -->
  100.         </tr>
  101.       </tfoot>
  102.     </table>

效果预览：
课程表

二、表单练习（注册表）

  1.     <form action="login.php" method="POST">
  2.       <fieldset style="display: inline-grid; gap: 1em">
  3.         <legend>用户注册</legend>
  4.         <!--用户名-->
  5.         <div class="userName">
  6.           <label for="userName">用户：</label>
  7.           <input
  8.             type="text"
  9.             name="userName"
  10.             placeholder="username"
  11.             id="userName"
  12.             required
  13.             autofocus
  14.           />
  15.         </div>
  16.         <!--数值-->
  17.         <div class="age">
  18.           <label for="age">年龄：</label>
  19.           <input
  20.             type="number"
  21.             value="20"
  22.             name="age"
  23.             id="age"
  24.             min="20"
  25.             max="70"
  26.             step="5"
  27.           />
  28.         </div>
  29.         <!--日期-->
  30.         <div class="birthday">
  31.           <label for="birthday">生日：</label>
  32.           <input
  33.             type="date"
  34.             name="birthday"
  35.             value="1990-01-01"
  36.             id="birthday"
  37.             min="1949-10-01"
  38.             max="2003-01-01"
  39.           />
  40.         </div>
  41.         <!--url控件-->
  42.         <div class="blog">
  43.           <label for="blog">博客：</label>
  44.           <input type="url" name="url" id="blog" value="http://" />
  45.         </div>
  46.         <!--搜索-->
  47.         <div class="search">
  48.           <label for="keyWords">搜索：</label>
  49.           <input
  50.             type="search"
  51.             name="search"
  52.             id="keyWords"
  53.             placeholder="输入关键字"
  54.           />
  55.         </div>
  56.         <!--文件上传-->
  57.         <div class="upload">
  58.           <label for="upload">头像：</label>
  59.           <input
  60.             type="file"
  61.             name="userPic"
  62.             id="upload"
  63.             accept="image/jpg,image/png"
  64.           />
  65.           <button type="button" onclick="fileUploads(this.form)">上传</button>
  66.         </div>
  67.         <!--单选-->
  68.         <div class="gender">
  69.           <label for="secret">性别：</label>
  70.           <input type="radio" name="gender" id="male" />
  71.           <label for="male">男</label>
  72.           <input type="radio" name="gender" id="female" />
  73.           <label for="female">女</label>
  74.           <input type="radio" name="gender" id="secret" checked />
  75.           <label for="secret">保密</label>
  76.         </div>
  77.         <!--复选框-->
  78.         <div class="hobby">
  79.           <label>爱好：</label>
  80.           <input type="checkbox" name="hobby[]" value="game" id="game" />
  81.           <label for="game">游戏</label>
  82.           <input
  83.             type="checkbox"
  84.             name="hobby[]"
  85.             value="music"
  86.             id="music"
  87.             checked
  88.           />
  89.           <label for="music">音乐</label>
  90.           <input type="checkbox" name="hobby[]" value="travel" id="travel" />
  91.           <label for="travel">旅游</label>
  92.           <input
  93.             type="checkbox"
  94.             name="hobby[]"
  95.             value="program"
  96.             id="program"
  97.             checked
  98.           />
  99.           <label for="program">编程</label>
  100.         </div>
  101.         <!--邮箱-->
  102.         <div class="email">
  103.           <label for="myEmail">邮箱：</label>
  104.           <input
  105.             type="email"
  106.             name="email"
  107.             id="myEmail"
  108.             placeholder="username@email.com"
  109.             required
  110.           />
  111.         </div>
  112.         <!--密码-->
  113.         <div class="psw">
  114.           <label for="psw">密码：</label>
  115.           <input
  116.             type="password"
  117.             name="password"
  118.             id="psw"
  119.             placeholder="******"
  120.             required
  121.           />
  122.         </div>
  123.         <button>登录</button>
  124.       </fieldset>
  125.     </form>
  127.     <script>
  128.       // 文件上传
  129.       function fileUploads(form) {
  130.         let tips = "";
  131.         if (form.userPic.value.length === 0) {
  132.           tips += "文件不能为空";
  133.         } else {
  134.           tips += "上传成功";
  135.         }
  136.         alert(tips);
  137.       }
  138.     </script>

效果预览：

上一条：表格的基础布局和表单控件的简单应用下一条：课程表（表格实战）以及注册表单的简单应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多