form表单
作用:收集用户信息
基本结构
<form method="get或post" action="向何出发送数据表单">
<!-- get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。 -->
type属性: <input type="text">文本框
<input type="password">密码框
<input type="button" value="按钮"> 按钮,需要value给初始值
<input type="submit">提交按钮,可提交至指定路径;有初始值“提交”,也可以用value给定初始值
<input type="reset">清空按钮
<input type="image" src="图片路径"> 只有image text可设置宽高
name属性: 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
value属性: 按钮的名称显示
</form>
相关的属性(新增)
<input type="file"/>上传文件框 multiple="multiple" multiple属性可实现多选
<input type="hidden"/>隐藏字段对于用户来说通常是不可见的,通常会存储一个默认值,通过js来修改
<input type="radio" name=”sex”/> :type="radio"单选按钮 单选按钮里的name属性必须写,同一组单选按钮的name属性值必须一样。
<input type="checkbox" name="like" disabled="disabled" checked="checked"/> checkbox:多选按钮 name可加可不加 checked(选中) disabled="disabled"禁用
<input type="email" multiple="multiple"/>邮件
<input type="url"/>用户输入/编辑URL
<input type="number" min="10" max="20" step="3"/>数字
<input type="range" min="10" max="20" step="3"/>返回滑动控件
<input type="date"/>日
<input type="month"/>月
<input type="week"/>周
<input type="time"/>时间
<input type="datetime-local"/>本地时间
<input type="datetime">utc时间
<input type="text" required="required"/>验证输入不能为空
<input type="password" placeholder="请输入您的密码"/>文本框内的提示信息
<input type="email" autofocus="autofocus"/>打开页面时,该控件自动获得国标聚焦,一个页面只能有一个
<input type="text" maxlength="11"/>文本框最大长度
新增标签
<fieldset></fieldset> :fieldset表单字段集,相当于一个方框
fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象
<legend></legend> :字段级标题
<label for="box"></label> :label 提示信息标签,点击昵称时,文本框内闪烁竖标
例:<label for="id1">昵称:</label><input type="text" id="id1"
下拉菜单:
<select>
<option>北京</option>
<option>上海</option>
</select>
<textarea cols="40" rows="5">文本域</textarea> cols:字符宽度 rows:行数
datalist:提供一个事先定义好的列表,通过id与input关联,
当在input内输入时就会有自动完成(autocomplete)的功能,用户将会看见一个下拉列表供其选择。
<input type="text" list="word" autocomplete="off/on/ " name="浏览器"/>
<datalist id="word">
<option>深圳</option>
<option>北京</option>
<option>上海</option>
</datalist>
输出标签:<output name="x" for="a b"></output>
<form action="" οninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input id="a" type="range" min="0" max="100">100+
<input id="b" type="text" value="50">=
<output name="x" for="a b"></output>
</form>
BFC的知识
可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
1、BFC触发条件:
-
-
- 根元素 html默认就是一个BFC
- float的值不为none 单纯的div不是BFC,如果添加了浮动就是BFC
- overflow的值不为visible 单纯的div不是BFC,若添加了overflow:hidden等就是BFC
- display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex
- position的值为absolute或fixed
-
2、BFC的应用
-
-
-
- Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的 margin会发生重叠(应用:防止margin重叠)
- BFC的区域不会与float box发生重叠(应用:自适应两栏布局 overflow:hidden;)
- 计算BFC的高度时,浮动元素也参与计算(应用:清除内部浮动)
-
-
3、BFC的特性
BFC内部的Box会在垂直方向,一个接一个的放置。
每个元素的margin box的左边会与包含块border box的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此。
BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素