表单控件、兼容性问题、常见问题（所有浏览器）09

day09

表单结构

作用：收集用户信息

表单：

​ 作用： 用来收集用户信息；也叫 表单框（表单域form）

<form method=""></form>

​ action: 传给后端的地址

​ method: 传给后端的方法

​ GET： 从后端获取数据，数据量比较小，安全性比较低，速度较快

​ POST： 向后端发送数据，数据量大，安全性高，速度较慢

​ name: 表单的标识

表单控件:

​ 在表单里面，绝大部分的表单控件都是input标签，通过type属性的不同来区分的，表单控件要写在form标签的里面, 不是独占一行的

​ 文本框

<input type="text">

name:控件字段名字

value:用户输入的值

​

​ 密码框

 <input type="password">

​ name:控件字段名字

value:用户输入的值

​ 提交按钮

<input type="submit">

​ value: 按钮里面的文字

​ 没有value属性，默认是‘提交’两个字

​ 一旦点击submit，就会将表单里面的内容通过method的方法提交给action的地址

​ 重置按钮

<input type="reset">

​ value: 按钮里面的文字

​ 只能清空当前form表单里面的内容

​ 单选框

<input type="radio">

​ name： 给单选框分组的（相同name的单选框是一组的）

​ checked: 默认选中

​ disabled: 禁用状态

​ value: 发送给后端的值

​ 多选框（复选框）

<input type="checkbox">

​ name: 给多选框分组（相同name的多选框是一组的）

​ checked: 默认选中

​ disabled: 禁用状态

​ value: 发送给后端的值

​ 下拉菜单

<select>    <option value="">131</option>    <option value="">132</option></select>

​ value: 发送给后端的值

​ selected: 默认选中

多行文本框（文本域）

<textarea rows="" cols=""></textarea>

​ rows: 一共能显示多少行

​ cols: 一行能显示多少字（英文字母）

普通按钮

<button></button><input type="button">

get与post

​ \1. get是从服务器上获取数据，post是向服务器传送数据。

​ \2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML，HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

​ \3. 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

​ \4. get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。

​ \5. get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

建议：

1、get方式的安全性较Post方式要差些，包含机密信息的话，建议用Post数据提交方式；

2、在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式；

兼容性问题

1、ie8下图片边框问题（记）

<a>
   <img src="">
</a>

解决办法：reset.css
img {
    //取消默认添加的边框
    border:none;
}

2. ie7下子元素相对定位 父盒子overflow属性失效问题

3. ie6下小高度盒子问题

原因：ie6下有默认行高

4. ie6浮动双边距问题

5. ie8下透明度问题（记）

背景透明, 内容不透明

background-color:rgba(0,0,0,.3)

背景和内容一起透明

opacity:0-1; 0是完全透明 （消失）  1是不透明  

ie8下透明度显示效果:

常见问题（所有浏览器）（记）

图片下间隙问题

盒子>img 图片和盒子多的底边有一个默认的间距

 图片下间隙：
        原因：图片具有文本的特性---》 以基线对齐---》 间距就是基底之间距离
        解决办法：
          1. 给父盒子加字体属性
          2. 图片设置除了基线以外的对齐属性
          3. 给图片转块元素 

文本框和按钮对不齐

css hack（了解）

结构hack(条件hack)(ie10废除了)（记）

在ie的低版本里 查询一些盒子或者是样式要不要显示的条件

  // 在什么地方需要显示 ie8- 条件是： 只要浏览器版本是ie8及其以下就显示这个p 
    
  //   lte: less than or equal 小于或者等于


    <!--[if lte IE 8 ]>
    <p>
        您的浏览器版本太低，可能存在要换的危机 <a href="">UC</a>
    </p>
    <![endif]-->

css属性hack

.box {
            color: red;
            
             /* ie7及其以下的标识是* */
             *color:orange;
            /* ie6及其以下是蓝色 */
            _color:blue;
             /* ie8-ie9识别\0 */
             color:deeppink\0;

           
           
        }

选择符集hack

   /* ie6下识别的类 */
       *html .a {
            background-color: deeppink;
            border-radius: 50%;

        }
        /* ie7下识别的类 */
       * + html .a {
            background-color: springgreen;
            border-radius: 50%;
       }