表单和BFC

表单：

表单的作用：提交或者收集数据用的  

应用场景：登录注册界面

表单的组成：

①表单域： <form name="" method="get/post" action=""></form>

②表单控件 ： <input type="text" value=""/>

③提示信息

主要结构：<form action=""></form>

1.单选框：

radio

1.选中之后无法取消name属性相同来达到互斥效果，  性别 【代表相同的单选框】

2.属性值不一致可以互不影响

2.复选框：

Checkbox

1.选中之后可以取消

2.Checked 默认选中

3.Disable 禁用选项

上传文件：

<input type=”file” multiple=”multiple”>上传多个文件

下拉菜单

<option></option>

文本：

<textarea>placeholder=”请输入你的评论” cols=“50“ rows=”60“></textarea>

<input type=”hidden”>

获取焦点时边框有颜色变化：

Get和post的区别：

Post比get安全

Get会在后面挂在参数，post不会

服务器接受get和post数据师时用的方法不同

message 提交数据用

表单控件：

邮箱：<input type="email>

数字：<input type="number" min最小值 max最大值 step每次递增数目

颜色：<input type="color">

范围区域：<input type="range">

网址：<input type="url">

搜索：<input type="search"> 可以做到局部清理

选择时间：<input type="time">

选择年月日：<input type="date">

选择年月:<input type="month">

 选择年周：<input type="week">

年月日+时间:<input type="datetime-local">

 时间：<input type="datetime">

novalidate清楚样式

文本 input type=“text” autofocus

<input type=“text” maxlength=“10“

二，新增属性

placeholder提示信息

required验证不能为空

maxlength最大长度

autocomplete与name属性连用，当属性值为on时显示提示信息 (之前输入过的信息）

三

<datalist></datalist>

<output>

BCF

BCF的触发条件：

1.根元素 html默认就是一个BFC

2.float的值不为none 单纯的div不是BFC，如果添加了浮动就是BFC

3.overflow的值不为visible  单纯的div不是BFC，如果添加了overflow：hidden等就是BFC

4.display的值为 inline-block/ table-cell/ table-caption/ flex/ inline-flex

5.position的值为absolute或fixed

脱离标准文档流的时float 和position：absolute和position：fixed

BCF的特性及应用

1.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠（应用：防止marin重叠）

2.BFC的区域不会与float box发生重叠（应用：自适应两栏布局）

3.计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）