【CSS表单form】

CSS表单form

表单（form）的作用

主要负责数据的采集，作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置，常常用于用户注册、登录、投票等的制作。

form的属性

action：表单提交的地址

method：表单数据提交的方法/形式

get：明文发送（可见）

post：暗文发送（不可见）

第一种写法：

<label for="name">姓名：</label>

<input type="text" id="name">

第二种写法：

<label for="phone">电话：

         <input type="text" id="phone">

</label>

id属性：用来对元素进行标识的且id必须唯一；

for属性：指定与label关联的标签元素的id。

表单的元素

<form>表单是一个包含表单元素的区域；

<fieldest>元素可将表单内的相关元素分组；（不常用）

<lefend>标签为 fieldset 元素定义标题；（不常用）

<label>定义控制的标签，为input定义标注；

<input>定义输入域；

<select>可以创建单选或者多选菜单；

<option>元素定义下拉列表中的一个选项；

<textarea>标签定义多行的文本输入；

<button>标签定义一个按钮。

input类型

文本域<text>： 定义用户可输入文本的单行输入框；

密码框<password>：定义密码字段，密码中的字符会被掩码；

单选钮<radio>：定义单选按钮；

复选钮<checked>：定义复选框；

隐藏域<hidden>：定义隐藏字段；

文件上传<file>：定义文件上传按钮；

按钮<button>：定义重置按钮、提交按钮、一般按钮。

button与input的辨析

<button>提供了更为强大的功能和更丰富的内容；

button元素内部可以放置内容，比如文本或图像；

在HTML表单中使用input元素来创建按钮。

button按钮的类型

submit是提交按钮（除了IE以外浏览器的默认值）；

button是可点击的按钮（IE浏览器的默认值）；

reset是重置按钮（用于清除表单数据）。

表单嵌套规则

form元素不能够直接包含input元素。

原因在于input元素属于行内元素，form元素仅仅能够包含块状元素。

表单的基本属性

name属性：表单提交的数据都是标签的name属性；

id属性：用来对元素进行标识的且id必须唯一；

for属性：指定与label关联的标签元素的id，如下：

<label for="MyName">我的名字</label>

<input id="MyName" type="text">

表单兼容

input 文本框、密码框的兼容处理（去除聚焦线）

.类名 input {

        outline: none;

}

去除谷歌浏览器input默认背景颜色

input:-webkit-autofill {

        -webkit-box-shadow: 0 0 0px 1000px white inset !important;

}

textarea的尺寸控制

.类名 textarea {

        resize: both;  //默认值，横纵向拉伸

        resize: none;  //取消拉伸

        resize: vertical； //只能够纵向拉伸

        resize: horizontal；  //只能够横向拉伸

}

表单的特有属性

禁用属性：readonly(只读)、disabled(禁止)；

checked：在页面加载时被预先选定的 input 元素，该属性与单选框、复选框结合使用；

selected：是<option>标签的一个属性，该属性规定在页面加载时预先选定该选项。

disabled（禁止）与readonly（只读）两者区别：

1、使用范围不同：

disabled适用于所有的表单元素；

readonly只适用于输入文本的输入项（输入框、密码框、多行文本、文件输入框file）

2、文本框聚焦状态：

disabled不能使文本框获取聚焦；

readonly文本框可以聚焦。