D3表格与表单控制

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

列表

• 元素标签

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

有序列表

<!-- 有序列表 -->
<ol>
  <li>我是第一个</li>
  <li>我是第二个</li>
  <li>我是第三个</li>
</ol>

无序列表

<!-- 无序列表 -->
<ul>
  <li>我是黄飞鸿</li>
  <li>我是霍元甲</li>
  <li>我是叶问</li>
</ul>

---

表格

• 必要表格标签

标签	名称	说明
table	表格	控制整个表格
tbody	表格主体	就算不写，浏览器也会补上
th	表头	控制表头
tr	行	控制横向表格
rd	列	控制纵向表格

• 可选表格标签

标签	说明
caption	表格标题
thead	表格顶格
tfooter	表格底部
col	仅能设置多列属性
colgroup	对 col 标签进行分组管理

• 表格通用属性

属性	说明
align	内容的对齐方式
bgcolor	背景色
width	宽度
height	高度

• 表格局限使用的属性

属性	说明	可用标签
border	表格框，通过数值设置框边大小	table
cellpadding	单元格内边距	table
cellspacing	单元格边框间隙	table

表格示例

<table border="0" cellpadding="5" cellspacing="3" align="center">
  <!-- 表格纵列背景色控制 -->
  <colgroup bgcolor="lightgray">
    <col bgcolor="lightyellow" />
    <col bgcolor="lightpink" />
    <col span="4" />
  </colgroup>
  <!-- 表格名称 -->
  <caption style="margin-bottom: 10px;font-size: 20px;">
    本期课程教务工作人员名单
  </caption>
  <!-- 表头项目名称 -->
  <tr>
    <th class="">工作组</th>
    <th class="">名字</th>
    <th class="">性别</th>
    <th class="">职务</th>
    <th class="">课程板块</th>
  </tr>
  <!-- 表格内容 -->
  <div class="">
    <tr class="">
      <td rowspan="2">教师组</td>
      <td>朱老师</td>
      <td>男</td>
      <td>主讲老师</td>
      <td>WEB前端</td>
    </tr>
    <tr class="">
      <td>张丰和</td>
      <td>男</td>
      <td>助教</td>
      <td>WEB前端</td>
    </tr>
    <tr class="">
      <td>督导组</td>
      <td>李姐</td>
      <td>女</td>
      <td>教务督导</td>
      <td>WEB前端&php编程</td>
    </tr>
    <tr bgcolor="lightgreen">
      <td class="">说明</td>
      <td class="" colspan="4">其他工作人员名单尚在确定中。</td>
    </tr>
  </div>
</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	拾色器

表单制作代码

<!-- 表单制作 -->
<form
  action="knowwork.php"
  method="POST"
  enctype="application/x-www-form-urlencoded"
  id="stuform"
>
  <!-- 文本输入 -->
  <section>
    <label for="username">你的学号：</label>
    <input
      type="text"
      name="username"
      id="username"
      maxlength="10"
      size="10"
      placeholder="6位学号"
      required
      autofocus
    />
  </section>
  <!-- 密码输入 -->
  <section>
    <label for="password">学籍密码：</label>
    <input type="password" name="password" id="password" size="10" required />
  </section>
  <!-- 单选 -->
  <section>
    <label for="2nd">课程阶段</label>
    <input type="radio" name="progress" id="1st" value="1" /><label for="1st"
      >第一阶段</label
    >
    <input type="radio" name="progress" id="2nd" value="2" checked /><label
      for="2nd"
      >第二阶段</label
    >
    <input type="radio" name="progress" id="3rd" value="3" /><label for="3rd"
      >第三阶段</label
    >
  </section>
  <!-- 拉动条 -->
  <section>
    <label for="range">该阶段进度</label>
    <input type="range" name="range" id="range" />
  </section>
  <!-- 多选 -->
  <section>
    <label for="p5">你有下列哪些问题？</label>
    <br />
    <div>
      <input type="checkbox" name="hobby[]" id="p1" /><label for=""
        >语言中的英语单词不熟悉</label
      >
      <br />
      <input type="checkbox" name="hobby[]" id="p2" /><label for=""
        >对语言的逻辑过程感觉烧脑</label
      >
      <br />
      <input type="checkbox" name="hobby[]" id="p3" /><label for=""
        >元素标签的使用规范不清楚</label
      >
      <br />
      <input type="checkbox" name="hobby[]" id="p4" /><label for=""
        >我其实不会用vscode这个软件设置</label
      >
      <br />
      <input type="checkbox" name="hobby[]" id="p5" checked /><label for=""
        >我没有感觉到以上的问题</label
      >
      <br />
    </div>
  </section>
  <!-- 文件上传 -->
  <section>
    <label for="stufile">上传你的作业文件：</label>
    <input type="file" name="stufile" id="stufile" />
    <input type="hidden" name="MAX_FILE_SIZE" value="1024" />
  </section>
  <!-- 下拉复合单选 -->
  <section>
    <label for="group">你所在的学习小组：</label>
    <input type="text" name="group" list="group" />
    <datalist id="group">
      <option value="天才小队"> </option>
      <option value="码农生产队"> </option>
      <option value="网络民工组"> </option>
      <option value="马爸爸赞助队"> </option>
    </datalist>
  </section>
  <!-- 图片提交按钮 -->
  <input type="image" src="btn.jpg" alt="submit" name="submit" width="100" />
</form>

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