1、列与表合并使用(课程表)
<style type="text/css">
#class td{text-align: center;}
</style>
<!-- colspan:合并行-->
<!-- rowspan:合并列-->
<table border="1" width="500px" cellspacing="0" cellpadding="0">
<!--课程表-->
<caption><h2>课程表</h2></caption>
<thead>
<tr>
<th colspan="2">时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody id="class">
<tr>
<td colspan="2">早读</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<!--tbody>(tr>td*7)*8-->
<tbody id="class">
<tr>
<td rowspan="4">上午</td>
<td>第一节</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>第二节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第三节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第四节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="7">午休</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>第五节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第六节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第七节</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
2、注册表单的标签和常用控件
### 常用标签
1. `<form>`: 表单控件的容器
2. `<fieldset>`: 表单控件分组容器
3. `<label>`: 控件标签名称
4. `<input>`: 输入控件,类型由 type 属性决定
5. `<select>+<option>`: 下载列表框
6. `<input>+<datalist>+<option>`: 预定义列表框
7. `<textarea>`: 文本域(多行文本框)
8. `<button>`: 按钮,默认同步提交(type="submit")
### 常用属性
1. `form.id`: 表单引用
2. `form.action`: 表单处理脚本
3. `form.method`: 表单提交方式(GET/POST)
4. `form.enctype`: 表单数据编码方式
5. `form.onsubmit`: 表单提交事件
6. `input.type`: 输入控件类型
7. `input.type="text"`: 单行文本框(默认)
8. `input.type="email"`: 邮箱控件
9. `input.type="password"`: 密码控件(密文)
10. `input.type="number"`: 数值控件
11. `input.type="date"`: 日期控件
12. `input.type="color"`: 拾色器
13. `input.type="url"`: URL 控件
14. `input.type="search"`: 搜索框控件
15. `input.type="hidden"`: 隐藏域控件
16. `input.type="file"`: 文本域控件
17. `input.type="radio"`: 单选按钮
18. `input.type="checkbox"`: 复选框
19. `select.name+option.value`: 下拉列表框
20. `input.list+datalist.id`: 预定义列表框
21. `textarea.cols/rows`: 文本域(多行文本框)
22. `button.type`: 按钮(默认提交:type="submit")
2.1 注册表单
<form action="login.php" method="post">
<fieldset style="display: inline-grid; gap:1em">
<legend>用户注册</legend>
<div class="username">
<!-- id="user" 与 label标签uesr绑定-->
<label for="user">用户:</label>
<input type="text" name="username" id="user" placeholder="username" required autofocus />
</div>
<div class="my-email">
<label for="my_email">邮箱:</label>
<input type="email" name="my-email" id="my_email" placeholder="username@email.com" required />
</div>
<div class="psw">
<label for="psw">密码:</label>
<input
type="password"
name="password"
id="psw"
placeholder="******"
required
onkeydown="this.nextElementSibling.disabled=false"
/>
<button type="button" disabled onclick="showPsw(this,this.form)">显示</button>
</div>
<div class="age">
<label for="age">年龄:</label>
<input type="number" name="age" id="age" value="20" min="20" max="70" step="5" />
</div>
<div class="birthday">
<label for="birthday">生日:</label>
<input type="date" name="birthday" id="birthday" value="1990-01-01" min="1949-10-01" max="2003-01-01" />
</div>
<div class="url">
<label for="blog">博客:</label>
<input type="url" name="url" id="blog" placeholder="http://" />
</div>
<div class="color">
<label for="color">背景:</label>
<input type="color" name="bgcolor" id="color" value="#fff00" onchange="setBgColor(this,this.form)" />
</div>
<div class="search">
<label for="keywords">搜索:</label>
<input type="search" name="keywords" id="search" placeholder="输入关键字" />
</div>
<div class="upload">
<label for="upload">头像:</label>
<input type="file" name="user_pic" id="upload" type="image/jpeg,image/png" />
<button type="button" onclick="fileUploads(this.form)">上传</button>
</div>
<div class="gender">
<!--label.for与默认值的input.id绑定-->
<label for="secret">性别:</label>
<!--name值必须一致,保持唯一性-->
<input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
<input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
</div>
<div class="hobby">
<label for="secret">爱好:</label>
<!--name:hobby[],数组形式,用于保存值-->
<!--input.id 与 label.for绑定-->
<input type="checkbox" name="hobby[]" id="game" id="game" checked /><label for="game">游戏</label>
<input type="checkbox" name="hobby[]" id="trave" id="trave" /><label for="trave">旅游</label>
<input type="checkbox" name="hobby[]" id="shoot" id="shoot" /><label for="shoot">摄影</label>
<input type="checkbox" name="hobby[]" id="program" id="program" /><label for="program">编程</label>
</div>
<div class="edu">
<label for="edu">学历:</label>
<select name="edu" id="edu" form="">
<option value="" selected disabled>--请选择--</option>
<option value="0">文盲</option>
<!--optgroup:下拉选项分组-->
<optgroup label="义务教育">
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
</optgroup>
<optgroup label="高等教育">
<option value="4">专科</option>
<option value="5">本科</option>
<option value="6">硕士</option>
<option value="7">博士</option>
</optgroup>
</select>
</div>
<div class="like">
<label for="keyword">语言:</label>
<input type="search" name="language" list="details" id="keyword">
<!--input.list("details") 与 id("details") 绑定-->
<datalist id="details">
<option value="html">html</option>
<option value="css">css</option>
<option value="js">js</option>
<option value="php">php</option>
<option value="mysql">mysql</option>
<option value="vue">vue</option>
</datalist>
</div>
<div>
<label for="comment">备注:</label>
<textarea id="comment" name="comment" cols="30" rows="5" maxlength="200" style="resize: none;">hello php.cn</textarea>
</div>
<button type="submit">登录</button>
</fieldset>
</form>
<script>
function showPsw(ele, form) {
const psw = form.password
if (psw.type === 'password') {
psw.type = 'text'
ele.textContent = '隐藏'
} else if (psw.type === 'text') {
psw.type = 'password'
ele.textContent = '显示'
} else {
return false
}
}
// 设置表单背景
function setBgColor(ele, form) {
form.firstElementChild.style.backgroundColor = ele.value
}
// 文件上传
function fileUploads(form) {
let tips = ''
if (form.user_pic.value.length === 0) {
tips += '文件不能为空'
} else {
tips += '上传成功'
}
alert(tips)
}
</script>
个人小结:
1、列与表合并使用: colspan:合并行
rowspan:合并列
colspan="2",如果横向合并两个单元格,同一个tr里就应该减少一个td,不然会溢出一个td
rowspan="4",如果竖向合并4个单元格,下面4个tr里就应该各减少一个td,不然也会溢出
2、注册表单的一些属性和小技巧
<label for="user">用户:</label>
<input type="text" name="username" id="user" placeholder="username" required autofocus />
id="user"
与 label标签user
绑定,点击用户可以自行跳转至用户框输入;
<div class="gender">
<!--label.for与默认值的input.id绑定-->
<label for="secret">性别:</label>
<!--name值必须一致,保持唯一性-->
<input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
<input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
</div>
<div class="hobby">
<label for="secret">爱好:</label>
<!--name:hobby[],数组形式,用于保存值-->
<!--input.id 与 label.for绑定-->
<input type="checkbox" name="hobby[]" id="game" id="game" checked /><label for="game">游戏</label>
<input type="checkbox" name="hobby[]" id="trave" id="trave" /><label for="trave">旅游</label>
<input type="checkbox" name="hobby[]" id="shoot" id="shoot" /><label for="shoot">摄影</label>
<input type="checkbox" name="hobby[]" id="program" id="program" /><label for="program">编程</label>
</div>
name:hobby[]
数组形式保存值