什么是表单？
表单用来收集用户信息
什么是表单元素？
在html中，标签/标记/元素都是指html中的标签
表单元素还是html中的标签：只不过这些标签比较特殊，在浏览器中所有的表单的标签都是有特殊的外观和默认的功能
表单的格式：
<form>
<表单元素>
</form>
input标签:
input标签的type属性，这个属性可以有很多类型的取值，取值不同就决定了input标签的功能和外观
<!--单选框
1. 默认情况下不具备互斥功能,要想单选框互斥那么必须给每一个单选框
都设置一个name属性,然后name属性必须设置相同的值
2. 要想让单选框默认选中某一个框,那么可以给input标签添加一个
checked属性，如果单选框有多个都设置checked的话，只按照最后一个为准
-->
<!--多选框
1.多选框可以选择多个
-->
<form action="http:www.520it.com">
账号:<input type="text" name="zhangsna"><br>
密码:<input type="password" name="123456"><br>
账号:<input type="text" value="lnj"><br>
密码:<input type="password" value="123"><br>
<!--单选框
1. 默认情况下不具备互斥功能,要想单选框互斥那么必须给每一个单选框
都设置一个name属性,然后name属性必须设置相同的值
2. 要想让单选框默认选中某一个框,那么可以给input标签添加一个
checked属性
-->
性别:
男<input type="radio" name="gender">
女<input type="radio" name="gender" checked>
保密<input type="radio" name="gender"><br>
<!--多选框
1.多选框可以选择多个
-->
<!--定义普通的按钮,通过values属性可以给按钮设置标题,配合js完成一些操作
图片按钮和普通按钮的作用是一样的
重置按钮:
用于清空,表单中已经填写好的数据
如果想修改重置按钮的按钮标题,可以重写values值就可以
提交按钮:
将表单中已经填写好的数据提价到远程服务器
注意点:
要想把表单中填写好的数据提交到远程服务器,必须具备两个
条件
1.需要给form表单添加一个action属性,通过这个action属性
指定需要提交到服务器的质地
2.需要给需要提交到服务器的表单元素添加一个name属性
隐藏域:
将一些数据悄悄提交到服务器
-->
<input type="button" value="我是按钮" ><br>
<input type="image" src="girl.jpg"><br>
<input type="reset" value="清空"><br>
<input type="submit" value="提交"><br>
<input type="hidden"><br>
</form>
input标签的使用和理解：
<form>
<!--可以自动校验输入的邮箱的格式是否正确-->
邮箱:<input type="email">
<!--可以自动校验输入的内容是否是URL地址-->
域名:<input type="url">
<!--可以自动校验输入的是是否是数字,只能输入数字-->
电话号码:<input type="number">
<!--通过日历来选择时间-->
时间:<input type="date">
颜色:<input type="color">
搜索:<input type="search">
<input type="submit">
</form>
<body>
<!--
1.datalist标签
作用:给输入框绑定带选项
如何绑定带选型呢:
1.搞一个输入框
2.搞一个datalist列表
3.给datalist列表标签添加一个id
4,给输入框添加一个list属性,将datalist的
id对应的值赋给list属性即可。
-->
请输入你的车型:<input type="text" list="cars">
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
</datalist>
</body>
//注意点:select 下拉列表,不是用来绑定给谁的,自己就是一个列表
// 1. 下拉列表不能输入内容,但是可以直接在列表中选择内容
// 2. 可以通过给option 标签添加一个selected属性来指定列表默认的值
// 3. 可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
<select>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>西安</option>
<option selected="selected">南阳</option>
</select>
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="南京">
<option>雨花区</option>
<option>玄武区</option>
<option>江宁区</option>
<!--<option selected="selected">南阳</option>-->
</optgroup>
</select>
/// textarea:标签
//作用:定义一个多行的输入框
//格式:<textarea></textarea>
//默认情况下输入框可以无限换行
//默认情况下输入框有自己的宽度和高度
//可以通过cols和rows来指定输入框的宽度和高度
//但是虽然指定了列数和行数,但是还是可以无限往下输入
//默认情况下输入框可以手动拉伸的
<textarea cols="3" rows="5">
</textarea>
表单练习：
<form action="https:www.baidu.com">
<!--filedset标签可以给表单添加一个边框
legend表单可以给边框指定一个标题-->
<fieldset>
<legend>注册界面</legend>
<p>
账号:<input type="text" name="account">
</p>
<p>
密码:<input type="password" name="pwd">
</p>
<p>
<!--注意点:
单选框和多选框的name都需要指定相同的name值
-->
性别:
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="radio" name="gender" value="security" checked="checked"> 保密
</p>
<p>
爱好:
<input type="checkbox" name="sports" value="basketball"> 篮球
<input type="checkbox" name="sports" value="football"> 足球
<input type="checkbox" name="sports" checked="checked" value="zuyu"> 足浴
</p>
<p>
简介:
<textarea name="des" id="" cols="30" rows="10"></textarea>
</p>
<p>
生日:
<input type="date" name="birthday">
</p>
<p>
邮箱:
<input type="email" name="email">
</p>
<p>
电话:
<input type="number" name="phone">
</p>
<p>
<input type="submit" value="注册">
<input type="reset" value="清空">
</p>
</fieldset>
<!--https://www.baidu.com/?gender=on&sports=on&sports=on
https://www.baidu.com/?gender=male&sports=on&sports=on 没有value值为on
https://www.baidu.com/?gender=male&sports=basketball&sports=zuyu
添加name属性就可以提交值，除了按钮类型的input标签外，其他类型的都可以指定value属性
将来提交到服务器的值
https://www.baidu.com/?
account=2324
&pwd=324
&gender=male
&sports=basketball
&sports=zuyu
&des=eqwrwe
&birthday=2017-06-07
&email=1232%40qq.com
&phone=1324234234
-->
</form>
<body>
<!--
什么是video标签
作用:用于播放视频
格式:<video src= ""> </video>
src:用于高速video标签需要播放的视频地址
autoplay:用于高速video标签是否自动播放视频
controls:是否显示控制条
poster:用于告诉video标签视频没有播放之前显示占位图片
loop:用于高速video标签,视频播放完毕之后是否需要循环
perload:预加载视频,和autoplay相冲
但需要注意:如果设置了autoplay属性,那么preload属性就会失效
muted:静音
width,height:宽高设置,设置其中的一个,保持等比例防止变形
-->
<video src="1.mp4" autoplay="autoplay" controls="controls"
poster="girl.jpg" loop="loop"
></video>
<!--video标签的第二种格式:
<video>
<source sr = "" type = "" > </source>
</video>
由于视频数据非常重要,所以五大浏览器都不愿意比热支持视频格式,所以导致
了没有一种视频格式是所有浏览器都支持的,这个时候w3c为了解决这个问题,
所以推出了第二个video标签的格式
video标签的第二种格式存在的意义,就是为了解决浏览器适配的问题
video元素支持三种视频格式,我们可以把三种格式都通过
source标签指定给video标签,那么以后当浏览器播放视频时它就会从这
三种选择一种自己支持的格式来播放
-->
<video>
<source src="sb1.webm" type="video/webm">
<source src="sb1.mp4" type="video/mp4">
<source src="sb1.ogg" type="video/ogg">
</video>
</body>
<!--
注意点:
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持
的视频格式,但是显然所有浏览器都通过video标签播放还有一个前提条件
就是浏览器必须支持html5标签,否则同样无法播放在过去的一些浏览器是不支 持
html5标签的,所以为了让过去的一些浏览器也能够通过video标签来播放视频
那么我们以后可以通过一个js框架叫做html5media来实现
1.什么是audio标签
作用:播放音频
格式:
<audio src= "">
</audio>
<audio>
<source src= "" type= "">
<audio>
注意点:audio标签的使用和video标签的使用基本一样,video能够使用的
属性在audio标签中大部分都能够使用,并且功能一样,只不过三个属性不能用
height、width、poster
-->
<audio>
<source src="girl.mp3" type="audio/mp3" autoplay="autoplay" controls="controls">
</audio>
网友评论