导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

常见表单

示例

<form method="GET" action="">
  <p>
    用户名：<input type="text" name="username" />
  </p>
  <p>
    密码：<input type="password" name="password" />
  </p>
  <p>
    <input type="button" value="登录" />
  </p>
</form>

label

label、input 联动：

label:for ⇒ input:id

<form method="GET" action="">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" />
  <br />
  <label for="password">密码：</label>
 	<input type="password" name="password" />
  <p>
    <input type="button" value="登录" />
  </p>
</form>

radio

<form method="GET" action="">
	<input
         type="radio" 
         id="male" 
         name="sex" 
         checked="checked"
         value="male" />
  <label for="male">男士</label>
  <input 
         type="radio" 
         id="female" 
         name="sex"
         value="female" />
  <label for="female">女士</label>
</form>

checkbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" method="get">
    <input
      type="checkbox"
      id="java"
      name="language"
      value="java">
    <label for="java">Java</label>
    <input
      type="checkbox"
      id="php"
      name="language"
      value="php">
    <label for="php">PHP</label>
    <input type="submit" value="提交">
  </form>
</body>
</html>

select

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" method="get">
    <select name="lang">
      <option value="">请选择</option>
      <option value="js">JavaScript</option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
    </select>
    <input type="submit" value="提交">
  </form>
</body>
</html>

textarea

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="" method="get">
    <textarea id="context" name="context" cols="30" rows="10"></textarea>
    <input type="submit" value="提交">
  </form>
</body>
</html>

⭐️ 不要换行写，否则会导致有空格

因为 textarea 是在标签之间写内容，所以换行也会被当做内容，只不过内容是空白的。

<textarea cols="30" rows="10"></textarea>

Untitled

<textarea cols="30" rows="10">
</textarea>

Untitled

⭐️ 获取值用 value 不用 innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea cols="30" rows="10">123123<div></textarea>
  <script>
    var text = document.getElementsByTagName("textarea")[0];
    console.log("text.value: ", text.value);
    console.log("text.innerHTML: ", text.innerHTML);
    console.log("text.innerText: ", text.innerText);
  </script>
</body>
</html>

Untitled

表单校验

内置表单数据校验

常用属性

属性 作用
required 表示字段是必填项。

当设置此属性时，如果输入为空，该表单将不会提交（并将显示错误消息），输入也将被视为无效。

对应伪类： :valid 和 :invalid | | pattern | 提供正则表达式验证规则，用于检查输入的格式。 | | min / max | 对数值或日期输入类型限制最小值和最大值。 | | minlength / maxlength | 限制文本输入框的最大字符长度。 |

image.png

JavaScript 校验表单

约束校验 API 的方法

属性 作用
HTMLFormElement.reportValidity() 如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时，对每个无效元素可撤销 invalid 事件会被唤起并且校验错误会报告给用户。
setCustomValidity(message) 为元素添加一个自定义的错误消息；

如果设置了自定义错误消息，该元素被认为是无效的，则显示指定的错误。这允许你使用 JavaScript 代码来建立校验失败，而不是用标准约束校验 API 所提供的。

这些自定义信息将在向用户报告错误时显示。如果参数为空，则清空自定义错误。 |

image.png

来源

表单数据校验 - 学习 Web 开发 | MDN