表单控件的实例演示
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> <link rel="stylesheet" href="css/form.css"></head><body> <h3 class="title">用户注册</h3> <form action="check.php" method="POST" class="register" enctype="multipart/form-data"> <!-- 单行文本框 --> <label for="username">账号：</label> <input type="text" id="username" name="username" value="" placeholdel="不能为空" required /> <label for="email">邮箱：</label> <input type="email" id="email" name="email" value="" placeholdel="demo@email.com" required /> <label for="password">密码：</label> <input type="password" id="password" name="password" value="" placeholdel="不少于6位" required /> <!-- 单选按钮与复选框 --> <label for="secret">性别：</label> <div> <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> <label for="#">兴趣：</label> <div> <input type="checkbox" name="hobby[]" value="game" id="game" checked /><label for="game">游戏</label> <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /><label for="shoot">摄影</label> <input type="checkbox" name="hobby[]" value="travel" id="travel" /><label for="travel">旅游</label> <input type="checkbox" name="hobby[]" value="program" id="program" checked /><label for="program">编程</label> </div> <!-- 下拉列表框 --> <label for="edu">学历：</label> <select name="edu" id="edu"> <option value="1">小学</option> <option value="2">初中</option> <option value="3">高中</option> <option value="4" selected>本科</option> <option value="4">研究生</option> </select> <!-- 文件与隐藏域 --> <label for="user-pic">头像：</label> <input type="hidden" name="MAX_FILE_SIZE" value="80000"/> <input type="file" name="user-pic" id="user-pic"/> <div class="user-pic" style="grid-column:span 2"></div> <label for="user-resume">简历：</label> <input type="hidden" name="MAX_FILE_SIZE" value="100000"/> <input type="file" name="user-resume" id="user-resume"/> <div class="user-resume" style="grid-column:span 2"></div> <!-- 文本域 --> <label for="comment">备注：</label> <textarea name="comment" id="comment" cols="30" rows="5"></textarea> <button>提交</button> </form></body></html><script src="css/demo.js"></script>
课程表
html代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课程表</title> <link rel="stylesheet" href="css/table.css" /></head><body> <table class="lesson"> <caption> 北京中学课程表 </caption> <thead> <tr> <th colspan="2"></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> <th>星期日</th> </tr> </thead> <tbody> <tr> <td rowspan="5">上午</td> <td>1</td> <td>语文</td> <td>英语</td> <td>数学</td> <td>物理</td> <td>电脑</td> <td rowspan="5">图书馆自习</td> <td rowspan="5">音乐鉴赏</td> </tr> <tr> <td>2</td> <td>地理</td> <td>英语</td> <td>历史</td> <td>物理</td> <td>语文</td> </tr> <tr> <td>3</td> <td>生物</td> <td>历史</td> <td>数学</td> <td>语文</td> <td>化学</td> </tr> <tr> <td>4</td> <td>语文</td> <td>物理</td> <td>历史</td> <td>地理</td> <td>化学</td> </tr> <tr> <td>5</td> <td>语文</td> <td>英语</td> <td>历史</td> <td>物理</td> <td>生物</td> </tr> <tr class="rest"> <td colspan="9">中午午休</td> </tr> <tr> <td rowspan="3">下午</td> <td>6</td> <td>数学</td> <td>英语</td> <td>地理</td> <td>物理</td> <td>化学</td> <td colspan="2" rowspan="4" class="move">自由活动</td> </tr> <tr> <td>7</td> <td>美术</td> <td>英语</td> <td>历史</td> <td>物理</td> <td>语文</td> </tr> <tr> <td>8</td> <td>语文</td> <td>英语</td> <td>高数</td> <td>电脑</td> <td>大扫除</td> </tr> <tr class="night"> <td colspan="7">晚自习</td> </tr> </tbody> </table></body></html>
css代码
.lesson{ border-collapse:collapse; width:600px; text-align:center; margin:auto; margin-top:100px;}.lesson caption{ font-size:1.4rem; font-weight:800; margin:1em;}.lesson thead{ background-color:lightcyan;}.lesson th,.lesson td{ border:1px solid; padding:0.5em;}.lesson .rest { background-color: #efefef; }.lesson .night { background-color: #4231da;}.lesson .move { background-color: #dcee3a;}.lesson td[rowspan="5"],.lesson td[rowspan="3"] { background-color: rgb(186, 245, 213);}
总结
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<thead> 标签用于组合 HTML 表格的表头内容。
<tbody> 标签用于组合 HTML 表格的主体内容。
<tr> 标签定义 HTML 表格中的行。
<th> 标签定义 HTML 表格中的表头单元格。
<th> 元素中的文本通常呈现为粗体并且居中。
<td> 标签定义 HTML 表格中的标准单元格。
<td> 元素中的文本通常是普通的左对齐文本。
