search

博客列表 >D3表格与表单控制

D3表格与表单控制

虫先森
虫先森原创
2020年04月04日 06:39:211138浏览

点击这里可以快速打开本次作业的实验成果页面，文末也有本链接

列表

  • 元素标签
标签 含义 说明
li 标签 列表标签
ol 有序标签 列表中的标签以数字顺序编号
ul 无序标签 列表中的标签以圆点符号排列

有序列表

  1. <!-- 有序列表 -->
  2. <ol>
  3.   <li>我是第一个</li>
  4.   <li>我是第二个</li>
  5.   <li>我是第三个</li>
  6. </ol>

无序列表

  1. <!-- 无序列表 -->
  2. <ul>
  3.   <li>我是黄飞鸿</li>
  4.   <li>我是霍元甲</li>
  5.   <li>我是叶问</li>
  6. </ul>

表格

  • 必要表格标签
标签 名称 说明
table 表格 控制整个表格
tbody 表格主体 就算不写，浏览器也会补上
th 表头 控制表头
tr 行 控制横向表格
rd 列 控制纵向表格
  • 可选表格标签
标签 说明
caption 表格标题
thead 表格顶格
tfooter 表格底部
col 仅能设置多列属性
colgroup 对 col 标签进行分组管理
  • 表格通用属性
属性 说明
align 内容的对齐方式
bgcolor 背景色
width 宽度
height 高度
  • 表格局限使用的属性
属性 说明 可用标签
border 表格框，通过数值设置框边大小 table
cellpadding 单元格内边距 table
cellspacing 单元格边框间隙 table

表格示例

  1. <table border="0" cellpadding="5" cellspacing="3" align="center">
  2.   <!-- 表格纵列背景色控制 -->
  3.   <colgroup bgcolor="lightgray">
  4.     <col bgcolor="lightyellow" />
  5.     <col bgcolor="lightpink" />
  6.     <col span="4" />
  7.   </colgroup>
  8.   <!-- 表格名称 -->
  9.   <caption style="margin-bottom: 10px;font-size: 20px;">
  10.     本期课程教务工作人员名单
  11.   </caption>
  12.   <!-- 表头项目名称 -->
  13.   <tr>
  14.     <th class="">工作组</th>
  15.     <th class="">名字</th>
  16.     <th class="">性别</th>
  17.     <th class="">职务</th>
  18.     <th class="">课程板块</th>
  19.   </tr>
  20.   <!-- 表格内容 -->
  21.   <div class="">
  22.     <tr class="">
  23.       <td rowspan="2">教师组</td>
  24.       <td>朱老师</td>
  25.       <td>男</td>
  26.       <td>主讲老师</td>
  27.       <td>WEB前端</td>
  28.     </tr>
  29.     <tr class="">
  30.       <td>张丰和</td>
  31.       <td>男</td>
  32.       <td>助教</td>
  33.       <td>WEB前端</td>
  34.     </tr>
  35.     <tr class="">
  36.       <td>督导组</td>
  37.       <td>李姐</td>
  38.       <td>女</td>
  39.       <td>教务督导</td>
  40.       <td>WEB前端&php编程</td>
  41.     </tr>
  42.     <tr bgcolor="lightgreen">
  43.       <td class="">说明</td>
  44.       <td class="" colspan="4">其他工作人员名单尚在确定中。</td>
  45.     </tr>
  46.   </div>
  47. </table>

表单

  • 表单标签
  • 表单元素标签<form>
属性 说明
action 激活地址，表单提交后处理请求的脚本
method 表单提交类型，只有两种值：GET/POST
enctype 表单提交数据的编码方式
name 表单的名称
target 提交后打开 URL 的方式
  • method 方式说明
值 场景 说明 适合方式
application/x-www-form-urlencoded 接受 value 值 请求内容在 URL 中，公开 GET/POST
multipart/form-data 文件上传 内容封装在请求文件中 POST
text/plain 电子邮件 发送邮件 action=”mailto:URL”

  • 请求打开方式
    self：当前窗口打开
    blank：新窗口打开

  • 表单控件
    元素<input>

属性 说明
type 控件类型
name 参数名称，对应脚本变量
value 值，对应脚本变量值
form 所属表单
placeholder txet 和 password 可用，输入框提示信息
list text 和 password 可用，下拉框
autocomplate text 和 password 可用，自动完成（历史记录）
maxlength text 和 password 可用，最大字符数量
checked 布尔，radio 和 checkbox 可用
readonly 布尔，只读，通过 javascript 修改
disabled 布尔，元素禁用
autofocus 布尔，自动获取焦点
src images 可用，图像 URL
width images 可用，图像宽度
height images 可用，图像高度
  • 表单控件类型
    type属性
类型 说明
text 单行文本
password 密码
radio 单选
checkbox 复选
image 图像提交
file 文件上传
hidden 隐藏
email 电子邮件
date 日期
datetime-local 本地日期时间
tel 电话
url URL 地址
number 数值
range 拖动条
search 搜索框
color 拾色器

表单制作代码

  1. <!-- 表单制作 -->
  2. <form
  3.   action="knowwork.php"
  4.   method="POST"
  5.   enctype="application/x-www-form-urlencoded"
  6.   id="stuform"
  7. >
  8.   <!-- 文本输入 -->
  9.   <section>
  10.     <label for="username">你的学号：</label>
  11.     <input
  12.       type="text"
  13.       name="username"
  14.       id="username"
  15.       maxlength="10"
  16.       size="10"
  17.       placeholder="6位学号"
  18.       required
  19.       autofocus
  20.     />
  21.   </section>
  22.   <!-- 密码输入 -->
  23.   <section>
  24.     <label for="password">学籍密码：</label>
  25.     <input type="password" name="password" id="password" size="10" required />
  26.   </section>
  27.   <!-- 单选 -->
  28.   <section>
  29.     <label for="2nd">课程阶段</label>
  30.     <input type="radio" name="progress" id="1st" value="1" /><label for="1st"
  31.       >第一阶段</label
  32.     >
  33.     <input type="radio" name="progress" id="2nd" value="2" checked /><label
  34.       for="2nd"
  35.       >第二阶段</label
  36.     >
  37.     <input type="radio" name="progress" id="3rd" value="3" /><label for="3rd"
  38.       >第三阶段</label
  39.     >
  40.   </section>
  41.   <!-- 拉动条 -->
  42.   <section>
  43.     <label for="range">该阶段进度</label>
  44.     <input type="range" name="range" id="range" />
  45.   </section>
  46.   <!-- 多选 -->
  47.   <section>
  48.     <label for="p5">你有下列哪些问题？</label>
  49.     <br />
  50.     <div>
  51.       <input type="checkbox" name="hobby[]" id="p1" /><label for=""
  52.         >语言中的英语单词不熟悉</label
  53.       >
  54.       <br />
  55.       <input type="checkbox" name="hobby[]" id="p2" /><label for=""
  56.         >对语言的逻辑过程感觉烧脑</label
  57.       >
  58.       <br />
  59.       <input type="checkbox" name="hobby[]" id="p3" /><label for=""
  60.         >元素标签的使用规范不清楚</label
  61.       >
  62.       <br />
  63.       <input type="checkbox" name="hobby[]" id="p4" /><label for=""
  64.         >我其实不会用vscode这个软件设置</label
  65.       >
  66.       <br />
  67.       <input type="checkbox" name="hobby[]" id="p5" checked /><label for=""
  68.         >我没有感觉到以上的问题</label
  69.       >
  70.       <br />
  71.     </div>
  72.   </section>
  73.   <!-- 文件上传 -->
  74.   <section>
  75.     <label for="stufile">上传你的作业文件：</label>
  76.     <input type="file" name="stufile" id="stufile" />
  77.     <input type="hidden" name="MAX_FILE_SIZE" value="1024" />
  78.   </section>
  79.   <!-- 下拉复合单选 -->
  80.   <section>
  81.     <label for="group">你所在的学习小组：</label>
  82.     <input type="text" name="group" list="group" />
  83.     <datalist id="group">
  84.       <option value="天才小队"> </option>
  85.       <option value="码农生产队"> </option>
  86.       <option value="网络民工组"> </option>
  87.       <option value="马爸爸赞助队"> </option>
  88.     </datalist>
  89.   </section>
  90.   <!-- 图片提交按钮 -->
  91.   <input type="image" src="btn.jpg" alt="submit" name="submit" width="100" />
  92. </form>

实验结果：
本次作业的实验结果已经上传服务器，点击查看，辛苦！

上一条：HTML 基础之链接元素下一条：0403作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多