博客列表 >列与表合并使用;注册表单的属性与常用控件

列与表合并使用;注册表单的属性与常用控件

Jet的博客
Jet的博客原创
2023年02月14日 15:23:33306浏览

1、列与表合并使用(课程表)

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

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

  1. ### 常用标签
  2. 1. `<form>`: 表单控件的容器
  3. 2. `<fieldset>`: 表单控件分组容器
  4. 3. `<label>`: 控件标签名称
  5. 4. `<input>`: 输入控件,类型由 type 属性决定
  6. 5. `<select>+<option>`: 下载列表框
  7. 6. `<input>+<datalist>+<option>`: 预定义列表框
  8. 7. `<textarea>`: 文本域(多行文本框)
  9. 8. `<button>`: 按钮,默认同步提交(type="submit")
  10. ### 常用属性
  11. 1. `form.id`: 表单引用
  12. 2. `form.action`: 表单处理脚本
  13. 3. `form.method`: 表单提交方式(GET/POST)
  14. 4. `form.enctype`: 表单数据编码方式
  15. 5. `form.onsubmit`: 表单提交事件
  16. 6. `input.type`: 输入控件类型
  17. 7. `input.type="text"`: 单行文本框(默认)
  18. 8. `input.type="email"`: 邮箱控件
  19. 9. `input.type="password"`: 密码控件(密文)
  20. 10. `input.type="number"`: 数值控件
  21. 11. `input.type="date"`: 日期控件
  22. 12. `input.type="color"`: 拾色器
  23. 13. `input.type="url"`: URL 控件
  24. 14. `input.type="search"`: 搜索框控件
  25. 15. `input.type="hidden"`: 隐藏域控件
  26. 16. `input.type="file"`: 文本域控件
  27. 17. `input.type="radio"`: 单选按钮
  28. 18. `input.type="checkbox"`: 复选框
  29. 19. `select.name+option.value`: 下拉列表框
  30. 20. `input.list+datalist.id`: 预定义列表框
  31. 21. `textarea.cols/rows`: 文本域(多行文本框)
  32. 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>
  9. <div class="my-email">
  10. <label for="my_email">邮箱:</label>
  11. <input type="email" name="my-email" id="my_email" placeholder="username@email.com" required />
  12. </div>
  13. <div class="psw">
  14. <label for="psw">密码:</label>
  15. <input
  16. type="password"
  17. name="password"
  18. id="psw"
  19. placeholder="******"
  20. required
  21. onkeydown="this.nextElementSibling.disabled=false"
  22. />
  23. <button type="button" disabled onclick="showPsw(this,this.form)">显示</button>
  24. </div>
  25. <div class="age">
  26. <label for="age">年龄:</label>
  27. <input type="number" name="age" id="age" value="20" min="20" max="70" step="5" />
  28. </div>
  29. <div class="birthday">
  30. <label for="birthday">生日:</label>
  31. <input type="date" name="birthday" id="birthday" value="1990-01-01" min="1949-10-01" max="2003-01-01" />
  32. </div>
  33. <div class="url">
  34. <label for="blog">博客:</label>
  35. <input type="url" name="url" id="blog" placeholder="http://" />
  36. </div>
  37. <div class="color">
  38. <label for="color">背景:</label>
  39. <input type="color" name="bgcolor" id="color" value="#fff00" onchange="setBgColor(this,this.form)" />
  40. </div>
  41. <div class="search">
  42. <label for="keywords">搜索:</label>
  43. <input type="search" name="keywords" id="search" placeholder="输入关键字" />
  44. </div>
  45. <div class="upload">
  46. <label for="upload">头像:</label>
  47. <input type="file" name="user_pic" id="upload" type="image/jpeg,image/png" />
  48. <button type="button" onclick="fileUploads(this.form)">上传</button>
  49. </div>
  50. <div class="gender">
  51. <!--label.for与默认值的input.id绑定-->
  52. <label for="secret">性别:</label>
  53. <!--name值必须一致,保持唯一性-->
  54. <input type="radio" name="gender" value="male" id="male" /><label for="male"></label>
  55. <input type="radio" name="gender" value="female" id="female" /><label for="female"></label>
  56. <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
  57. </div>
  58. <div class="hobby">
  59. <label for="secret">爱好:</label>
  60. <!--name:hobby[],数组形式,用于保存值-->
  61. <!--input.id 与 label.for绑定-->
  62. <input type="checkbox" name="hobby[]" id="game" id="game" checked /><label for="game">游戏</label>
  63. <input type="checkbox" name="hobby[]" id="trave" id="trave" /><label for="trave">旅游</label>
  64. <input type="checkbox" name="hobby[]" id="shoot" id="shoot" /><label for="shoot">摄影</label>
  65. <input type="checkbox" name="hobby[]" id="program" id="program" /><label for="program">编程</label>
  66. </div>
  67. <div class="edu">
  68. <label for="edu">学历:</label>
  69. <select name="edu" id="edu" form="">
  70. <option value="" selected disabled>--请选择--</option>
  71. <option value="0">文盲</option>
  72. <!--optgroup:下拉选项分组-->
  73. <optgroup label="义务教育">
  74. <option value="1">小学</option>
  75. <option value="2">初中</option>
  76. <option value="3">高中</option>
  77. </optgroup>
  78. <optgroup label="高等教育">
  79. <option value="4">专科</option>
  80. <option value="5">本科</option>
  81. <option value="6">硕士</option>
  82. <option value="7">博士</option>
  83. </optgroup>
  84. </select>
  85. </div>
  86. <div class="like">
  87. <label for="keyword">语言:</label>
  88. <input type="search" name="language" list="details" id="keyword">
  89. <!--input.list("details") 与 id("details") 绑定-->
  90. <datalist id="details">
  91. <option value="html">html</option>
  92. <option value="css">css</option>
  93. <option value="js">js</option>
  94. <option value="php">php</option>
  95. <option value="mysql">mysql</option>
  96. <option value="vue">vue</option>
  97. </datalist>
  98. </div>
  99. <div>
  100. <label for="comment">备注:</label>
  101. <textarea id="comment" name="comment" cols="30" rows="5" maxlength="200" style="resize: none;">hello php.cn</textarea>
  102. </div>
  103. <button type="submit">登录</button>
  104. </fieldset>
  105. </form>
  106. <script>
  107. function showPsw(ele, form) {
  108. const psw = form.password
  109. if (psw.type === 'password') {
  110. psw.type = 'text'
  111. ele.textContent = '隐藏'
  112. } else if (psw.type === 'text') {
  113. psw.type = 'password'
  114. ele.textContent = '显示'
  115. } else {
  116. return false
  117. }
  118. }
  119. // 设置表单背景
  120. function setBgColor(ele, form) {
  121. form.firstElementChild.style.backgroundColor = ele.value
  122. }
  123. // 文件上传
  124. function fileUploads(form) {
  125. let tips = ''
  126. if (form.user_pic.value.length === 0) {
  127. tips += '文件不能为空'
  128. } else {
  129. tips += '上传成功'
  130. }
  131. alert(tips)
  132. }
  133. </script>

个人小结:

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

  1. colspan="2",如果横向合并两个单元格,同一个tr里就应该减少一个td,不然会溢出一个td
  2. rowspan="4",如果竖向合并4个单元格,下面4tr里就应该各减少一个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.idlaber.for 绑定

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

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议