## 1、表单组成 ### 1.1、文本（提示信息） ![](./images/2.png) ### 1.2、表单控件 ![](./images/3.png) ### 1.3、表单域 上面提示信息和表单控件等所在的区域 。 ```html
``` > action：处理信息，提交到什么地方 > > method=”get | post” > > - get通过地址栏提供（传输）信息（可以在地址栏里看到你输入的账号和密码），安全性差。 > - post 通过文件例如1.php来处理信息，安全性高。 > > name: 表单名称。 ## 2、文本输入框 ```html ``` > type：输入的是文本内容 > name：输入框的名字 > maxlength：限定输入文本长度 > readonly：文本框只读 > disabled：文本框未激活 > value：输入框中的默认内容 **一般做一个搜索框+搜索按钮的布局如下：** 使用一个div包裹input文本框和按钮，然后input左浮动，提交按钮右浮动。输入框的边框去除，用div的边框代替。 示例：百度搜索框 ```html Document
``` 如下图： ![](./images/6.png) ## 3、密码输入框 ```html ``` > PS：文本输入框的所有属性对密码输入框都有效 ## 4、单选框 ```html 男 ``` > `checked=”checked”` 设置默认选择项。 > > PS：当有多个单选框是如何设置只能有一个被选中？ > 只有将 name 的值设置相同的时候，才能实现单选效果。 20181009 **设置单选框的样式：** 由于单选框的样式是只能设置大小，不能设置颜色，更不能设置样式。所以，一般我们自定义单选框的样式。 **实现原理：** 在单选框的后面加上label标签（需要设置为inline-block或者block），在点击单选框的时候，使用 + 选择器选中label标签，设置label标签的宽高和颜色代替单选框，将单选框display:none； 代码： ```html Document 男 女 保密 ``` ![](./images/1.gif) label实现选项卡： 代码如下： ```html Document
``` 效果： ![](./images/2.gif) ## 5、下拉列表 ```html ``` > `multiple=”multiple”`： 将下拉列表设置为多选 > `selected=”selected”`：设置默认选中项目 > `` 对下拉列表进行分组。 > `Label="分组名称"` 分组名称。 **PS：select可以设置宽高等，但是option不可以设置。** ## 6、多选框 ```html ``` > Checked=”checked” 设置默认选中项 **多选框实现下拉菜单：** 代码如下： ```html Document
``` 效果演示： ![](./images/3.gif) ## 7、文本域 ```html ``` > cols：控制输入字符的长度 > > rows：控制输入字符的行数 > > placeholder: 提示文本 **PS：cols和rows一般不用，直接使用width和height来设置宽高。** **对css 设置resize:none; 不可改变大小。** ## 8、文本上传控件 ```html ``` 20181009 修改文本上传控件的样式： 实现原理： **由于上传控件的大小和颜色等是无法直接修改的，若想要修改的话，可以另外添加一个div，将div的大小设置和file控件的大小一致，将div定位，之后file文件也进行定位，覆盖到div之上（可以设置z-index），然后设置file控件的opacity为0即可。** 示例： ```html Document
点击上传
``` ![](./images/5.png) ## 9、文件提交按钮 ```html ``` > 可以实现信息提交功能 ## 10、普通按钮 ```html ``` > 不能提交信息，配合JS使用 ## 11、图片按钮 ```html ``` > 图片按钮可实现信息提交功能 ## 12、重置按钮 ```html ``` > 将信息重置到默认状态 ## 13、表单信息分组 ```html
分组1
``` > `
`：对表单信息分组 > > ``：表单信息分组名称 ## 14、html5补充表单控件 ```html 网址控件 日期控件 时间控件 邮件控件 数字控件 滑块控件 ``` **补充示例：** ```html
分组信息 账户:
密码:

男 女

省(市) 

A B C





   





``` ![](./images/4.png) ## 15、表单的状态 focus：表单独有，div等没有 checked：单选框，多选框独有。 disabled：表单独有，div等没有。 ## 16、表单一些bug **1、表单的默认样式清除：** ```css input { border: 1px solid #ccc; outline-style: none; padding: 0; } ``` **2、设置相同高度时，输入框和按钮的高度不相同：** input文本框和按钮显示模式不同： 文本框是标准盒模型（box-sizing: content-box; ）， 而按钮是怪异盒子（box-sizing: border-box;）。 也就是设置相同的宽高时，文本框的实际宽高要更大，而按钮的实际宽高更小。 **3、input文本框在IE8及以下浏览器默认不是垂直居中显示的，IE8以上和chrome是默认居中显示的。** **4、表单元素不会继承任何属性，字体大小，颜色，宽高等。** **5、border:0 与 border: none;** border:0; 只是border-width:0; 而 border:none; 是 border-color,border-style,border-width 都为 none，效率更低。 **6、一行文字在宽度显示不够的时候，显示三个点的省略符号：** ```css width: xxxpx; /*设置显示宽度*/ white-space: nowrap; /*文本一行显示*/ overflow: hidden; /*超出宽度范围不显示*/ text-overflow: ellipsis; /*超出宽度部分用三个点代替*/ ``` **7、表单才有focus，div没有focus。** **8、单选框和多选框才有选中状态：checked，在设置css的时候，可以使用 input:checked 来设置已经被选中的input标签，进行样式设置。** **9、表单还有 disabled状态** 。input:disabled {/*设置样式*/}