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>

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

列表

有序列表

无序列表

表格

表格示例

表单

相关文章