目录
form表单
form表单相关属性
action:指定点击表单提交按钮时,该表单被提交到那个地址。该属性即可指一个绝度路径也可以指定一个相对路径。ps:该属性必填。
method:指定提交表单时发送何种类型请求,属性值可为get或post,分别用于发送get或post请求。通常建议发送post请求。该属性必填。(默认值为get)
enctype:指定对表单内容进行编码所使用的字符集。默认字符编码格式为:application/x-www-form-urlencoded(如:localhost?name=zx&age=20用的最多)、还有其他字符编码格式multipart/form-data(一般用于提交图片、视频到后端)
name:指定表单的唯一名称,建议该属性值与id属性保持一致。
target:指定使用那种方式打开目标URL(提交请求会打开另一个URL资源),与超链接的target可接受的属性值一样,属性值:_blank、_parent(在标签的父窗口打开)、_self(在本标签窗口打开)和_top(在标签的顶层窗口打开)四值之一。
请求参数
举例:请求地址是javazx.jsp?username=zx&age=20&sex=1
目的:与后台交互并传递数据
(以?为分隔,?前面的是具体的后代请求地址;?后面的是具体的请求所需要传送的数据对。
请求参数是有请求参数对以&连接的,每一对内部由=连接的。
)
生成请求参数的规则
每个有name属性的表单控件对应一个请求参数,没有name属性的表单控件不会生成请求参数。
如果多个表单控件有相同的name属性,则多个表单控件只生成一个请求参数,只是该参数有多个值。
表单控件的name属性指定请求参数名,value属性指定请求参数值。
如果某个表单控件设置了disabled="disabled"属性,则该表单控件不再生成请求参数。
请求方式区别
get请求:请求的数据少(但是是相对的),能在浏览器地址栏看到的请求参数,一般用于查操作
post请求:请求数据多,不能在浏览器地址栏看到请求参数,一般用于增、删、改操作
HTML5保留的表单控件及属性
input表单控件
type属性值决定input元素呈现的样子,默认值为text。
type="text",生成单行文本框;
type="password",生成密码框,与文本框的区别是,输入的内容是不可见;
type="radio",生成单选框,如要生成一组单选框,还需要指定name属性值一致;
type="checkbox",生成复选框,如要生成一组复选框,还需要指定name属性值一致;
type="file",生成文件上传域,可上传文件;
type="image",生成图像域,主要作用跟提交按钮一样,就是提交的功能;
type="submit",生成提交按钮,让表单提交的功能,按钮的文字默认是提交,可以通过value属性来修改;
type="reset",生成重置按钮,让表单里所有的表单控件内容重置,不是清空,按钮的文字默认是重置,可以通过value属性来修改;
type="button",生成普通按钮,没有任何能力,按钮的文字没有默认值,需要通过value属性来设置;
<form action="">
姓名:<input type="text" name="name" readonly value="dd"><br> age:
<input type="text" name="age" value="18"><br>
<input type="password" name="password" id=""><br>爱好:足球:
<input type="checkbox" name="hobby" id="" value="1" checked>羽毛球:
<input type="checkbox" name="hobby" id="" value="2">篮球:
<input type="checkbox" name="hobby" id="" value="3"><br>性别:男
<input type="radio" name="sex" id="" value="1" checked>女
<input type="radio" name="sex" id="" value="0"><br>喜欢谁:迪丽热巴
<input type="radio" name="sex1" id="" value="1">古力娜扎
<input type="radio" name="sex1" id="" value="0"><br>
<input type="file" name="" id="">
<input type="image" src="../demo/images/1.2.webp" alt="" width="200px">
<input type="submit" value="提交">
</form>
button按钮
disabled:指是否禁用此按钮。该属性值只能为disabled,或省略属性值。
name:指定按钮的唯一名称。该属性值应该与id属性值保持一致。
type:指定按钮属于那种按钮,该属性值只能是button、reset或submit其中之一。
ps:button与input生成按钮的区别:button是有开始,结束标签的,所以按钮的文字需要写到开始和结束标签之间;input是空标签,按钮的文字,是通过value属性来设置的。
button不设置type属性时,type属性的值默认是submit,天生具有表单提交的能力。
下拉框与列表框select
1.下拉框与列表框如何形成请求参数
<select></select>元素用于创建列表框或下拉菜单,该元素必须和<option></option>元素结合使用,每个<option></option>元素代表一个列表或菜单项。
<select></select>元素本身并不指定value属性,列表框或下拉菜单控件对应的参数值由<option></option>元素生成。
2.列表框相关属性
multiple:设置该列表框和下拉菜单是否允许多选。该属性是支持boolean值的属性,即表示允许多选。一旦设置允许多选,<select></select>元素就会自动生成列表框。
size:指定该列表框内可同时显示多少个列表项。一旦指定该属性,<select></select>元素就会自动生成列表框。
3.option与optgroup元素及相关属性
<option></option>:用于定义列表框选项或菜单项。该元素里只能包含文本内容作为该选项的文本。
<optgroup></optgroup>:用于定义列表项或菜单项组。该元素里只能包含<option></option>子元素,处于<optgroup></optgroup>里的<option></option>就属于该组。
<option></option>元素可以指定id、style、class等核心属性,还可以指定onclick等
disabled:指定禁用该选项,属性值只能为disabled。
selected:指定该列表项初始状态是否为被选中状态。该属性值只能为selected。
value:指定该选项对应请求参数值。
<optgroup></optgroup>元素可以指定id、style、class等核心属性,还可以指定onclick等
label:指定该选项组的标签。必填。
disabled:设置禁用该选项组里的所有选项,属性值只能为disabled或省略。
<form action=" ">
<select name=" " id=" " size="3" multiple="boolean"
onchange="window.open(this.options[this.selectedIndex].value) ">
<!-- size="3"显示三个列表项 selected在谁身上一进页面默认选中 -->
<option>百度1</option>
<option>河大1</option>
<option>百度2</option>
<option>河大2</option>
<optgroup label="1.2 ">
<option>百度3</option>
<option selected>河大3</option>
<option>百度4</option>
</optgroup>
</select>
</form>
文本域textarea
<textarea></textarea>元素用于生成多行文本域,可以指定id、style、class、等核心属性,还可以指定onclick等事件属性。由于<textarea></textarea>的特殊,它可以接收用户输入,用户可以选中文本域内的文本,所以还可以指定onselect、onchange两个属性,分别用于响应文本域内文本被选中、文本被修改事件。
cols:指定文本域宽度,该属性必填。
rows:指定文本域高度,该属性必填。
ps:textarea控件如果要设置默认值,需要在textarea开始和结束标签之间设置,不能通过value属性;但是,如果需要使用JavaScript获取textarea的内容时,需要使用value属性。
fieldset与legend
给表单控件样式上的分组。
<form action="">
<fieldset name="">
<legend>基本信息</legend>
姓名:<input type="text" name="name" readonly value="dd"><br> age:
<input type="text" name="age" value="18"><br>
<input type="password" name="password" id="">
</fieldset>
<fieldset>
<legend>爱好</legend>足球:
<input type="checkbox" name="hobby" id="" value="1" checked>羽毛球:
<input type="checkbox" name="hobby" id="" value="2">篮球:
<input type="checkbox" name="hobby" id="" value="3">
</fieldset>
<fieldset>
<legend>性别</legend>男
<input type="radio" name="sex" id="" value="1" checked>女
<input type="radio" name="sex" id="" value="0">
</fieldset>
<fieldset>
<legend>附加</legend>喜欢谁:迪丽热巴
<input type="radio" name="sex1" id="" value="1">古力娜扎
<input type="radio" name="sex1" id="" value="0"><br>
<input type="file" name="" id="">
<input type="image" src="../demo/images/1.2.webp" alt="" width="200px">
</fieldset>
<input type="submit" value="提交">
</form>
HTML5新增的常用表单属性
autofocus属性
非常常用的属性。当为某个表单控件增加该属性后,浏览器打开该页面时该组件就会自动获得焦点。
由于打开页面时只能有一个控件获得焦点,因此整个页面上最多只能有一个表单控件可设置该属性。
placeholder属性
也非常实用。在一些用户界面足够人性化的页面里,当用户还未在单行文本框、多行文本域输入内容时,单行文本框、多行文本域内显示对用户的提示信息。一旦用户开始输入单行文本框、多行文本域的提示信息就会消失。
<form action="" method="post">
<input type="text" name="name" placeholder="请输入用户名"><br>
<input type="password" name="name" placeholder="请输入密码"><br>
<input type="submit" value="注册" formaction="regist">
<input type="submit" value="修改" formaction="login">
</form>
list属性
该属性非常实用。在HTML 5规范以前,HTML表单控件没有类似于ComboBox的组件(相当于文本框与下拉菜单结合的组件,该组件既允许用户输入,也允许用户通过下拉菜单进行选择)。HTML 5的 list属性弥补了这个不足,list 属性的值应该是一个<datalist.../>组件的id。也就是说,list属性必须与<datalist.../>元素结合使用。
<datalist.../>元素相当于一个“看不见”的<select.../>元素,用于生成一个隐藏的下拉菜单。<datalist.../>所能包含的子元素与<select.../>元素完全相同。该元素用于与指定了list属性的<input..>元素结合使用。当双击指定了 list属性的文本框时,该文本框将会显示<datalist.../>生成的下拉菜单。
下面页面代码示范了list属性与<datalist.../>元素的用法。
list的值与datalist的id对应。
<input type="text" list="zx"><input type="submit" value="提交">
<datalist id="zx">
<option value="史诗"></option>
<option value="神话"></option>
<option value="传说"></option>
</datalist>
autocomplete属性
该属性用于设置表单是否支持自动完成功能,如果启用自动完成功能,浏览器将会根据用户上次提交的数据生成列表框供用户选择,或提示自动完成。
该属性支持如下两个属性值。
on:打开autocomplete,文本框下方会显示下拉菜单。
off:关闭autocomplete,文本框下方不会显示下拉菜单。
HTML5新增的常用表单元素
新增的input控件
<form action="">
type="color"的文本框:<input type="color" name="color"> <br>type="date"的文本框:
<input type="date" name="date"> <br>type="time"的文本框:
<input type="time" name="time"><br> type="datetime-local"的文本框:
<input type="datetime-local" name="datetime-local"><br> type="month"的文本框:
<input type="month" name="month"><br> type="week"的文本框:
<input type="week" name="week"> <br>type="email"的文本框:
<input type="email" name="email" multiple> <br>type="tel"的文本框:
<input type="tel" name="tel"><br> type="url"的文本框:
<input type="url" name="url"><br> type="number"的文本框:
<input type="number" name="number" min="0" max="100" step="5"><br> type="range"的文本框:
<input type="range" name="range" min="0" max="100" step="5"><br> type="search"的文本框:
<input type="search" name="search"><br>
<input type="submit" value="提交">
</form>
meter控件
value:指定计数仪表的当前值。默认为0,可以为该属性指定一个浮点小数值。
min:指定计数仪表的最小值。默认为0,可以为该属性指定一个浮点小数值。
max:指定计数仪表的最大值。默认为1,可以为该属性指定一个浮点小数值。
low:指定计数仪表指定范围的最小值。该属性值必须大于等于min属性指定的值。
high:指定计数仪表指定范围的最大值。该属性值必须小于等于max属性指定的值。
<form action="">
<meter value="120" min="10" max="200" low="30" high="160">120</meter>千米/小时
<!-- 注意:meter是开始和结束标签,不是空标签。 -->
</form>
progress控件
<progress></progress>元素用于表示一个进度条。使用该元素时除了可指定id,style,class,hidden等通用属性之外,还可指定如下属性。
max:指定进度条完成时的值。
value:指定进度条当前完成的进度值。
<form action="">
<progress max="100" value="30"></progress>
<!-- 注意:progress是开始和结束标签,不是空标签。 -->
</form>
html5表单验证(提高前端验证)
基本表单验证(属性验证)
required:该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属性值
pattern:该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式。
min、max、step:3个属性只对数值类型、日期类型的input元素有效,这3个属性控制该表单控件的值必须在min~max之间,并符合step步长。
<form action="#">
<input type="text" required name="xx"><br>
<input type="text" required name="book" pattern="\d{3}-\d-\d{3}-\d{5}"><br>
<input type="number" name="box" min="0" max="100" step="5" required><br>
<input type="submit">
</form>
媒体相关html元素知识
audio音频
<audio src="1.mp3" controls autoplay></audio>
src:指定播放音频、视频的URL地址。
autoplay:该属性是支持boolean值的属性。如果将该属性设为truc,当音频、视频装载完成后会自动播放。
controls:该属性是支持boolean值的属性。如果将该属性设为truc,当音频、视频装载完成后会自动播放。
loop:该属性是支持 boolean值的属性。如果将该属性设为 true,音频、视频播放完成后会再次重复播放。
preload:该属性指定是否预加载音频、视频,该属性支持如下几个属性值:
auto,预加载音频、视频。
metadata,只预加载音频、视频的元数据,如媒体字节数、第一帧、播放列表、持续时间等none,不执行预加载。
如果指定了autoplay属性,preload 属性将会被忽略。
poster:该属性只对video元素有效,该属性指定一张图片的URL地址。在视频下载完成、开始播放之前,该元素将会显示该属性所指定的图片。当视频不可用时也将显示这张图片。
width:该属性只对video元素有效,指定视频播放器的宽度。
height:该属性只对video元素有效,指定视频播放器的高度。
相关方法:
play():播放音频、视频。
pause():暂停播放。
load():重新装载音频、视频文件。
部分监听事件:
onpause:暂停播放音频、视频时触发该事件
onplay:即将开始播放音频、视频时触发该事件
video视频
<video src="1.mp4" controls height="500px" width="500px" autoplay></video>
src:指定播放音频、视频的URL地址。
autoplay:该属性是支持boolean值的属性。如果将该属性设为truc,当音频、视频装载完成后会自动播放。
controls:该属性是支持boolean值的属性。如果将该属性设为truc,当音频、视频装载完成后会自动播放。
loop:该属性是支持 boolean值的属性。如果将该属性设为 true,音频、视频播放完成后会再次重复播放。
preload:该属性指定是否预加载音频、视频,该属性支持如下几个属性值:
auto,预加载音频、视频。
metadata,只预加载音频、视频的元数据,如媒体字节数、第一帧、播放列表、持续时间等none,不执行预加载。
如果指定了autoplay属性,preload 属性将会被忽略。
poster:该属性只对video元素有效,该属性指定一张图片的URL地址。在视频下载完成、开始播放之前,该元素将会显示该属性所指定的图片。当视频不可用时也将显示这张图片。
width:该属性只对video元素有效,指定视频播放器的宽度。
height:该属性只对video元素有效,指定视频播放器的高度。
相关方法:
play():播放音频、视频。
pause():暂停播放。
load():重新装载音频、视频文件。
相关元素(track[字幕]):
track元素可加载WebVTT文件内容,用于为视频添加字幕,章节标题或元数据等附加信息。WebVTT文件包含了一系列带时间标记的文本内容,这些时间标记控制文本内容的出现位置。
track元素是一个空元素,通常应该放在video元素内,如果使用了source元素,则track元素放在source元素之后。