search

博客列表 >1209-列表、表格、表单

1209-列表、表格、表单

待伊散落尽芳华
待伊散落尽芳华原创
2020年12月10日 14:44:181699浏览

1209-列表、表格、表单

1. 列表

  • 有序列表：ul+li
  • 无序列表：ol+li
  • 自定义列表：dl+dt+dd

应用：

  • 导航栏
  • 图文列表

2.表格

table:表格
caption：标题
thead：表格头部
tbody：表格主体
tfoot：表格底部
tr：行
th：着重行，文字居中、加粗
td：列
colspan：列合并
rowspan：行合并

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>表格:行与列的合并</title>
  6.     <link rel="stylesheet" href="style/table.css" />
  7.   </head>
  8.   <body>
  9.     <!-- table:表格
  10.           caption：标题
  11.           thead：表格头部
  12.           tbody：表格主体
  13.           tfoot：表格底部
  14.           tr：行
  15.           th：着重行，文字居中、加粗
  16.           td：列
  17.           colspan：列合并
  18.           rowspan：行合并
  19.     -->
  20.     <table class="lesson">
  21.       <caption>
  22.         合肥市第三十六小学课程表
  23.       </caption>
  24.       <thead>
  25.         <tr>
  26.           <th colspan="2"></th>
  27.           <th>星期一</th>
  28.           <th>星期二</th>
  29.           <th>星期三</th>
  30.           <th>星期四</th>
  31.           <th>星期五</th>
  32.         </tr>
  33.       </thead>
  34.       <tbody>
  35.         <tr>
  36.           <td rowspan="4">上午</td>
  37.           <td>1</td>
  38.           <td>数学</td>
  39.           <td>语文</td>
  40.           <td>语文</td>
  41.           <td>语文</td>
  42.           <td>数学</td>
  43.         </tr>
  44.         <tr>
  45.           <td>2</td>
  46.           <td>语文</td>
  47.           <td>语文</td>
  48.           <td>音乐</td>
  49.           <td>科学</td>
  50.           <td>美术</td>
  51.         </tr>
  52.         <tr>
  53.           <td>3</td>
  54.           <td>语文</td>
  55.           <td>美术</td>
  56.           <td>数学</td>
  57.           <td>数学</td>
  58.           <td>语文</td>
  59.         </tr>
  60.         <tr>
  61.           <td>4</td>
  62.           <td>科学</td>
  63.           <td>数学</td>
  64.           <td>语文</td>
  65.           <td>体育</td>
  66.           <td>道法</td>
  67.         </tr>
  68.         <tr class="rest">
  69.           <td colspan="7">中午休息</td>
  70.         </tr>
  72.         <tr>
  73.           <td rowspan="3">上午</td>
  74.           <td>5</td>
  75.           <td>数学</td>
  76.           <td>语文</td>
  77.           <td>语文</td>
  78.           <td>语文</td>
  79.           <td>数学</td>
  80.         </tr>
  81.         <tr>
  82.           <td>6</td>
  83.           <td>语文</td>
  84.           <td>语文</td>
  85.           <td>音乐</td>
  86.           <td>科学</td>
  87.           <td>美术</td>
  88.         </tr>
  89.         <tr>
  90.           <td>7</td>
  91.           <td>课外活动:</td>
  92.           <td colspan="4">各班自行组织,自愿参加</td>
  93.         </tr>
  94.       </tbody>
  95.     </table>
  96.   </body>
  97. </html>

3.表单

action: 处理表单的程序（接收表单数据的地址）
method:表单提交类型（明文get，密文post)
默认为GET: 数据直接放在url地址中
POST: 表单的数据在请头体中
enctype：传输数据的方式/类型
尽管form属性可以实现将控件写到任何地方,仍然能够获取到值，但不要这样做
第一影响布局，第二代码混乱
但是，用在js中， 获取数据将会变得非常的方便
input > type值：

  • text 通用文本框
  • password 密码框（密文）
  • email 邮箱
  • button 按钮
  • checkbox 复选框
  • radio 单选框
  • file 文件上传
  • hidden 隐藏域

其它控件：

  • select + option 下拉框
  • textarea 文本域
  • label 文本标签
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>表单</title>
  6.     <link rel="stylesheet" href="style/form.css" />
  7.   </head>
  8.   <body>
  9.     <h3 class="title">用户注册</h3>
  10.     <!-- action: 处理表单的程序（接收表单数据的地址） 
  11.      method:表单提交类型（明文get，密文post） 
  12.      默认为GET: 数据直接放在url地址中 
  13.      POST: 表单的数据在请头体中 
  14.      enctype：传输数据的方式/类型 
  15.      demo4.html?username=admin&email=admin%40php.cn&password=123456 
  16.     尽管form属性可以实现将控件写到任何地方,仍然能够获取到值，但不要这样做
  17.     第一影响布局，第二代码混乱
  18.     但是，用在js中， 获取数据将会变得非常的方便 -->
  19.     <form action="" method="POST" class="register" enctype="multipart/form-data">
  20.       <!-- 1. 单行文本框 for：绑定控件id -->
  21.       <label for="username">帐号:</label>
  22.       <!-- type: 控件类型 -->
  23.       <!-- name: 数据的变量名 -->
  24.       <!-- value: 数据的内容 -->
  25.       <input type="text" id="username" name="username" value="" placeholder="username" required />
  26.       <!-- type="text"这是通用文本框,还有一些专用的 -->
  27.       <!-- 邮箱型文本框 -->
  28.       <label for="email">邮箱:</label>
  29.       <input type="email" id="email" name="email" value="" required placeholder="demo@email.com" />
  30.       <!-- 密码型文本框/非明文 -->
  31.       <label for="password">密码:</label>
  32.       <input type="password" id="password" name="password" value="" required placeholder="不少于6位" />
  34.       <!-- 2. 单选按钮与复选框 -->
  35.       <label for="secret">性别:</label>
  36.       <div>
  37.         <!-- 一组单选按钮必须共用同一个名称的name属性值，否则无法实现值的唯一性 -->
  38.         <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
  39.         <input type="radio" name="gender" value="female" id="female" /><label for="female">女</label>
  40.         <input type="radio" name="gender" value="secret" id="secret" checked /><label for="secret">保密</label>
  41.       </div>
  43.       <label for="#">兴趣:</label>
  44.       <div>
  45.         <!-- 复选框的name属性值应该写与数组的格式名称,这样才确保服务器可以接收到一组值 -->
  46.         <input type="checkbox" name="hobby[]" value="game" id="game" checked /> <label for="game">游戏</label>
  47.         <input type="checkbox" name="hobby[]" value="shoot" id="shoot" /> <label for="shoot">摄影</label>
  48.         <input type="checkbox" name="hobby[]" value="travel" id="travel" /> <label for="travel">旅游</label>
  49.         <input type="checkbox" name="hobby[]" value="program" id="program" checked /> <label for="program">编程</label>
  50.       </div>
  52.       <!-- 3. 下拉列表/下拉框 -->
  54.       <label for="edu">学历:</label>
  55.       <!-- multiple：多选
  56.             size:可显示的选项数量      
  57.       -->
  58.       <!-- <select name="edu" id="edu" multiple size="2"></select> -->
  59.       <select name="edu" id="edu">
  60.         <option value="1">初中</option>
  61.         <option value="2">高中</option>
  62.         <option value="3" selected>本科</option>
  63.         <option value="4">研究生</option>
  64.         <!-- label属性的优先级大于option内部的文本 -->
  65.         <!-- <option value="5" label="老司机">自学成长</option> -->
  66.       </select>
  68.       <!-- 4. 文件域与隐藏域 -->
  69.       <!-- 上传文件要注意二点:
  70.       1. 请求类型必须是: POST 
  71.       2. 将表单数据编码设置为:  -->
  72.       <label for="user-pic">头像:</label>
  73.       <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  74.       <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
  75.       <input type="file" name="user_pic" id="user-pic" />
  76.       <!-- 头像占位符 -->
  77.       <div class="user-pic" style="grid-column: span 2"></div>
  79.       <label for="user-resume">简历:</label>
  80.       <!-- 隐藏域,在前端页面看不到的,它的值供后端处理时用 -->
  81.       <input type="hidden" name="MAX_FILE_SIZE" value="100000" />
  82.       <input type="file" name="user_resume" id="user-resume" />
  84.       <div class="user-resume" style="grid-column: span 2"></div>
  86.       <!-- 5. 文本域 -->
  87.       <label for="comment">备注:</label>
  88.       <textarea name="comment" id="comment" cols="30" rows="5"></textarea>
  90.       <!-- 提交按钮 -->
  91.       <button>提交</button>
  92.     </form>
  93.   </body>
  94. </html>
  96. <script src="style/demo7.js"></script>
上一条：关于列表、表单、表格总结下一条：用表格制作课程表和表单元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多