表单
form表单:与用户交互,把用户输入的数据传送到服务端
常用的属性:
-
action (表单提交动作):定义表单提交的动作,属性值默认是本网页
-
method(表单提交方式):
- post(隐式提交)用户提交的表单信息不会显示在地址栏,相对安全,提交的数据没有大小限制
get(显式提交) 用户提交的表单信息会显示在地址栏,提交时的数据长度有限,不同的浏览器限制的大小也不一样 (兼容性问题) 默认情况下是get。
- enctype(表单上传):设置表单数据进行编码的方式
- application/x-www-form-urlencoded:默认值 (没有文件上传)
- multipart/form-data:(有文件上传)
表单控件:(接收用户输入的数据)
input:中的type属性的值决定 input的类型 (其他属性 name id value 等)
- text (文本框) password(密码) number(数字文本框) email (邮箱)
【这三种类型的input 有placeholder 属性 用于提示用户输入正确的信息, value属性用于收集用户输入的信息 】
- radio(原点勾选框) checkbox(多选框)
【这两种类型的input 的name属性, 若属性值相同则可多选 ,属性值不同则单选 ,该input类型搭配 label (for属性) 标签使用,可实现点击文字选择选项】
- button(普通按钮) submit(提交按钮) reset(取消按钮)
【button按钮没有实际意义,需后期搭配JavaScript来执行操作;submit是用来提交表单的按钮;reset用于清空用户填写的信息(和submit配用)】
- file(上传文件)data(选择日期) datatime-local(本地时间,带小时分钟) hidden(隐藏域) color(选择颜色)
【这些input类型是html5新增的类型】
input中还有其他的属性:checked(默认勾选)、readonly(只读)、required(必填)、disabled(禁用)(布尔类型)等 maxlength属性的值是指用户输入的字符最大长度、autocomplete属性值为0(不允许自动填充)/1(允许自动填充)..等
textare文本域:用于用户输入小段文字,可调整宽高
【属性cols(列数)、row(行数) 单位不是px 也有placeholder属性】
select-option下拉选项框:当option中没有填写相应的value,则向服务器提交的是option标签里面的内容
【select中默认选择是 selected;input中是 checked】
fieldset-legend线包字:fieldset默认带border legend的线包字中的文字