HTML中无序列表，表格，表单的应用 2019年7月2日 - PHP第七期

HTML编写中，表格和表单是非常重要的功能，表单中需要熟悉各种提交元素的类型，文本、数字、日期等不同的体现方式，单选和复选的应用中注意到复选的提交结果为数组需要增加中括号，文本提交格式和前面的提交元素标签不一致的，前面全是单标签input方式，文本提交为双标签 textarea，最后是两种按钮的提交方式，单标签的input 与双标签的button.

实例

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>培训第二天</title>
</head>
<body>
<h2>今天的作业第二题无序列表</h2>

<ul>
   <li>语文</li>
   <li>数学</li>
   <li>英语</li>
   <li>政治</li>
</ul>

<h3>第三题表格用法</h3>

<table border="1" cellspacing="0" >
<caption>这是一个表格</caption>
   <thead>
   <tr>
       <th>序号</th>
       <th>项目</th>
       <th>来源</th>
       <th>单价</th>
       <th>数量</th>
       <th>金额</th>
   </tr>
   </thead>
   <tbody align="center" >
   <tr>
       <td>1</td>
       <td>衣服</td>
       <td>京东</td>
       <td>300</td>
       <td>3</td>
       <td>900</td>
   </tr>
   <tr>
       <td>2</td>
       <td>手机</td>
       <td>淘宝</td>
       <td>2000</td>
       <td>1</td>
       <td>2000</td>
   </tr>
   <tr>
       <td>3</td>
       <td>零食</td>
       <td>菜***</td>
       <td>50</td>
       <td>5</td>
       <td>250</td>
   </tr>
   </tbody>
   <tfoot align="center">
   <tr>
       <td colspan="4">总计</td>
       <td>9</td>
       <td>3150</td>
   </tr>
   </tfoot>
</table>

<h2>第四题表单的用法</h2>
<h3>注册</h3>

<form action="" method="post" name="reg">
<p>
   <label for="username">账号：</label>
   <input type="text" name="username" id="username" placeholder="不超过8个字" autofocus>
</p>
<p>
   <label for="password">密码：</label>
   <input type="password" id="password" name="password" placeholder="6-12个数字和字母" autofocus>
</p>
   <p>
       <label for="email">邮箱：</label>
       <input type="email" id="email" name="email" placeholder="sample@sina.com" autofocus required>
   </p>
   <p>
       <label for="age">年龄：</label>
       <input type="number" id="age" name="age" min="10" max="60">
   </p>
   <p>
       <label for="birthday">生日：</label>
       <input type="date" id="birthday" name="birthday" >
   </p>
   <p>
       <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="5">研究生</option>
       </select>

   </p>
   <p>
       <label >爱好：</label>
       <input type="checkbox" name="aihao[]" value="game" id="game"> <label for="game">打游戏</label>
       <input type="checkbox" name="aihao[]" value="music" id="music"> <label for="music">听音乐</label>
       <input type="checkbox" name="aihao[]" value="tv" id="tv" checked> <label for="tv">看电视</label>
   </p>
   <p>
       <label >性别：</label>
       <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>
   </p>
   <p>
       <label for="jieshao">自我介绍</label>
       <textarea name="jieshao" id="jieshao" cols="30" rows="10" maxlength="500" placeholder="不超过300个字"></textarea>
   </p>
   <p>
       <input type="submit" name="submit" value="提交">
       <input type="reset" name="reset" value="重置">
       <h1>按钮提交</h1>
       <button type="submit">提交</button>
       <button type="reset">重置</button>
   </p>
</form>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结，因之前对PHP有看一些自学视频，所以有些内容有所了解，但是没有系统性的学习，这次能系统性的学习html的内容，是对之前学过的东西进行了有效的梳理及巩固，总的来说现在还相对基础，但是知识点还是有点多，一天的课程相对于自己去自学要学好几天

Correction status：qualified

Teacher's comments：前端的概念不难理解, 就是代码量比较大