form 的 accept-charset 会改变什么?不写会怎样?
<form> 的 accept-charset 指定提交表单时用于编码表单数据的字符编码。现代 HTML 中实际应使用 UTF-8;省略时,浏览器通常按文档的字符编码处理表单提交。
HTML · 表单与输入面试题第 1 页,显示第 1–46 题,共找到 46 道完整解析,可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
<form> 的 accept-charset 指定提交表单时用于编码表单数据的字符编码。现代 HTML 中实际应使用 UTF-8;省略时,浏览器通常按文档的字符编码处理表单提交。
HTML 的 value 内容属性给输入框初始值,DOM 的 input.value 属性表示当前可编辑值。用户输入后,input.value 会更新,而 getAttribute("value") 通常仍是标记上的初始值。
autocomplete 用来提示浏览器和密码管理器字段的用途。登录页现有密码使用 current-password,注册或重设密码使用 new-password,用户名可用 username。
autocomplete 不只是 on 或 off;shipping street-address、cc-number 等 token 会告诉浏览器字段用途和所属分组。填写收货地址与账单地址时,分组前缀能避免值被填错位置;token 顺序和字段名写错也会让自动填充失效。
页面或对话框出现时,autofocus 会让浏览器自动聚焦指定控件,但焦点位置与滚动位置可能因此变化。同一文档里多个候选只会有一个最终焦点;动态对话框打开时,还得考虑滚动位置和键盘、读屏用户是否被突然打断。
在 form 中,button 没写 type 时默认是 submit,点击取消或展开详情按钮也可能触发表单提交。submit、button、reset 的行为不同,非提交按钮要显式标类型;回车提交也不能靠拦截每个点击事件修补。
全选框常见的横杠状态由 DOM 属性 indeterminate 控制,它只是视觉上的混合态,不会替换 checked 布尔值,也不会作为单独值提交。结合三项列表说明如何根据子项重算状态,并提醒刷新或重新渲染后需要再次设置。
颜色输入过去常被认为只接受不透明的 #rrggbb,但当前规范和部分浏览器已支持更多 CSS 颜色语法,并提供 alpha 与 colorspace 属性。还要区分现代能力与兼容性回退,说明颜色选择器 UI 和提交值都需要按目标浏览器验证。
required 输入框在页面刚打开时就可能匹配 :invalid,立即标红会给用户造成“还没填就报错”的体验。:user-valid 与 :user-invalid 更适合在用户交互后显示状态;数值范围控件还可结合 :in-range、:out-of-range 分辨边界错误。
datalist 通过 input 的 list 属性提供候选建议,输入框仍接受列表外的自由文本,不具备 select 的强制枚举约束。候选标签、实际输入值与表单提交值可能不完全相同;若业务只允许已知选项,还需选择受控控件或在服务端校验。
原生 date 控件可能按用户地区显示日期,但它的 value 与表单提交值是 YYYY-MM-DD 形式的日历日期,不含时区和一天内的具体时刻。直接把日期字符串交给 new Date 再按本地时区显示,可能偏移一天;生日与预约时刻需要不同的数据模型。
datetime-local 让用户输入本地墙上时间,value 形如 YYYY-MM-DDTHH:mm,却不附带 UTC 偏移或时区名称。它与拆开的日期、时间字段各有取舍;跨地区预约还必须确定时区,并处理夏令时带来的歧义。
type=email 会做基础地址语法校验,并可配合 required、multiple 与 pattern;它不会验证邮箱真实存在或用户拥有收件权。加号别名和子域名不应被随意拒绝;国际化邮箱有兼容边界,确认所有权仍要发送验证邮件。
比较普通字段、文件分段和纯文本三种表单编码。文件上传常用 multipart/form-data 传递文件内容与字段边界;浏览器会生成 boundary。用 FormData 加 fetch 时不要手写不完整的 Content-Type,也要分清原生提交和脚本请求。
给 fieldset 加 disabled 可以批量禁用后代表单控件,禁用控件不能获得焦点,也不进入正常提交数据。但第一个 legend 内的后代控件是例外。首个组名里的开关可以让用户启用整组;禁用与只读在聚焦、校验、提交上的行为并不相同。
一组相关单选按钮若只靠视觉边框,读屏用户很难知道它们共同回答什么问题。fieldset 建立分组,首个 legend 提供组标题;组标题与各选项的 label 各有分工;占位文本不能代替说明,嵌套分组也要保持清楚。
file 输入的 accept 提示文件选择器显示哪些类型,multiple 允许一次选择多个文件;它们都不是服务器安全边界。扩展名、MIME 类型和通配符只影响选择提示;拖拽或伪造请求仍需由后端检查文件内容、大小和数量。
表单相关控件可用 form 属性指向同一文档中表单的 id,即使 DOM 上不在 form 内也能参与该表单的提交与校验。通过页面底部固定提交栏说明这种用法,强调关联不会自动传给后代控件,且 name、disabled 等规则仍然适用。
FormData(form) 按表单成功控件规则构造名称和值数据,包含已关联的表单外控件和已选文件,却跳过禁用字段与通常没有 name 的控件。复选框、多个同名字段、文件与提交按钮各有收集规则;要包含某个按钮的值还需指定提交者。
同一张表单可以有“保存草稿”和“正式发布”两条提交路径。提交按钮的 formmethod、formaction 会覆盖所属表单的 method、action,只对通过该按钮发起的提交生效。按钮只有作为本次提交者时覆盖设置才生效,服务端还要根据提交者区分草稿与发布操作。
提交按钮的 formnovalidate 能让这一次表单提交跳过浏览器的交互式约束校验,常用于内容未写完也要保存草稿。它不删除 required、pattern 等规则,更不会关闭服务端校验。对比正式发布按钮,可以看清何时适合跳过前端阻断。
type=hidden 的输入不显示也不能由用户直接编辑,但具名且启用时仍会随表单提交。它适合携带记录标识、页面上下文或表单状态,却不是保密或防篡改机制。服务器仍须根据登录身份核对权限;隐藏字段会提交,真正禁用的控件则不会。
input type=image 是以图片呈现的提交按钮,点击时除触发表单提交,还会发送相对图片的点击坐标。无 name 时提交 x、y,具名时变成 name.x、name.y;alt 要说明操作,图片失败时也应可用。
lang 表示字段期望的语言,dir 表示文字的基础书写方向,它们能帮助浏览器和辅助技术理解输入内容,却不能可靠锁定中文或英文输入法,也不会自动改变表单编码。还要区分输入语言、文字方向、虚拟键盘提示与提交方向信息。
显式关联通过 label 的 for 匹配控件 id,隐式关联可把控件嵌套在 label 内;两种方式都能为输入提供可访问名称并扩大点击区域。显式写法要求 for 对应文档里唯一的 id;嵌套控件时通常无需再写 for,一个标签也不应含糊地指向多个输入。
文本输入和 textarea 都可用 minlength、maxlength 约束文本长度,长度按 UTF-16 代码单元而非用户眼中的字数计算。minlength 不等于必填,脚本赋值和用户输入的校验时机不同;浏览器限制编辑也不能代替后端再次检查。
type=month 选择的是年和月,value 采用 YYYY-MM 字符串,不包含具体日期、时刻和时区。min、max 使用同样格式限制范围,step 可按月份递增;还要注意该控件并非所有主流浏览器都有一致的原生选择器,生产环境需测试回退。
number 控件默认步长为 1,合法值以 min、初始 value 或 0 为基准按整步递增。step=0.1 只允许落在该间隔上的值,step=any 则取消步长不匹配约束,但仍受数值格式及 min、max 影响。用 0.2、0.3 等值手算一次,就能看清步长基准怎样改变合法序列。
数字框的原生校验并不只有一个“输入错误”。还能把低于下限、高于上限和不符合步进分别对应到 rangeUnderflow、rangeOverflow、stepMismatch,并说明提交时何时显示提示、怎样读 validity 与处理空值。
下拉框中的选项组可以用 disabled 暂时关闭整组候选。组内选项不能由用户正常选择,但已有选择、脚本赋值与服务端权限校验仍需要单独处理。 它适合展示暂不可用的套餐,但不能作为业务权限控制;如果原本已选中某项,还要检查实际提交行为。
滑块选价、数量乘单价等即时计算结果可以用 output 表达。for 能把计算结果与输入关联,展示的金额却不能当作可信订单价格,也不会自动替代要提交的输入值。 计算展示与表单提交是两套机制,服务器仍须按可信单价重新计算总额。
手机号或邀请码输入框可用 pattern 做原生格式约束,再用 title 解释用户应怎样填写。正则要匹配整个值;空值是否无效取决于 required,格式错误可由 patternMismatch 判断,title 不能充当唯一提示。
CSS 的 :placeholder-shown 可在占位文字正在显示时给输入框样式,但它不是通用的空值或校验状态判断。再比较与 :not(:placeholder-shown) 的用法,并说明 placeholder、输入类型和空格值等因素如何影响命中。
一组单选框共享 name 才能互斥,提交时也以这个名字传选中项的值。通过配送方式示例说明 checked 初始状态、多个 checked 的解析结果、required 的组级校验,以及为什么同页不同问题不能复用一个 name。
滑块并不等于另一种数字输入框。range 始终有区间内的值,初始值通常是中点;精确数字输入、留空等需求则更适合 number 或文本控件。 还要给当前数值提供可见说明,让键盘与辅助技术用户知道滑块停在哪里。
看起来都不能编辑的字段,提交与交互行为可能完全不同。再比较 readonly 的可聚焦和可提交、disabled 的不可交互与不提交,并说明哪些输入类型、textarea、select 适用哪种属性,以及必填校验如何受影响。
想用脚本触发与用户点击提交按钮相同的流程,应调用 requestSubmit()。它先运行约束校验,成功后才触发 submit 事件;旧的 submit() 绕过两者。传入按钮还会影响提交数据和覆盖属性。
必填并不总是“字符串不能为空”。再比较文本输入、单选组、复选框与下拉框的 valueMissing 条件,说明单选的组级约束、复选框逐项约束、默认选项问题,以及禁用与只读状态为何不能照搬普通必填逻辑。
多选 select 的 value 只返回首个选中 option 的值;要取全部应遍历 selectedOptions,提交到表单时则以同一个 name 发送多个值。FormData.get 也只拿到一项,getAll 才能得到完整数组;没有选中项时还要处理空结果。
select 的 size 控制可见选项行数,multiple 才决定能否同时选择多个值。再比较默认下拉框与列表框的呈现,说明单选列表可以显示多行却仍只选一项,以及多选时如何用键盘操作和读取数据。
自然的 DOM 顺序通常就是最容易理解的键盘焦点顺序。正数 tabindex 会把元素提前,动态表单因此难维护;脚本可聚焦与日常 Tab 顺序又是两件事。 错误提示可以用 -1 让脚本聚焦,但不应因此插入普通键盘导航链。
搜索字段和普通文本框都能接收字符串,但 search 给浏览器提供了搜索语义,可能出现清除按钮或特定键盘提示。两者共享基础文本能力,原生清除按钮和键盘外观却不能写死;搜索动作仍需表单提交或脚本处理。
时间输入的 step 以秒为单位,60 表示一分钟一档,900 表示十五分钟一档。步进基准决定合法时刻,偏离时会出现 stepMismatch;原生选择器显示的分钟选项不一定覆盖全部输入路径。
type="url" 的输入框会按 URL 语法做基础校验,省略协议的地址通常不能通过;空值是否允许还取决于 required。validity.typeMismatch 能识别格式错误,pattern 可再收紧业务格式,但这些浏览器检查不能代替服务端验证。
表单业务规则超出 required、pattern 等原生约束时,可用 setCustomValidity 写自定义错误消息。非空错误消息会让控件持续无效,用户改对后必须清空;input 事件与 reportValidity() 可配合反馈。
周输入控件使用 ISO 周编号而不是普通日期字符串。ISO 周以周一开始,第一周和跨年归属有明确规则,有些年份还有第 53 周;格式正确也不等于业务日期范围正确。