8.表单—下-灵析社区

懒人学前端

十六、HTML 下拉框有哪两种实现方式 ？

使用 <select> 标签

  • 包裹 <option> 标签，每一行是一项

代码

<select>
  <option value="选项 1">选项 1</option>
  <option value="选项 2">选项 2</option>
  <option value="选项 3">选项 3</option>
</select>

效果

使用 <input> 标签

  • 使用 <datalist> 标签

包裹 <option> 标签，每一行是一项

  • 设置 list 属性，关联 <datalist>

代码

<input type="text" list="select" />
<datalist id="select">
  <option value="选项 1">选项 1</option>
  <option value="选项 2">选项 2</option>
  <option value="选项 3">选项 3</option>
</datalist>

效果

十七、如何构建一个兼顾老版本浏览器的自动补全输入框 ？

可以在 <datalist> 标签中嵌入 <select> 和 <option> 标签，当 <datalist> 不被支持时，展示下拉选择框，提供用户手动输入内容的第二选择

<label for="colorInput">What is your favorite color ?</label>
<input type="text" id="colorInput" list="colorList">
<dataList id="colorList">
  <label for="colorSuggestion">or pcik a color</label>
  <select>
    <option>Blue</option>
    <option>Red</option>
    <option>Orange</option>
    <option>Green</option>
    <option>Yellow</option>
    <option>Pink</option>
    <option>Purple</option>
    <option>White</option>
  </select>
</dataList>

支持浏览器预览：

不支持浏览器预览：

十八、如何构建单选框，如何构建复选框 ？

单选框

  1. 设置 type=radio
  2. 相同 name 的单选框同时只有一个能被选中
  3. 选中项有 checked 属性，没有一个选中项，不会发送 name 的值
  4. 默认 value 值为 on

复选框

5.  设置 type=checkbox

6.  相同 name 的复选框

表单被提交后，可以获得提交的键名和键值对字符串

Python 可以使用 self.request.get('name', allow_multiple = True) 或 self.request.getAll('name') 获取

PHP 可以设置 name 值的格式为 name[] ，使用名称 name 获取数组

7.  选中项有 checked 属性，没有一个选中项，不会发送 name 的值

8.  默认 value 值为 on

十九、如何在表单中发送图片被点击时的坐标 ？

1.  使用图像按钮元素

  • 设置 type=image
  • 支持与 <img> 元素的相同属性

2.  支持其它表单按钮的支持属性

使用图像按钮提交表单

  • 不会提交自身值
  • 会提交单击处相对于图像左上角的 X 和 Y 坐标

以查询字符串的格式跟在 URL 后

https://www.leetcode-cn . com/?pos.x=100&pos.y=200

二十、支持 `min` 和 `max` 的表单组件有哪些 ？

1.  数字选择器 min 和 max 分别设置最小值和最大值

  • type=number 的 <input>

2.  滑块选择器 min 和 max 分别设置最小值和最大值

  • type=range 的 <input>

3.  日期时间选择器 min 和 max 设置开始时间和结束时间

  • type=datetime-local 的 <input>
  • type=month 的 <input>
  • type=time 的 <input>
  • type=week 的 <input>

4.  进度条选择器 <progress>

  • max 指定随时间变化而变化到最大的值

5.  仪表选择器 <meter>

  • min 值域的最小边界值，默认为 0
  • max 值域的上限边界值，默认为 1

二十一、哪种输入表单适合显示密码强度 ？

1.  low 和 high 将范围划分为三个部分

  • 较低部分：min 和 low
  • 中间部分：low 和 high
  • 较高部分：high 和 max

2.  optimum 定义 <meter> 元素的最优值

  • optimum 值在较低范围内，较低范围最优，中等范围一般，较高范围最坏
  • optimum 值在中等范围内，较低范围一般，中等范围最优，较高范围最坏
  • optimum 值在较高范围内，较低范围最坏，中等范围一般，较高范围最优

3.  <meter> 颜色

  • 最优显示为绿色
  • 平均显示为黄色
  • 最坏显示为红色

实现一个密码强度显示器，分别对应 弱、中等、强的密码

<p>密码强度指示器</p>
<p>弱：<meter min="0" low="33" high="66" max="100" value="30" optimum="100"></meter></p>
<p>中等：<meter min="0" low="33" high="66" max="100" value="55" optimum="100"></meter></p>
<p>强：<meter min="0" low="33" high="66" max="100" value="88" optimum="100"></meter></p>

效果如图所示：

二十二、使用 GET 和 POST 发送表单数据，有什么不同 ？

根据 rfc-2616 规范，HTTP 协议中的 GET 和 POST 主要是语义上的区别

在浏览器的实现及应用中，存在 GET 和 POST 的最佳实践

GET 发送表单数据

  • 设置 <form> 的 method 属性为 get
  • 数据以查询字符串的形式被追加到 URL，参数上限受早期浏览器和 Web 服务器的限制

问号 ? 后跟查询字符串

符号 & 分隔开的键名键值对

  • 默认缓存，受缓存策略控制
  • 可回退
  • 可收藏
  • 参数随 URL 保存在浏览器历史中
  • 适用于无副作用，幂等的请求

POST 发送表单数据

  • 设置 <form> 的 method 属性为 post
  • 数据以查询字符串的形式附加到请求体中，参数上限可能受后端脚本限制，如 PHP 通过 max_input_vars 限制最大输入参数上限
  • 包含请求行

Content-Type: application/x-ww-form-urlencoded

Content-Length: {请求体的数据长度}

  • 默认不缓存，受缓存策略控制，可声明缓存
  • 通常回退会触发重新提交警告，避免回放攻击
  • 通常不可收藏
  • 参数不随 URL 保存
  • 适用于有副作用，非幂等的请求

二十三、Form 的 enctype 属性都有哪些值，各自适合什么场景 ？

enctype 属性通常用来提交表单的内容类型

  • application/x-www-form-urlencoded 默认值，数据转换为键值对，用于不含文件的表单提交
  • multipart/form-data 使用 <input> 标签上传文件时，必须设置此类型
  • text/plain 表示纯文本形式，HTML5 新增，通常用于调试

二十四、什么是表单校验，为什么要使用表单校验 ？

（1）什么是表单校验

向 Web 应用输入或提交数据时，验证数据的过程就是表单校验

  • 正确则允许数据继续提交后端或后台服务
  • 失败则提示错误类型、原因、位置或更改建议

（2）为什么要进行表单校验 ？

  • 确保数据格式正确：

引导用户：引导用户输入符合预期的数据

保护系统：符合设定类型、位数或具体规则，避免不正确格式数据影响程序运行

  • 信息安全

保护用户：确保用户设定密码、二次密码、安全问答够复杂，不易被暴力破解，无泄漏

减少攻击：经常与后端或后台服务的校验一起应用，减少恶意或伪造的数据提交

二十五、表单校验都有哪些类型 ？

表单校验可以分为客户端校验和服务器端校验

  • 客户端校验

校验时机：发生在应用端或浏览器端，表单数据被提交到服务器之前

实时性：即时反馈用户输入的校验结果

作用：确保数据格式正确，保护信息安全

方式：

JavaScript：监听输入框输入、失去焦点和提交事件，验证非空（必填），使用 length 校验长度，正则校验格式等，校验通过或失败分别设置不同 class 或 style，失败时，通过禁用提交按钮，阻止 onsubmit 事件，阻止表单继续提交

HTML5 内置校验：通过设置不同的 type 类型，声明 required 必填属性，minlength 和 maxlength 限制长度，min 和 max 限制数字或日期范围，设置 pattern 正则表达式校验输入内容，更改伪类类名的属性自定义校验或失败的提示，性能更好，代码更少，老版本 IE 不兼容

HTML5 内置校验 + JavaScript（constraint validaton API）：检测、自定义表单元素状态和错误信息

  • 服务器端校验

校验时机：应用端或浏览器提交数据并被后端或后台服务接收之后

滞后性：需要等待后端或后台服务响应

作用：提供验重等需要查询数据库的校验，校验、过滤和清洗数据

方式：

通常采用 Ajax 方式，将用户输入数据提交给后端或后台服务，再次校验规则或查询数据库，将校验结果作为响应返回。应用端或浏览器端根据响应结果，更改 class 或设置 style 展示不同的提示

二十六、如何使用 HTML5 的内置表单数据校验 ？

HTML5 内置表单数据校验通常包括校验属性、约束校验 API 及对应的 CSS 伪类

1.校验属性

  • 类型校验：设置 type 类型

email url 类型限制输入文字必须为邮箱或网址

其它非 text 类型，通过控件，触屏端唤起数字键盘等，来限制用户输入类型

  • 非空必填校验：声明 required 属性即可
  • 长度校验：设置 minlength 和 maxlength 属性限制长度
  • 数字 / 日期 / 范围：设置 min 和 max 属性设置数值范围、起止日期、range 范围

步长：step 与 min 或 max 其中至少一个一起设置时，限制值的有效性

2.  Constraint Validation API 约束验证 API

  • 属性

 validationMessage 本地化消息

描述元素不满足校验条件时的文本信息

无需校验或满足校验条件时，为空

 validity ValidityState 对象，每一个子项都返回布尔值

customError 是否设置了自定义错误

patternMismatch 是否匹配正则表达式

rangeOverflow 元素的值是否高于所设置最大值

rangeUnderflow 元素的值是否低于所设置最小值

stepMismatch 元素的值是否符合 step 属性规则

tooLong 元素的值是否超过最大长度

typeMismatch 元素的值是否出现语法错误

valid 元素的值是否有效

valueMissing 元素的值是否 required 且为空

willValidate 元素的值是否是在表单提交时被校验

  • 方法

 checkValidity() 校验元素的值是否有效

 reportValidity() 元素报告其校验状态，重新展示校验失败提示给用户

 setCustomValidity(message) 为元素添加自定义的错误消息

3.伪类

:valid 有效

:invalid 无效

:in-range 在范围内

:out-of-range 超出范围

二十七、使用 JavaScript 发送表单数据都有哪些方法 ？

使用 JavaScript 发送表单数据，需要两步骤

首先，构造请求参数

  • 构建查询字符串

使用 ES3

const buildParam = data => {
  const dataPairs = []
  for (const key in data) 
    dataPairs.push(encodeURIComponent(key) + encodeURIComponent(data[key]))
  return dataPairs.join('&').replace(/%20/g, '+')
}
* 使用 jQuery
const buidParam = form => $(form).serialize()
  • 使用 FormData 对象

将对象转为 FormData 对象

const buildParam = data => {
  const formData = new FormData()
  for (const key in data)
    formData.append(key, data[key])
  return formData
}
* 将表单元素构建 `FormData` 对象
const buildParam = form => {
  const formData = new FormData(form)
  return formData
}

然后，发送数据

  • 使用 XMLHttpRequest 对象
const send = (url, param, cb) => {
  const request = new XMLHttpRequest()
  request.addEventListener('load', e => cb(null, e => cb(e.target.responseText)))
  request.addEventListener('error', e => cb(e.message))
  request.open('POST', url)
  request.send(param)
}
  • 使用 jQuery
const send = (url, param, cb) => {
  $.ajax({
    url,
    type: 'post',
    data: param
  }).done(data => cb(null, data)).fail((_. textStatus) => cb(textStatus))
}
  • 使用 fetch 方法
const send = (url, param, cb) => {
  fetch(url, {
    method: 'POST',
    body: param
  }).then(response => cb(null, response)).catch(error => cb(error))
f  
}

二十八、如何自定义表单元素的样式 ？

首先，由于表单元素先于 CSS 被添加到 HTML，早期的渲染依靠底层系统实现，至今，表单元素在不同浏览器，同一浏览器的不同系统版本中，存在不同的默认外观。

自定义表单样式的方法：

  • 使用 JavaScript + HTML + CSS 重建表单元素，模拟其交互行为。最终通过 UI 组件库的方式供设计团队参考和业务开发调用。

保持跨浏览器，跨操作系统的一致性

可以自定义所有样式

交互、校验、提交等都需要自己完成，代码多，复杂度高

JavaScript 出错或禁用，CSS 加载失败，都可能导致表单失效。在稳定性要求高的场景，需要能降级到原生表单元素

  • 自定义原生表单元素的样式

 原生表单元素按应用 CSS 的难度 ，分为三类

容易应用，跨平台不易出问题：<form> <fieldset> <label> <output>

难应用，不同平台写不同属性：<legend> checkbox radio placeholder

不推荐应用：<select> <option> <optgroup> <datelist> <progress> <meter>

 保持跨平台一致性

字体和文本大小：继承父级元素的 CSS，而不使用系统默认样式

button, input, select, textarea {
font-family: inherit;
font-size: 100%;
}
  • 盒子模型：保持相同的宽度和高度
button, input, select, textarea {
-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
        box-sizing: border-box;
}
  • 定位

<legend> 元素定位是 <fieledset> 父元素的上边框的最顶端

<textarea> 元素的垂直对齐由基线改为顶端对齐 vertical-align: top

  • 清除默认样式

-moz-appearance 清除 Firefox 表单元素的默认样式

-webkit-appearance 清除 Safari 和 Chrome 表单元素的默认样式

  • 使用 CSS 伪类定义表单组件的细节
  • CSS 2.1 支持 3 伪类：:active :focus :hover
  • CSS Selector Level 3 新增 4 伪类：:enabled :disabled :checked :indeterminate
  • CSS Basic UI Level 3 新增 9 伪类：:default :valid :invalid :in-range :out-of-range :required :optional :read-only :read-write
  • CSS Selector Level 4 新增： :user-error

阅读量：2013

点赞量：0

收藏量:0