简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > HTML中无序列表，表格，表单的应用 2019年7月2日
Blogger Information
Blog 10
fans 0
comment 0
visits 5115
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML中无序列表，表格，表单的应用 2019年7月2日
Johnson的博客
Original
865 people have browsed it

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：前端的概念不难理解, 就是代码量比较大
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！