表单的基础以及表单新增的属性和标签+BFC 相关知识

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的应用

• • • 1. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的 margin会发生重叠（应用：防止margin重叠）
      2. BFC的区域不会与float box发生重叠（应用：自适应两栏布局 overflow:hidden;）
      3. 计算BFC的高度时，浮动元素也参与计算（应用：清除内部浮动）

3、BFC的特性

BFC内部的Box会在垂直方向，一个接一个的放置。

每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。

BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素