web表单

web表单

一、form表单容器

\1. 作用：包裹所有表单控件，负责把数据提交给后端服务器

\2. 核心属性

• action：接收表单数据的后台接口地址
• method：提交方式，分GET、POST
  GET：数据拼接在网址后，数据量小、明文，适合查询；
  POST：数据放在请求体内，可传大量内容、文件，更安全，适合登录、上传
• enctype：上传文件时必须设置对应编码格式
• novalidate：关闭浏览器自带的表单校验提示

二、label标签

\1. 功能：关联输入框，点击文字就能激活输入框，提升用户体验

\2. 两种绑定逻辑：通过id+for绑定、直接嵌套输入框

三、各类表单控件分类

1. input单行输入控件

所有控件必须设置name属性，否则提交时不会携带该数据

\1. 文本输入类
普通文本、密码框、搜索框、邮箱、手机号、网址、数字输入框、滑块、隐藏域
隐藏域页面看不见，专门用来传递后台需要的隐藏参数

\2. 选择类
单选框radio：相同name归为一组，只能选一个
复选框checkbox：相同name可多选，后台接收多条数据

\3. 功能控件
文件上传框、普通按钮、提交按钮、重置按钮

1. textarea多行文本框

用于长文本输入，可设置默认显示行数，支持手动拖动放大缩小输入区域

1. select下拉选择框

搭配option使用，selected设置默认选中项；
加multiple属性可开启多选下拉；
optgroup可以给下拉选项分组归类

1. fieldset+legend

将多个表单内容分组，legend作为分组标题，优化页面结构