Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 列与表合并使用；注册表单的属性与常用控件
Blogger Information
Blog 77
fans 0
comment 0
visits 54992
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
列与表合并使用；注册表单的属性与常用控件
Jet的博客
Original
307 people have browsed it

1、列与表合并使用（课程表）

  1.     <style type="text/css">
  2.         #class td{text-align: center;}
  3.     </style>
  4.         <!-- colspan：合并行-->
  5.         <!-- rowspan：合并列-->
  7.     <table border="1" width="500px" cellspacing="0" cellpadding="0">
  8.         <!--课程表-->
  9.         <caption><h2>课程表</h2></caption>
  10.         <thead>
  11.             <tr>
  12.                 <th colspan="2">时间</th>
  13.                 <th>星期一</th>
  14.                 <th>星期二</th>
  15.                 <th>星期三</th>
  16.                 <th>星期四</th>
  17.                 <th>星期五</th>
  18.             </tr>
  19.         </thead>
  20.         <tbody id="class">
  21.             <tr>
  22.                 <td colspan="2">早读</td>
  23.                 <td></td>
  24.                 <td></td>
  25.                 <td></td>
  26.                 <td></td>
  27.                 <td></td>
  28.             </tr>
  29.         </tbody>
  30.         <!--tbody>(tr>td*7)*8-->
  31.         <tbody id="class">
  32.             <tr>
  33.                 <td rowspan="4">上午</td>
  34.                 <td>第一节</td>
  35.                 <td>2</td>
  36.                 <td>3</td>
  37.                 <td>4</td>
  38.                 <td>5</td>
  39.                 <td>6</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></td>
  52.                 <td></td>
  53.                 <td></td>
  54.                 <td></td>
  55.                 <td></td>
  56.             </tr>
  57.             <tr>
  58.                 <td>第四节</td>
  59.                 <td></td>
  60.                 <td></td>
  61.                 <td></td>
  62.                 <td></td>
  63.                 <td></td>
  64.             </tr>
  65.             <tr>
  66.                 <td colspan="7">午休</td>
  67.             </tr>
  68.             <tr>
  69.                 <td rowspan="3">下午</td>
  70.                 <td>第五节</td>
  71.                 <td></td>
  72.                 <td></td>
  73.                 <td></td>
  74.                 <td></td>
  75.                 <td></td>
  76.             </tr>
  77.             <tr>
  78.                 <td>第六节</td>
  79.                 <td></td>
  80.                 <td></td>
  81.                 <td></td>
  82.                 <td></td>
  83.                 <td></td>
  84.             </tr>
  85.             <tr>
  86.                 <td>第七节</td>
  87.                 <td></td>
  88.                 <td></td>
  89.                 <td></td>
  90.                 <td></td>
  91.                 <td></td>
  92.             </tr>
  93.         </tbody>
  94.     </table>

2、注册表单的标签和常用控件

  1.      ###  常用标签
  3.         1. `<form>`: 表单控件的容器
  4.         2. `<fieldset>`: 表单控件分组容器
  5.         3. `<label>`: 控件标签名称
  6.         4. `<input>`: 输入控件,类型由 type 属性决定
  7.         5. `<select>+<option>`: 下载列表框
  8.         6. `<input>+<datalist>+<option>`: 预定义列表框
  9.         7. `<textarea>`: 文本域(多行文本框)
  10.         8. `<button>`: 按钮,默认同步提交(type="submit")
  12.      ###  常用属性
  14.         1. `form.id`: 表单引用
  15.         2. `form.action`: 表单处理脚本
  16.         3. `form.method`: 表单提交方式(GET/POST)
  17.         4. `form.enctype`: 表单数据编码方式
  18.         5. `form.onsubmit`: 表单提交事件
  19.         6. `input.type`: 输入控件类型
  20.         7. `input.type="text"`: 单行文本框(默认)
  21.         8. `input.type="email"`: 邮箱控件
  22.         9. `input.type="password"`: 密码控件(密文)
  23.         10. `input.type="number"`: 数值控件
  24.         11. `input.type="date"`: 日期控件
  25.         12. `input.type="color"`: 拾色器
  26.         13. `input.type="url"`: URL 控件
  27.         14. `input.type="search"`: 搜索框控件
  28.         15. `input.type="hidden"`: 隐藏域控件
  29.         16. `input.type="file"`: 文本域控件
  30.         17. `input.type="radio"`: 单选按钮
  31.         18. `input.type="checkbox"`: 复选框
  32.         19. `select.name+option.value`: 下拉列表框
  33.         20. `input.list+datalist.id`: 预定义列表框
  34.         21. `textarea.cols/rows`: 文本域(多行文本框)
  35.         22. `button.type`: 按钮(默认提交:type="submit")

2.1 注册表单

  1.     <form action="login.php" method="post">
  2.         <fieldset style="display: inline-grid; gap:1em">
  3.             <legend>用户注册</legend>
  4.             <div class="username">
  5.                 <!-- id="user" 与 label标签uesr绑定-->
  6.                 <label for="user">用户：</label>
  7.                 <input  type="text" name="username" id="user" placeholder="username" required autofocus />
  8.             </div>
  10.             <div class="my-email">
  11.                 <label for="my_email">邮箱：</label>
  12.                 <input type="email" name="my-email" id="my_email" placeholder="username@email.com" required />
  13.             </div>
  15.             <div class="psw">
  16.                 <label for="psw">密码：</label>
  17.                 <input 
  18.                     type="password" 
  19.                     name="password" 
  20.                     id="psw" 
  21.                     placeholder="******" 
  22.                     required 
  23.                     onkeydown="this.nextElementSibling.disabled=false"
  24.                 />
  25.                 <button type="button" disabled onclick="showPsw(this,this.form)">显示</button>
  26.             </div>
  28.             <div class="age">
  29.                 <label for="age">年龄：</label>
  30.                 <input type="number" name="age" id="age" value="20" min="20" max="70" step="5" />
  31.             </div>
  33.             <div class="birthday">
  34.                 <label for="birthday">生日：</label>
  35.                 <input type="date" name="birthday" id="birthday" value="1990-01-01" min="1949-10-01" max="2003-01-01" />
  36.             </div>
  38.             <div class="url">
  39.                 <label for="blog">博客：</label>
  40.                 <input type="url" name="url" id="blog" placeholder="http://" />
  41.             </div>
  43.             <div class="color">
  44.                 <label for="color">背景：</label>
  45.                 <input type="color" name="bgcolor" id="color" value="#fff00" onchange="setBgColor(this,this.form)" />
  46.             </div>
  48.             <div class="search">
  49.                 <label for="keywords">搜索：</label>
  50.                 <input type="search" name="keywords" id="search" placeholder="输入关键字" />
  51.             </div>
  53.             <div class="upload">
  54.                 <label for="upload">头像：</label>
  55.                 <input type="file" name="user_pic" id="upload" type="image/jpeg,image/png" />
  56.                 <button type="button" onclick="fileUploads(this.form)">上传</button>
  57.             </div>
  59.             <div class="gender">
  60.                 <!--label.for与默认值的input.id绑定-->
  61.                 <label for="secret">性别：</label>
  62.                 <!--name值必须一致，保持唯一性-->
  63.                 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
  64.                 <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
  65.                 <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
  66.             </div>
  68.             <div class="hobby">
  69.                 <label for="secret">爱好：</label>
  70.                 <!--name:hobby[],数组形式，用于保存值-->
  71.                 <!--input.id 与 label.for绑定-->
  72.                 <input type="checkbox" name="hobby[]" id="game" id="game" checked /><label for="game">游戏</label>
  73.                 <input type="checkbox" name="hobby[]" id="trave" id="trave" /><label for="trave">旅游</label>
  74.                 <input type="checkbox" name="hobby[]" id="shoot" id="shoot" /><label for="shoot">摄影</label>
  75.                 <input type="checkbox" name="hobby[]" id="program" id="program" /><label for="program">编程</label>
  76.             </div>
  78.             <div class="edu">
  79.                 <label for="edu">学历：</label>
  80.                 <select name="edu" id="edu" form="">
  81.                     <option value="" selected disabled>--请选择--</option>
  82.                     <option value="0">文盲</option>
  83.                     <!--optgroup：下拉选项分组-->
  84.                     <optgroup label="义务教育">
  85.                         <option value="1">小学</option>
  86.                         <option value="2">初中</option>
  87.                         <option value="3">高中</option>
  88.                     </optgroup>
  89.                     <optgroup label="高等教育">
  90.                         <option value="4">专科</option>
  91.                         <option value="5">本科</option>
  92.                         <option value="6">硕士</option>
  93.                         <option value="7">博士</option>
  94.                     </optgroup>
  95.                 </select>
  96.             </div>
  98.             <div class="like">
  99.                 <label for="keyword">语言：</label>
  100.                 <input type="search" name="language" list="details" id="keyword">
  101.                 <!--input.list("details") 与 id("details") 绑定-->
  102.                 <datalist id="details">
  103.                     <option value="html">html</option>
  104.                     <option value="css">css</option>
  105.                     <option value="js">js</option>
  106.                     <option value="php">php</option>
  107.                     <option value="mysql">mysql</option>
  108.                     <option value="vue">vue</option>
  109.                 </datalist>
  110.             </div>
  112.             <div>
  113.                 <label for="comment">备注：</label>
  114.                 <textarea id="comment" name="comment" cols="30" rows="5" maxlength="200" style="resize: none;">hello php.cn</textarea>
  115.             </div>
  117.             <button type="submit">登录</button>
  119.         </fieldset>
  120.     </form>
  123.     <script>
  124.         function showPsw(ele, form) {
  125.           const psw = form.password
  126.           if (psw.type === 'password') {
  127.             psw.type = 'text'
  128.             ele.textContent = '隐藏'
  129.           } else if (psw.type === 'text') {
  130.             psw.type = 'password'
  131.             ele.textContent = '显示'
  132.           } else {
  133.             return false
  134.           }
  135.         }
  137.         // 设置表单背景
  138.         function setBgColor(ele, form) {
  139.           form.firstElementChild.style.backgroundColor = ele.value
  140.         }
  142.         // 文件上传
  143.         function fileUploads(form) {
  144.           let tips = ''
  145.           if (form.user_pic.value.length === 0) {
  146.             tips += '文件不能为空'
  147.           } else {
  148.             tips += '上传成功'
  149.           }
  150.           alert(tips)
  151.         }
  152.       </script>

个人小结：

1、列与表合并使用： colspan：合并行 rowspan：合并列

  1. colspan="2"，如果横向合并两个单元格，同一个tr里就应该减少一个td，不然会溢出一个td
  2. rowspan="4"，如果竖向合并4个单元格，下面4个tr里就应该各减少一个td，不然也会溢出

2、注册表单的一些属性和小技巧

  1. <label for="user">用户：</label>
  2. <input  type="text" name="username" id="user" placeholder="username" required autofocus />

id="user" 与 label标签user 绑定,点击用户可以自行跳转至用户框输入；

  1.             <div class="gender">
  2.                 <!--label.for与默认值的input.id绑定-->
  3.                 <label for="secret">性别：</label>
  4.                 <!--name值必须一致，保持唯一性-->
  5.                 <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
  6.                 <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
  7.                 <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
  8.             </div>

label.for 与 默认值的input.id 绑定，点击可直接切换回默认值，而不用整个页面刷新。

  1.             <div class="hobby">
  2.                 <label for="secret">爱好：</label>
  3.                 <!--name:hobby[],数组形式，用于保存值-->
  4.                 <!--input.id 与 label.for绑定-->
  5.                 <input type="checkbox" name="hobby[]" id="game" id="game" checked /><label for="game">游戏</label>
  6.                 <input type="checkbox" name="hobby[]" id="trave" id="trave" /><label for="trave">旅游</label>
  7.                 <input type="checkbox" name="hobby[]" id="shoot" id="shoot" /><label for="shoot">摄影</label>
  8.                 <input type="checkbox" name="hobby[]" id="program" id="program" /><label for="program">编程</label>
  9.             </div>

input.id 与 laber.for 绑定

name:hobby[] 数组形式保存值

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