属性

accept

是一个以逗号分隔的列表，其中包含一个或多个文件类型/唯一文件类型标识符

label {
  display: block;
  margin-top: 1rem;
}

input {
  margin-bottom: 1rem;
}

<label for="movie">Choose a movie to upload:</label>

<input type="file" id="movie" name="movie" accept="video/*" />

<label for="poster">Choose a poster:</label>

<input type="file" id="poster" name="poster" accept="image/png, image/jpeg" />

文件类型：

audio/* 任何音频文件
video/* 任何视频文件
image/* 任何图片文件
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document 接受任何看起来像 MS Word 文档的东西。

autocomplete

允许浏览器预测用户将要输入的内容。这可以通过在字段中显示预测选项或自动填写字段来提供帮助。

label {
  display: block;
  margin-top: 1rem;
}

<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" type="text" autocomplete="family-name" />

<label for="email">Email:</label>
<input name="email" id="email" type="email" autocomplete="off" />

属性值：

on 允许浏览器为此字段存储自动完成值。
off 禁止浏览器为此字段存储自动完成值。

crossorigin

允许你配置CORS请求。这允许你控制哪些网站可以访问你的资源。

img {
  width: 100%;
  height: auto;
}

<img src="https://www.example.com/image.jpg" crossorigin="anonymous" />

属性值：

anonymous
use-credentials
""

disabled

禁用一个元素。禁用的元素无法与用户交互，并且不会在提交表单时包含其值。

for

与label和output关联使用的属性。

<p>
  <label>First Name (no "for" attribute):</label>
  <input id="first" type="text" value="Jane" />
</p>
<p>
  <label for="last">Last Name (w/ "for" attribute):</label>
  <input id="last" type="text" value="Doe" />
</p>
<p id="result">
  <strong id="result-label">Full Name:</strong>
  <output for="first last" aria-labelledby="result-label" id="output"></output>
</p>

label[for='paragraph'] {
  color: rebbeccapurple;
}

#result {
  text-align: center;
}

#result-label {
  font-size: 16pt;
}

#result-label,
#output {
  display: block;
}

const firstNameEl = document.getElementById('first');
const lastNameEl = document.getElementById('last');
const outputEl = document.getElementById('output');

function updateOutput() {
  const value = `${firstNameEl.value} ${lastNameEl.value}`;
  outputEl.innerText = value;
}

updateOutput();
firstNameEl.addEventListener('input', updateOutput);
lastNameEl.addEventListener('input', updateOutput);

max and min

定义输入字段所能接受的最大值或最小值

包括：

date
month
week
time
datetime-local
number
range
progress
meter

如果超出最大值，validityState.rangeOverflow 将为true 且空间会匹配:out-of-range 和 :invalid伪类。

maxlength and minlength

定义输入字段所能接受的最大字符数，可以在<input>、<textarea>中使用。长度是以UTF-16码元位单位进行计算的，通常等同与字符个数。

<input type='password' maxlength='4'/>

pattern

定义一个表单控件的值应该匹配的正则表达式。

<label for="username">Username: (3-16 characters)</label>
<input id="username" name="username" type="text" value="Sasha" pattern="\w{3,16}" required />

<label for="pin">PIN: (4 digits)</label>
<input id="pin" name="pin" type="password" pattern="\d{4,4}" required />

label {
  display: block;
  margin-top: 1em;
}

input:valid {
  background-color: palegreen;
}

input:invalid {
  background-color: lightpink;
}

placeholder

占位符，当控件没有值的时候显示。

readonly

只读，用户无法修改，但会提交。

required

必填项，如果未填写，则表单提交时会提示错误

伪类：

:required
:optional

示例：

<form>
  <div class="group">
    <input type="text" />
    <label>普通</label>
  </div>
  <div class="group">
    <input type="text" required />
    <label>必需</label>
  </div>
  <input type="submit" />
</form>

input 类型

button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week