# 表单与列表

# 表单

表单是服务器收集用户数据的方式。

# form

一般情况下表单项要放在 FORM 内提交。

<form action="hd.php" method="POST">
	<fieldset>
		<legend>测试</legend>
		<input type="text">
	</fieldset>
</form>
1
2
3
4
5
6
属性 说明
action 后台地址
method 提交方式 GET 或 POST

# label

使用 label 用于描述表单标题,当点击标题后文本框会获得焦点,需要保证使用的ID在页面中是唯一的。

<form action="hd.php" method="POST" novalidate>
<label for="title">标题</label>
<input type="text" name="title" id="title">
</form>
1
2
3
4

# input

文本框用于输入单行文本使用,下面是常用属性与示例。

属性 说明
type 表单类型默认为 text
name 后台接收字段名
required 必须输入
placeholder 提示文本内容
value 默认值
maxlength 允许最大输入字符数
size 表单显示长度,一般用不使用而用 css 控制
disabled 禁止使用,不可以提交到后台
readonly 只读,可提交到后台
<form action="hd.php" method="POST" novalidate>
        <fieldset>
            <legend>文本框</legend>
            <input type="text" name="title" required placeholder="请输入标题" maxlength="5" value="" size="100">
        </fieldset>
</form>
1
2
3
4
5
6

novalidate 属性规定当提交表单时不对其进行验证。

说明

# 其他类型

通过设置表单的 type 字段可以指定不同的输入内容。

类型	          说明
email	   输入内容为邮箱
url	             输入内容为URL地址
password	输入内容为密码项
tel	  电话号,移动端会调出数字键盘
search	搜索框
hidden	隐藏表单
submit	提交表单
1
2
3
4
5
6
7
8

# hidden

隐藏表单用于提交后台数据,但在前台内容不显示也以在其上做用样式表也没有意义。

<input type="hidden" name="id" value="1">

1
2

# 提交表单

创建提交按钮可以将表单数据提交到后台,有多种方式可以提交数据如使用AJAX,或HTML的表单按钮。 1.使用input构建提交按钮,如果设置了name值按钮数据也会提交到后台,如果有多个表单项可以通过些判断是哪个表单提交的。

<input type="submit" name="submit" value="提交表单">
1

2.使用button也可以提交,设置type属性为submit 或不设置都可以提交表单。

<button type="submit">提交表单</button>
1

# 禁用表单

通过为表单设置 disabled 或 readonly 都可以禁止修改表单,但 readonly表单的数据可以提交到后台。

<input type="text" name="web" value="houdunren.com" readonly>
1

# pattern

表单可以通过设置 pattern 属性指定正则验证,也可以使用各种前端验证库如formvalidatorvalidator.js

属性 说明
pattern 正则表达式验证规则
oninvalid 输入错误时触发的事件
<form action="">
	<input type="text" name="username" pattern="[A-z]{5,20}" 
	oninvalid="validate('请输入5~20位字母的用户名')">
	<button>提交</button>
</form>
    
<script>
	function validate(message) {
		alert(message);
	}
</script>
1
2
3
4
5
6
7
8
9
10
11

# textarea

文本域指可以输入多行文本的表单,当然更复杂的情况可以使用编辑器如ueditor、ckeditor等。

选项 说明
cols 列字符数(一般使用css控制更好)
rows 行数(一般使用css控制更好)
<textarea name="content" cols="30" rows="3">houdunren.com</textarea>
1

# select

下拉列表项可用于多个值中的选择。

选项 说明
multiple 支持多选
size 列表框高度
optgroup 选项组
selected 选中状态
option 选项值
<select name="lesson">
        <option value="">== 选择课程 ==</option>
        <optgroup label="后台">
            <option value="php">PHP</option>
            <option value="linux">LINUX</option>
            <option value="mysql">MYSQL</option>
        </optgroup>
        <optgroup label="前台">
            <option value="php">HTML</option>
            <option value="linux">JAVASCRIPT</option>
            <option value="mysql">CSS</option>
        </optgroup>
</select>
1
2
3
4
5
6
7
8
9
10
11
12
13

# radio

单选框指只能选择一个选项的表单,如性别的选择男、女、保密 只能选择一个。

选项 说明
checked 选中状态
<input type="radio" name="sex" value="boy" id="boy">
<label for="boy">男</label>

<input type="radio" name="sex" value="girl" id="girl" checked>
<label for="girl">女</label>
1
2
3
4
5

# checkbox

复选框指允许选择多个值的表单。

<fieldset>
        <legend>复选框</legend>
        <input type="checkbox" name="sex" value="boy" id="boy">
        <label for="boy">PHP</label>

        <input type="checkbox" name="sex" value="girl" id="girl" checked>
        <label for="girl">MYSQL</label>
</fieldset>
1
2
3
4
5
6
7
8

# 文件上传

文件上传有多种方式,可以使用插件或JS拖放上传处理。HTML本身也提供了默认上传的功能,只是上传效果并不是很美观。

选项 说明
multiple 支持多选
accept 允许上传类型 .png,.psd 或 image/png,image/gif
<form action="" method="POST" enctype="multipart/form-data">
	<fieldset>
		<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
	</fieldset>
	<button>保存</button>
</form>
1
2
3
4
5
6

# 日期与时间

属性 说明
step 间隔:date 缺省是1天,week缺省是1周,month缺省是1月
min 最小时间
max 最大时间

日期选择

<input type="date" step="5" min="2020-09-22" max="2025-01-15" name="datetime">
1

周选择

<input type="week">
1

月份选择

<input type="month">
1

日期与时间

<input type="datetime-local" name="datetime">
1

# datalist

input表单的输入值选项列表

<form action="" method="post">
  <input type="text" list="lesson">
  <datalist id="lesson">
    <option value="PHP">后台管理语言</option>
    <option value="CSS">美化网站页面</option>
    <option value="MYSQL">掌握数据库使用</option>
  </datalist>
</form>
1
2
3
4
5
6
7
8

# autocomplete

浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

<form action="">
  <input type="search" autocomplete="on" name="content" />
  <button>提交</button>
</form>
1
2
3
4

# 列表

列表的使用与word 等软件的列表概念相似,只不过是应用在网页展示中。 列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。 所谓有序,指的是按照数字或字母等顺序排列列表项目 所谓无序,是指以●、○、▽、▲等开头的,没有顺序的列表项目 列表的主要标记,如下表所示

# 有序列表ol

有序列表标记——ol 有序列表的类型——type 有序列表的起始数值——start 有序列表是指有数字编号的列表项,可以使用CSS定义更多样式,具体请查看CSS章节。 有序列表的起始数值——start ,默认情况下,有序列表的列表项是从数字1开始的,通过start参数可以调整起始数值。

<style>
        .li-style1{
            /* 
            circle      空心圆
            disc        实心圆
            square      实心方块
            decimal     数字
            upper-alpha 大写字母
            lower-alpha 小写字母
            upper-roman 大写罗马数字
            lower-roman 小写罗马数字
             */
            list-style-type: decimal;
        }
        
        .li-style2
        	/* 取消风格 */
            list-style: none;
        }
        .li-style3{
        	/*inside 内部 outside 外部(默认)*/
        	list-style-position: inside;
        }
</style>

<ol start="1">
	<li>后盾人</li>
	<li>houdunren.com</li>
	<li>hdcms.com</li>
</ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<BODY>
<H1>星期中的每一天</H1>
<OL start="1">	
<LI>星期日
<LI>星期一
<LI>星期二
<LI>星期三
<LI>星期四
<LI>星期五
<LI>星期六
</OL>
</BODY>
1
2
3
4
5
6
7
8
9
10
11
12

# 无序列表ul

没有数字编号的列表项,可以使用CSS定义更多样式,具体请查看CSS章节。 设置无序列表的类型type 无序列表的默认符号是圆点(● )。 ul元素有type属性,通过定义不同的type属性可以改变列表的项目符号。目前,type属性的属性值有: disc(圆●)、circle(圆圈○ )、square(方块■ )

无序列表的应用 无序列表UL也称为“项目列表”

<ul>
	<li>后盾人</li>
	<li>houdunren.com</li>
	<li>hdcms.com</li>
</ul>
1
2
3
4
5

又如以下实例:

<BODY>
<H1>星期中的每一天</H1>
<UL>	
	<LI >星期日
	<LI type="square">星期一
	<LI type="disc">星期二
	<LI type="circle">星期三
	<LI type="square">星期四
	<LI type="disc">星期五
	<LI type="circle">星期六
</UL>
</BODY>
…

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 菜单列表menu

菜单列表标记——menu 菜单列表主要用于设计单列的菜单列表。 菜单列表在浏览器中的显示效果和无序列表是相同的,因此它的功能也可以通过无序列表来实现。 菜单列表标记的方法:

		<menu>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
				…
  	     </menu>	

1
2
3
4
5
6
7

# 目录列表dir

目录列表——dir
目录列表用于显示文件内容的目录大纲,通常用于设计一个压缩窄列的列表,用于显示一系列的列表内容。 例如字典中的索引或单词表中的单词等。 目录列表的语法格式:

		<dir>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项2</li>
			…
		</dir>
1
2
3
4
5
6

# 描述列表dl

描述列表指每个列表项有单独的标题。 1、定义列表标记——dl 在HTML中还有一种列表标记,称为定义列表(Definition Lists)。 不同于前两种列表,它主要用于解释名词, 包含两个层次的列表, 第一层次是需要解释的名词, 第二层次是具体的解释。 定义列表的语法

		<dl>
			<dt>名词1<dd>解释1
			<dt>名词2<dd>解释2
			<dt>名词3<dd>解释3
			…
		</dl>
1
2
3
4
5
6

<dl>
	<dt>开源产品</dt>
	<dd>hdcms内容管理系统</dd>
	<dd>hdjs前库组件库</dd>
	
	<dt>网站导航</dt>
	<dd>houdunren.com</dd>
	<dd>houdunwang.com</dd>
</dl>
1
2
3
4
5
6
7
8
9

# 嵌套列表

1、定义列表的嵌套 2、无序列表和有序列表的嵌套 定义列表的嵌套 在定义列表中,一个dt标记下可以有多个dd标记作为名词的解释和说明,以实现定义列表的嵌套。

<dl>
	<dt>赠孟浩然</dt><br/>
    <dd>作者:李白</dd><br/>
    <dd>诗体:五言律诗</dd><br/>
    <dd>吾爱孟夫子, 风流天下闻。<br/> 
		红颜弃轩冕, 白首卧松云。<br/> 
		醉月频中圣, 迷花不事君。<br/> 
		高山安可仰? 徒此挹清芬。<br/>
    </dd>
 	<dt>蜀相</dt><br/>
    <dd>作者:杜甫</dd><br/>
    <dd>诗体:七言律诗</dd><br/>  
    <dd>丞相祠堂何处寻? 锦官城外柏森森,<br/> 
	映阶碧草自春色, 隔叶黄鹂空好音。<br/> 
	三顾频烦天下计, 两朝开济老臣心。<br/> 
	出师未捷身先死, 长使英雄泪满襟。<br/> 
	</dd>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 表格与多媒体

# 表格

表格在网页开发中使用频率非常高,尤其是数据展示时。

# 基本使用

属性 说明
table、tr、td 基本构成
caption 表格标题
thead,th 表头部分
tbody 表格主体部分
tfoot 表格尾部
<table border="1">
        <caption>后盾人表格标题</caption>
        <thead>
            <tr>
                <th>标题</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>后盾人</td>
                <td>2020-2-22</td>
            </tr>
        </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
表格宽度——width
表格高度——height 
对齐方式——align 
表格边框宽度——border 
表格边框颜色——bordercolor 
内框宽度——cellspacing 
表格内文字与边框间距——cellpadding 
设置表格背景颜色——bgcolor 
设置表格的背景图像——background 
1
2
3
4
5
6
7
8
9

# 单元格合并

下面是水平单元格合并

<table border="1">
        <thead>
            <tr>
                <th>标题</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td colspan="2">后盾人 2020-2-22</td>
            </tr>
        </tbody>
    </table>
1
2
3
4
5
6
7
8
9
10
11
12
13

下面是垂直单元格合并

<table border="1">
        <thead>
            <tr>
                <th>标题</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">后盾人</td>
                <td>2030-03-19</td>
            </tr>
            <tr>
                <td>2035-11-08</td>
            </tr>
        </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 视频

Adobe与苹果公司对 FLASH都不支持或消极状态,这时HTML提供对视频格式的支持,除了使用html提供的标签来播放视频外,也有很多免费或付费的插件,如video.js 、阿里云播放器 等等。

属性说明

属性 描述
autoplay 如果出现该属性,则视频在就绪后马上播放(需要指定类型如 type="video/mp4")。
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。如果视频观看度低可以设置为preload="none" 不加载视频数据减少带宽。如果设置为 preload=metadata值将加载视频尺寸或关键针数据,目的也是减少带宽占用。设置为preload="auto" 时表示将自动加载视频数据
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
height 设置视频播放器的高度。
width 设置视频播放器的宽度。
loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
poster 规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
src 要播放的视频的 URL。
<video src="houdunren.mp4" autoplay="autoplay" 
	loop muted controls width="800" height="200">
	
	<source src="houdunren.mp4" type="video/mp4">
    <source src="houdunren.webm" type="video/webm">
  
</video>
1
2
3
4
5
6
7

# 声音

HTML对声音格式文件也提供了很好的支持。 属性说明

属性 描述
autoplay 如果出现该属性,则视频在就绪后马上播放。
preload 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。如果视频观看度低可以设置为 preload="none" 不加载视频数据减少带宽。如果设置为 preload=metadata值将加载视频尺寸或关键针数据,目的也是减少带宽占用。设置为preload="auto" 时表示将自动加载视频数据
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop 如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted 规定视频的音频输出应该被静音。
src 要播放的视频的 URL。
<audio controls autoplay loop preload="auto">
	<source src="houdunren.ogg" type="audio/ogg">
	<source src="houdunren.mp3" type="audio/mp3">
</audio>
1
2
3
4
更新时间: 2020-2-15 13:51:15