表格和表单
1. 表格
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>课程表</title> </head> <body> <table> <caption> 课程表 </caption> <thead> <tr> <th>时间</th> <th>星期1</th> <th>星期2</th> <th>星期3</th> <th>星期4</th> <th>星期5</th> </tr> </thead> <tbody> <tr> <td rowspan="3">上午</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>中午</td> <td colspan="5">午休</td> <!-- <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> <td>语文</td> --> </tr> <tr> <td rowspan="3">下午</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> <style> td, th { border: 1px solid black; } table caption { font-weight: bolder; font-size: larger; margin-bottom: 5px; } table thead { background-color: lightgreen; } table { box-sizing: content-box; width: 500px; margin: 0 auto; text-align: center; border-collapse: collapse; border: 2px solid black; } </style> </body></html>
2. 表单
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>用户注册</title> </head> <body> <form action="register.php" method="post"> <fieldset style="display: inline-grid; gap: 1em"> <legend>用户注册</legend> <div> <label for="username">用户名:</label> <input type="text" name="username" id="username" placeholder="至少8位" /> </div> <div> <label for="email">邮   箱:</label ><input type="email" name="email" id="email" placeholder="username@126.com" /> </div> <div> <label for="pwd">密   码:</label> <input type="password" name="pwd" id="pwd" /> </div> <div> <label for="age">年   龄:</label> <input type="number" name="age" id="age" value="24" min="18" max="70" step="2" /> </div> <div> <label for="birthday">年   龄:</label> <input type="date" name="birthday" id="birthday" value="1980-02-01" min="1949-01-01" max="2004-01-01" /> </div> <div> <label for="secret">性   别:</label> <input type="radio" name="gender" id="male" value="male" /><label for="male" >男</label ><input type="radio" name="gender" id="female" value="female" /><label for="female" >女</label ><input type="radio" name="gender" id="secret" value="secret" checked /><label for="secret">保密</label> </div> <div> <label for="blog">博   客:</label> <input type="url" name="blog" id="url" 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> <label for="">爱   好:</label ><input type="checkbox" name="hobby[]" id="game" value="game" /><label for="game" >游戏</label ><input type="checkbox" name="hobby[]" id="computer" value="computer" /><label for="computer">电脑</label ><input type="checkbox" name="hobby[]" id="film" value="film" /><label for="film" >看电影</label ><input type="checkbox" name="hobby[]" id="shopping" value="shopping" /><label for="shopping">购物</label> </div> <div> <label for="keyword">关键字</label>:</label> <input type="search" name="keyword" id="keyword" placeholder="请输入关键词" /> </div> <div><label for="upload">表格上传</label><input type="file" name="excel_upload" id="upload" accept=".xls,.xlsx"/> <button type="button" onclick="fileUploads(this.form)">上传</button></div> <div><label for="education">教育程度</label> <select name="edu" id="edu"> <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="firm">工作单位: </label> <input type="search" name="firm" list="firms" id="keyword" /> <datalist id="firms"> <option value="百度">百度</option> <option value="阿里巴巴">阿里巴巴</option> <option value="亚马逊">亚马逊</option> <option value="京东">京东</option> <option value="腾讯">腾讯</option> <option value="php中文网">php中文网</option> </datalist> </div> <div> <label for="comment">自我介绍:</label> <textarea name="comment" id="comment" cols="30" rows="5" maxlength="200" style="resize: none"> 简单介绍下自己 </textarea> </div> </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.excel_upload.value.length === 0) { tips += '文件不能为空' } else { tips += '上传成功' } alert(tips) } </script> </body></html>
