常用元素
- form 表单 一般情况下,其他表单相关元素都是他的后代元素
- input 单行文本输入框,单选框,复选框,按钮等元素
- textarea 多行文本框
- select option 下拉选择框
- button 按钮
- label 表单元素的标题
- fieldset 表单元素组
- legend 是fieldset的标题对fieldset来进行说明
input的常用属性
- type : input的类型
- text : 文本输入框(明文输入)
- password : 文本输入框(密文输入)
- radio : 单选框
- checkbox : 复选框
- button : 按钮
- reset : 重置
- submit : 提交表单数据给服务器
- file : 文件上传
- maxlength : 允许输入的最大字数
- placeholder : 占位文字
- readonly : 只读
- disabled : 禁用
- checked : 默认被选中
- autofocus : 当页面加载时,自动聚焦(一般给页面第一个输入框)
- name : 名字 在提交数据给服务器时,可用于区分数据类型
- value : 取值 具体提交给服务器的值
- form : 设置所属的form元素(填写form元素的id)一般很少用 一旦使用了此属性,input元素即使不写在form元素内部,它的数据也能够提交给服务器
实现效果
布尔属性
布尔属性可以没有属性值,写上属性名就代表使用这个属性
如果要给布尔属性设值,值就是属性本身
常见的布尔属性
- disabled
- checked
- readonly
- multiple 下拉列表中可以多选 按住crtl
- autofocus
- selected 下拉列表默认选中 不能使用checked
按钮
- 普通按钮 type=button:使用value属性设置按钮文字
- 重置按钮 type=reset:重置它所属form的所有变淡元素(包括input textarea select)
- 提交按钮 type=submit:提交它所属form的表单数据给服务器(包括input textarea select)
button的默认属性值是submit
实现方式有很多可以是用button 也可以使用input
input和password
如何点击文字使其后面的选框聚焦
radio的使用注意
去除input的Tab的选中效果
input {
outline:none;
}
或者将tabindex属性值设置为-1
textarea
textarea的常用属性
- cols:列数
- rows:行数
缩放的css设置
- 禁止缩放 resize:none;
- 水平缩放 resize:horizontal;
- 垂直缩放 resize:vertical;
- 水平垂直缩放 resize:both;
select和option
option是select的子元素,一个option代表一个选项
select常用属性
- multiple 可以多选
- size 显示多少项
option常用属性
selected 默认被选中
fieldset和legend
form的常用属性
- action 用于提交表单数据的请求URL
- method 请求方法(get和post),默认是get
- target 在什么地方打开URL(参考a元素的target)
- enctype
- 规定了在向服务器发送表单数据之前任何人对数据进行编码
- 取值有三种
- application/x-www-form-urlencoded:默认编码方式
- multipart/form-data:文件上传时必须为这个值,并且method必须是post
- text/plain: 普通文本传输
- accept-charset:规定表单提交时使用的字符编码(默认值UNKNOWN,和文档相同的编码)
get和post
提交表单数据时,浏览器发送的时http请求,有2中请求方法可以选择
- get
- 在请求URL后面以 ? 的形式跟上发给服务器的参数,多个参数之间用 & 隔开,比如 www.test.com/login?phome… -由于浏览器和服务器对URL长度有限制,因此在URL后面附带的参数是有限制的,通常不能超过1kb(所以一般使用post)
- post
- 发给服务器的参数全部放在请求体中
- 理论上,post传递的数据量没有限制
