表单(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文本框可以聚焦。