万象

外观

表单

约 412 字大约 1 分钟

2025-05-28

表单类型

  • email 只能输入email格式。自动带有验证功能。
  • tel 手机号码。
  • url 只能输入url格式。
  • number 只能输入数字。
  • search 搜索框
  • range 滑动条
  • color 拾色器
  • time 时间
  • date 日期
  • datetime 时间日期
  • month 月份
  • week 星期

表单元素

注意

只列出重要的

<input type="text" list="cv">
<datalist id="cv">	
  <option>义务教育</option>
 	<option>高中</option>
  <option>本科</option>
  <option>本科以上</option>
</datalist>

表单属性

提示

属性名和属性值一致时，可简写，比如checked

  • placeholder 占位符（提示文字）
  • autofocus 自动获取焦点
  • checked 多选框设置选中状态
  • multiple 文件上传多选或多个邮箱地址
  • autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
  • form 指定表单项属于哪个form，处理复杂表单时会需要
  • novalidate 关闭默认的验证功能（只能加给form）
  • required 表示必填项
  • pattern 自定义正则，验证表单。

表单事件

  • oninput()：用户输入内容时触发，可用于输入字数统计。
  • oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。

DOM操作

获取元素

  • document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
  • document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。

类名操作

  • Node.classList.add("class") 添加class
  • Node.classList.remove("class") 移除class
  • Node.classList.toggle("class") 切换class，有则移除，无则添加
  • Node.classList.contains("class") 检测是否存在class

更新日志

2025/12/29 15:00
查看所有更新日志
  • 8ca7a-docs(html)!: 📝 补充文章缺失的Meta内容于
  • cdb74-docs(html): 📝 添加html知识于

版权归属：foresee

许可证：署名-相同方式共享 4.0 国际 (CC-BY-SA-4.0)