二、表单元素

表单在网页中就是将本地数据提交给远程的服务器

使用form标签来创建一个表单：

1、form元素

为用户创建html表单
表单可以向服务器发送数据
form标签中可以包含很多表单元素

2、表单的提交

●表单提交需要在表单中书写提交按钮。
●提交按钮可以是或
●提交按钮只会提交当前按钮所在的form表单中的内容如果没有form标签，表单提交失效\

3、html表单的类型

input：type类型的值不一样，呈现的状态也是不一样的

●text：单行文本输入框没有长度和内容限制，只能输入一行，明文显示

●password：密码输入框默认把输入的内容呈现出小黑点

●radio：单选框书写name属性后，相同name的可视为一组，即可实现单选功能，应该书value 值，是向后台提供的数据。

●checkbox：多选框

●button: 单纯的按钮，没有任何作用和功能，只是长了按钮的样子。

●reset: 重置按钮当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态

●submit：提交按钮 input标签的type类型是submit代表提交， value是按钮显示的内容。提交按钮只会提交当前按钮所在的form表单中的内容如果没有form标签，表单提交失效。
\

<body>
    <form action="./5.html">
    <!-- 普通文本输入框 不会换行  一行展示 -->
    <input type="text" >
    <!-- password 密码框 -->
    <input type="possword">
    <!--单选  -->
    <input type="radio">
    <!-- 多选 -->
    <input type="checkbox">
    <!-- 重置 -->
    <input type="reset">
    <!-- submit提交  value控制按钮的内容-->
    <input type="submit" value="注册">
    <!-- 只是长了按钮的样子， -->
    <input type="button" value="提交">
    <button>按钮</button>
</form>
</body>

<form action="1.html">
        请输入用户名：
        <!-- 数据要提交到服务器，必须要为input指定一个name值 -->
        <input type="text" name="user" value="chengxiaohui">
        <br>

        请输入密码：
        <input type="password" name="pass">
        <br>

        请选择性别：
        <!-- 像选择框都要指定一个value属性，value属性最终会成为用户填写的值 -->
        男：<input type="radio" name="sex" value="男">
        女：<input type="radio" name="sex" value="女">
        未知：<input type="radio" name="sex" value="未知">
        <br>

        选择你最喜欢的语言：
        PHP：<input type="checkbox" name="lang" value="PHP">
        JAVA：<input type="checkbox" name="lang" value="JAVA">
        JS：<input type="checkbox" name="lang" value="JS">
        HTML：<input type="checkbox" name="lang" value="HTML">
        <br>

        请上传你的照片：
        <input type="file" name="photo">
        <br>

        <input type="hidden" name="id" value="00000000001">

        <input type="button" value="点我啊" id="btn">

        <br>

        <input type="reset" value="重置">


        <input type="submit" value="提交">
    </form>

4、input属性

    -   属性：placeholder 提示文字
    -   属性：autofocus 自动获取焦点
    -   属性：required 校验（非空）
    -   属性：checked （input的默认选中）
    -   属性：autocomplete：on/off 开启/关闭自动补全（如果要关闭所有的则写在form上即可）
    -   属性：readonly 只读 提交数据
    -   属性：disabled 禁用 不提交数据

5、其他表单元素

select>&<option

默认选中和input不一样，不是checked,而是selected

- 下拉列表
- option代表列表的每一项显示出来的值,select最终提交的内容是通过option的value属性

textarea

- 多行文本输入框
- 右下角可以放大缩小

button>

- HTML 元素表示一个可点击的按钮
- type：button的类型。

- - 可选值：

- - - submit: 此按钮将表单数据提交给服务器。
    - reset: 此按钮重置所有组件为初始值。
    - button: 此按钮没有默认行为。

控制input 或者textarea 点击时候出现一个蓝色的线，以及textarea 默认改变尺寸

   <style>
input,textarea{
//  去除蓝色线
        outline: none;
// 禁止改变textarea的 尺寸
        resize: none;
}
</style>

6、文字关联功能

用label 标签把文字包括起来，让里面的for属性值和表单上面id名字值一致即可。

   
<label for="man">男</label> <input id="man" name="sex" type="radio">
<label for="woman">女</label> <input id="woman" type="radio"  name="sex">

三、盒子模型

1、盒子模型的概念：

在html中，把每一个元素都当做成一个盒子
盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成

- 内容区域：你书写的内容
- 内边距：撑开内容与边框的距离
- 边框：元素的边框
- 外边距：撑开元素和其他元素之间的距离

2、盒子模型-内容区域（在标准盒子模型下）：

width
height

标准盒子模型下设置的width和height都是content（内容）区域的宽高

3、margin基础

设置一个元素外边距的宽度。外边距可以理解为当前元素与父级或其他兄弟级元素的距离。
值可以是一个单位，也可以是一个百分比
分4个方向
- margin-left、margin-right、margin-top、margin-bottom
- 每个方向的值都可以单独的设置
margin的简写：
- margin后跟4个值：分别代表上右下左
- margin后跟3个值：分别代表上左右下
- margin后跟2个值：分别代表上下左右
- margin后跟1个值：分别代表上下左右

4.margin 0 auto居中:

在水平方向上margin设置auto的时候，默认左右平分剩余空间，达到水平居中效果
当水平方向出现auto的时候，剩余空间会进行分配，当某一边不要另外一边出现auto，剩余空间就会直接给另外一边

5、margin的穿透问题：

场景：有一个大盒子里面包含小盒子，如果大盒子没有设置padding-top 或者是border-top，

直接给小盒子设置margin-top，大盒子会跟着小盒子一起向下移动，这个现象就是margin值穿透问题。

解决的办法

给大盒子加border-top:1px solid transparent ;
给大盒子增加overflow:hidden;
既然margin-top有这样的问题，我们可以给大盒子增加padding-top，来规避这个问题。

6、margin值合并的问题

场景：有两个兄弟元素：box1，box2垂直排列，我给box1设置margin-bottom:30px; 再给box2设置margin-top:100px; 这两个元素之间的距离并不是两者之和，而是取最大的那个值

7、padding：

什么是padding

- padding的写法和margin基本一摸一样
- padding主要撑开内容之间的距离

padding 不去设置auto 不支持

8、标准盒模型和怪异盒模型(IE盒模型)

默认情况基本都是标准盒模型

标准盒模型：

- 元素占用的空间大小为：内容区域（content）+内边距（padding）+边框（border）+外边距（margin）
- 例如：一个元素 margin：20px 30px;

怪异盒模型：

- ie6 或者是设置了box-sizing
- 元素所占用的空间大小为：内容（content+padding+border）+外边距（margin）
- 怪异盒模型设置的width是 content+padding+border整体的宽度
- 例如：一个元素 margin：20px 30px
将一个元素设置盒模型显示
- box-sizing属性：
- content-box:标准盒模型
- border-box:怪异盒模型

第六天