入门HTML（二）表格与表单
内容
- 制作行与列的合并的课程表
- 制作注册表单
一、制作行与列的合并的课程表
<!-- <table>是复合元素: 需要多个标签进行描述 1. table: 表格容器 2. caption: 表格标题(可选) 3. tr: 表格中的行 4. td/th: 单元格(列),数据容器,必须写到<tr>内部 th与td区别在于多了"加粗和居中"样式,学用在thead中 --><table border="1" width="400"> <caption> <h2>课程表</h2> </caption> <!-- 表头 thead>tr>th --> <thead> <tr> <th>课程/星期</th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <tbody> <!-- 表体 --> <!-- tr*8>td{x}*6 --> <tr> <!-- 垂直合并 rowspan--> <th rowspan="4">上午</th> <td>数学</td> <td>语文</td> <td>英语</td> <td>数学</td> <td>语文</td> </tr> <tr> <!-- 第2行第1列 --> <!-- <td>x</td> --> <td>语文</td> <td>数学</td> <td>语文</td> <td>语文</td> <td>数学</td> </tr> <tr> <!-- 第3行第1列 --> <!-- <td>x</td> --> <td>音乐</td> <td>英语</td> <td>科学</td> <td>英语</td> <td>英语</td> </tr> <tr> <!-- 第4行第1列 --> <!-- <td>x</td> --> <td>历史</td> <td>体育</td> <td>体活</td> <td>电脑</td> <td>道德</td> </tr> <!-- 从第6行第1列开始,合并6列 --> <!-- 水平方向 colspan--> <!-- 将合并属性必须添加到第一个th中,并使用第1个th中的数据 --> <tr> <th bgcolor="lightblue" colspan="6">午休</th> </tr> <tr> <th rowspan="2">下午</th> <td>英语</td> <td>地理</td> <td>数学</td> <td>生物</td> <td>历史</td> </tr> <tr> <td>班会</td> <td>电脑</td> <td>音乐</td> <td>体育</td> <td>地理</td> </tr> <!-- 表尾 --> <tfoot> <tr> <th>晚上</th> <th colspan="5">作业</th> </tr> </tfoot> </tbody> </table>
二、制作注册表单
<!-- 表单: 复合元素,用多个标签描述 1. form: 表单控件的容器 2. fieldset: 表单控件分组容器 3. label: 控件标签名称 4. input: 输入控件,类型由type属性决定 5. select+option: 预定义列表框 6. input+datalist+option: 预定义与自定义列表框 7. textarea: 文本域(多行文本框) 8. button: 按钮,默认同步提交(type="submit") --><!-- 注册表单 --><!-- 1. form.action: 后端处理表单的脚本,如 'register.php' 2. form.method: 表单数据提交方式,默认为GET (1) GET: 数据以键值对方式,添加到url中,适合数量少且可公开的数据,如页码 (2) POST: 数据在请求体中, url不可见,适合大量或敏感的数据,如密码,文件上传 3. enctype: 表单数据编码方案 (1) application/x-www-form-urlencoded: 默认对值对的编码方案 (2) multipart/form-data: 分块,原始数据,适用文件上传 4. target: _self(默认),_blank,和a.target相同 5. id: 表单引用 6. onsubmit: 表单提交事件,返回false,可拦截提交请求 --><form action="register.php" method="POST"> <fieldset style="display: inline-grid; gap: 1em"> <legend>用户注册</legend> <!-- 单行文本框 --> <div class="username"> <label for="uname">用户名:</label> <input type="text" name="username" placeholder="username" id="uname" 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" /> <!-- <input type="month" /> <input type="week" /> <input type="time" /> <input type="datetime-local" name="" id="" /> --> </div> <!-- 其它常用控件简介 --> <!-- url控件 --> <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="#ffff00" 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" accept="image/jpeg,image/png" /> <button type="button" onclick="fileUploads(this.form)">上传</button> </div> <!-- 单选按钮 --> <div class="gender"> <!-- 推荐与默认值的input.id绑定 --> <label for="secret">性别:</label> <!-- name="male",将这个键值对,做为变量与值,提交到后端脚本中处理 --> <!-- 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> <!-- checked: 布尔属性, 默认选项 --> <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label> </div> <!-- 重选框 --> <div class="hobby"> <label>爱好:</label> <!-- * 1. name: hobby[], 数组的语法形式,用于保存一个或多个值,这样后端处理脚本就可以获取到多个值 * 2. input.value <=> input.id <=> label.for,其实只需要input.id <==> label.for * 3. checked: 默认选项 --> <input type="checkbox" name="hobby[]" value="game" id="game" checked /><label for="game">游戏</label> <input type="checkbox" name="hobby[]" value="trave" id="trave" /><label for="trave">旅游</label> <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" value="program" id="program" checked /><label for="program">编程</label> </div> <!-- 下拉列表框 --> <div class="edu"> <label for="edu">学历:</label> <!-- * 1. name与value: 名值,分布在二个标签中,select.name , option.value * 2. selected: 默认选择 * 3. 选择过多,且有规律,建议分组展示: optgroup * 4. 为select加提示: selected + disabled, 加到第一项之前 * 5. multiple: 支持多选 --> <!-- 下拉列表框, 将键与值所在的标签进行分离 --> <!-- select.name = select>option.value --> <!-- select.form="指向当前表单元素" --> <select name="edu" id="edu" form=""> <!-- <select name="edu" id="edu" multiple> --> <!-- select 标签不能加提示, 想加怎么办 --> <!-- 加提示 --> <option value="" selected disabled>--请选择--</option> <option value="0">文盲</option> <!-- 下拉选项分组: 同类组合在一起 --> <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 <==> datalist.id 进行绑定 --> <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="vue">vue</option> <option value="node">node</option> </datalist> </div> <!-- 文本框: 多行文本框 --> <div> <label for="comment">备注:</label> <!-- ? textarea: 没有 value 属性,它的值位于textarea标签之间 --> <!-- ? maxlength: 最大长度 --> <textarea name="comment" id="comment" cols="30" rows="5" maxlength="200" style="resize: none"> Hello world </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>
