表单
1、单选框
- 1、name属性,规定一组选项,着一组中只能选择一个,单选input类型是radio
- 2、label标签,是点击文字也可以选中,其中有个for属性,需要在input中设置id,然后在for属性中填写这个id
<div>你的性别</div>
<div>
<input type="radio" name="bbb" id="man" checked>
<label for="man">男</label>
</div>
<div>
<input type="radio" name="bbb" id="woman">
<label for="woman">女</label>
</div>
- 3、checked属性,加上这个属性以后就是默认选中的意思,也就是单选中一组只能加一个,属性值等于checked时,值可以省略。
- 一个选项用一个div包裹。
2、复选框(多选)
- 1、复选框类型是checkbox
- 2、默认选择checked,可以加多个
- 3、label标签一样的
3、上传文件
- 1、上传文件的框input类型是file,可以将文件上传并且暂时保存。
- 2、提交按钮,用图片实现提交,可以用input类型为image的形势实现。
<div>
<div><h2>上传图片按钮-代替提交按钮</h2></div>
<div>
<input type="image" src="提交按钮图片路径">
</div>
</div>
- 3、提交要在form中实现,向后端提交信息。
- 4、隐藏的按钮:input类型为hidden,用的还是比较多的,不是给普通用户看的,而是给后端看的,存储用户信息,属性value存储的就是传递给后端的个人信息。
4、禁用、只读
- 1、禁用:可以对按钮或者input标签设置disabled属性,值为disabled,则按钮禁用
- 2、只读:readonly,可以聚焦,不能修改。
5、下拉菜单
- select标签:嵌套option标签,option是选项,select属性size,作用是规定下拉菜单中能够展示几个选项,放不开的撑开滚动条。
- 下拉菜单多选,加上multiple属性,可以用crtl加上鼠标进行多选
- option属性,value是提供给后端所需要的值。
- 默认选中,selected属性加到option标签上就行了,没有用multiple属性时不能用在多个选项身上。用了multiple属性可以规定多个选项有selected
6、文本域
文本域是一个多行文本输入框
- 1、cols:列,rows:行,一般不用,而且这两个变量只针对英文字符,汉字不适用。可以用css样式对文本框大小进行改变。
- 2、placehoder预置文本,提示文字。
- 3、textarea标签之间不能换行,避免将换行符设置能默认文本。
- 4、控制其不能扩大,在css中添加属性resize:vertical(垂直方向可以改变)(horizontal是水平方向可以改变,垂直不能改变,both是水平垂直都能改变,none都不能改变)。重新设置大小
- 5、和input的区别,input是单行文本输入框,textarea是多行文本的。
7、字段集
- 1、字段集是一个表单标签,用来包裹一个表单或者一个类型的选择,可以规定缺口,缺口内写入表单的内容。
- 2、具体形式
<h1>字段集</h1>
<div>
<fieldset>
<legend>性别</legend>
<input type="radio" name="a">男
<input type="radio" name="a">女
</fieldset>
</div>
- 3、fieldset就是字段集的标签,legend是规定的缺口,后边的汉字是缺口内的文字,再下边是字段集中的内容。
- 4、改变框的颜色,可以叠用css样式,设置边框就行,所有的样式都可以使用。
8、h5新增内容
- 1、 新增语义化标签
- 定义:看到标签就直到它是干啥的!!方便爬虫的辨识,h1,b等标签可以具有强调作用,方便辨识。
- 各个部分的名称
(1)头部header:页面的标题
(2)内容区块section
(3)artical与上下文无关的独立的内容
(4)aside:在artical之外的补充内容
(5)footer:页面中的一个内容区块或整个页面的脚注。
(6)nav:表示页面中导航连接部分。
(7)figure:独立的流内容,适用figcaption元素为其添加标题。
(8)main:主要内容。 - 实质:其实就是变了名字的div
- 注意,在标签中适用calc函数时,运算符号左右必须加空格,不然会出现无效的问题。
- artical是独立的一部分,它其中可以有自己的header和footer
- 2、音频和视频
- flash不用了,开始用h5,在网页中可以放音视频
- 音频标签为audio,几个属性,一个是src路径,一个是controls,值可以省略,是一个音频控制台,loop是循环播放,autoplay是自动播放属性(刷新一下就不行了,跟浏览器有关,有的刷新后也可以),muted属性:静音播放。
- 视频标签video,controls控制台必须有,loop循环,autoplay自动播放(同音频),muted静音播放(静音播放可以支持自动播放)。poster视频封面,可以通过css设置宽高。
- 3、增强表单input
- 主要是input的type属性
- color:生成一个颜色选择器必须在form表单中适用才能向后端提交。加上一个submit按钮就能实现提交了
- email:邮箱输入,在邮箱输入中输入的内容必须包含@符号。必须加上name值。
- url地址:type=url,输入内容必须是个网址,https://www.……
- phone:电话号码,用于手机浏览器,自动选择数字键盘,在电脑端内有意义。
- range:滑块效果,类似音量的选择滑块。name属性得有,min,max属性可以规定最大最小值,value可以设置初始值,step控制每次移动的值
- number:只能输入数字。min,max属性规定最大最小值,step规定步长。name也是必须加的。
- search:搜索框,可以通过点击×号快速清除。
- date:日期选择器,month:精确到月份,week:精确到周次,datetime:精确到时分秒。通过那么传递后端。
- 主要是input的type属性
- 3、选项列表
- 搜索框中输入一个字后的提示信息
<form> <input type="text" list="list"> <datalist id="list"> <option value="手机"></option> <option value="手表"></option> <option value="手环"></option> <option value="手镯"></option> </datalist> </form>
- datalist就是提示列表,其中包含标签option表示选项,需要加一个id和输入框进行绑定,输入框中加list属性,值就是datalist的id值。支持模糊搜素。
- 4、常用属性
- aotufocus:自动聚焦,打开网页自动聚焦到一个输入框。只能有一个焦点
- required:数据不能为空,必填项!!可以用于多个数据上。
- multiple:一次输入多个内容
- pattern:规定输入的内容的形式,[0-9][A-Z]{3}表示必须是一个数字加三个字母的形式!规定格式是通过正则表达式验证实现