HTML：活的标准

如果文档包含以下标记

<input type="url" name="location" list="urls">
<datalist id="urls">
 <option label="MIME: Format of Internet Message Bodies" value="https://www.rfc-editor.org/rfc/rfc2045">
 <option label="HTML" value="https://html.whatwg.com.cn/">
 <option label="DOM" value="https://dom.spec.whatwg.org/">
 <option label="Fullscreen" value="https://fullscreen.spec.whatwg.org/">
 <option label="Media Session" value="https://mediasession.spec.whatwg.org/">
 <option label="The Single UNIX Specification, Version 3" value="http://www.unix.org/version3/">
</datalist>

… 并且用户输入了“spec.w”，并且用户代理还发现用户最近访问了 https://url.spec.whatwg.org/#url-parsing 和 https://streams.spec.whatwg.org/，那么渲染可能如下所示

此示例中的前四个 URL 由作者指定的列表中与用户输入的文本匹配的四个 URL 组成，并以某种实现定义方式排序（可能按用户访问这些 URL 的频率）。注意，UA 使用了对值的 URL 了解来允许用户省略方案部分，并对域名执行智能匹配。

最后两个 URL（以及可能还有更多，因为滚动条表明还有更多值可用）是来自用户代理的会话历史记录数据的匹配。这些数据不会提供给页面 DOM。在这种特殊情况下，UA 没有标题可用于这些值。

email         = 1*( atext / "." ) "@" label *( "." label )
label         = let-dig [ [ ldh-str ] let-dig ]  ; limited to a length of 63 characters by RFC 1034 section 3.5
atext         = < as defined in RFC 5322 section 3.2.3 >
let-dig       = < as defined in RFC 1034 section 3.5 >
ldh-str       = < as defined in RFC 1034 section 3.5 >

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

以下示例显示了航班预订应用程序的一部分。该应用程序使用一个input元素，其type属性设置为datetime-local，然后它在所选机场的时区解释给定的日期和时间。

<fieldset>
 <legend>Destination</legend>
 <p><label>Airport: <input type=text name=to list=airports></label></p>
 <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p>
</fieldset>
<datalist id=airports>
 <option value=ATL label="Atlanta">
 <option value=MEM label="Memphis">
 <option value=LHR label="London Heathrow">
 <option value=LAX label="Los Angeles">
 <option value=FRA label="Frankfurt">
</datalist>

以下是使用数字输入控件的示例

<label>How much do you want to charge? $<input type=number min=0 step=0.01 name=price></label>

如上所述，用户代理可能会支持以用户的本地格式进行数字输入，并将其转换为如上所述提交所需的格式。这可能包括处理分组分隔符（如“872,000,000,000”）和各种小数分隔符（如“3,99”与“3.99”），或使用本地数字（如阿拉伯语、天城体、波斯语和泰语中的数字）。

这是一个使用自动完成列表的范围控件示例，使用 list 属性。这在控件的整个范围内有特别重要的值时可能很有用，例如在用作速度控制的范围控件中预先配置的光照水平或典型的速度限制。以下标记片段

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
<option value="0">
<option value="-30">
<option value="30">
 <option value="++50">
</datalist>

...应用以下样式表

input { writing-mode: vertical-lr; height: 75px; width: 49px; background: #D5CCBB; color: black; }

...可能呈现为

注意 UA 如何从样式表指定的 height 和 width 属性的比率确定控件的方向。颜色也类似地从样式表中获取。但是，刻度标记是从标记中获取的。特别是，step 属性没有影响刻度标记的放置，UA 决定只使用作者指定的完成值，然后在极端值处添加更长的刻度标记。

还要注意无效值 ++50 被忽略了。

另一个例子，请考虑以下标记片段

<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>

用户代理可以用多种方式显示，例如

或者，另外，例如

用户代理可以根据样式表中给出的尺寸选择要显示的哪一个。这将使它能够保持刻度标记的相同分辨率，尽管宽度不同。

最后，这是一个带有两个标记值的范围控件的示例

<input type="range" name="a" list="a-values">
<datalist id="a-values">
<option value="10" label="Low">
<option value="90" label="High">
</datalist>

使用使控件垂直绘制的样式，它可能如下所示

例如，考虑一个将 Microsoft Word 文档转换为 Open Document Format 文件的应用程序。由于 Microsoft Word 文档是用各种 MIME 类型和扩展名描述的，因此该站点可以列出几个，如下所示：

<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">

在仅使用文件扩展名描述文件类型的平台上，此处列出的扩展名可用于筛选允许的文档，而 MIME 类型可与系统的类型注册表（将 MIME 类型映射到系统使用的扩展名）一起使用，如果有的话，以确定允许的任何其他扩展名。类似地，在没有文件名或扩展名，而是使用 MIME 类型在内部标记文档的系统上，MIME 类型可用于选择允许的文件，而扩展名可在系统具有扩展名注册表的情况下使用，该注册表将已知的扩展名映射到系统使用的 MIME 类型。

出于历史原因，value IDL 属性在文件名之前添加字符串 "C:\fakepath\"。一些旧版用户代理实际上包含了完整的路径（这是一种安全漏洞）。因此，以向后兼容的方式从 value IDL 属性中获取文件名并非易事。以下函数以一种适当兼容的方式提取文件名：

function extractFilename(path) {
  if (path.substr(0, 12) == "C:\\fakepath\\")
    return path.substr(12); // modern browser
  var x;
  x = path.lastIndexOf('/');
  if (x >= 0) // Unix-based path
    return path.substr(x+1);
  x = path.lastIndexOf('\\');
  if (x >= 0) // Windows-based path
    return path.substr(x+1);
  return path; // just the filename
}

这可以按如下方式使用：

<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
</script>

以下表单

<form action="process.cgi">
 <input type=image src=map.png name=where alt="Show location list">
</form>

如果用户在坐标 (127,40) 处单击图像，则用于提交表单的 URL 将为 "process.cgi?where.x=127&where.y=40"。

(在本示例中，假设对于看不到地图的用户，他们只看到一个标记为“显示位置列表”的按钮，单击该按钮将导致服务器显示一个位置列表以供选择，而不是地图。)

以下摘录展示了如何将消息客户端的文本输入任意限制为固定数量的字符，从而迫使通过此媒介进行的任何对话都简短并阻止智能的讨论。

<label>What are you doing? <input name=status maxlength=140></label>

这里，密码被赋予了最小长度

<p><label>Username: <input name=u required></label>
<p><label>Password: <input name=p required minlength=12></label>

在以下示例中，现有的产品标识符不能修改，但它们仍然作为表单的一部分显示，以与代表新产品的行（其中标识符尚未填写）保持一致。

<form action="products.cgi" method="post" enctype="multipart/form-data">
 <table>
  <tr> <th> Product ID <th> Product name <th> Price <th> Action
  <tr>
   <td> <input readonly="readonly" name="1.pid" value="H412">
   <td> <input required="required" name="1.pname" value="Floor lamp Ulke">
   <td> $<input required="required" type="number" min="0" step="0.01" name="1.pprice" value="49.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:1">Delete</button>
  <tr>
   <td> <input readonly="readonly" name="2.pid" value="FG28">
   <td> <input required="required" name="2.pname" value="Table lamp Ulke">
   <td> $<input required="required" type="number" min="0" step="0.01" name="2.pprice" value="24.99">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:2">Delete</button>
  <tr>
   <td> <input required="required" name="3.pid" value="" pattern="[A-Z0-9]+">
   <td> <input required="required" name="3.pname" value="">
   <td> $<input required="required" type="number" min="0" step="0.01" name="3.pprice" value="">
   <td> <button formnovalidate="formnovalidate" name="action" value="delete:3">Delete</button>
 </table>
 <p> <button formnovalidate="formnovalidate" name="action" value="add">Add</button> </p>
 <p> <button name="action" value="update">Save</button> </p>
</form>

以下表单有两个必需字段，一个用于电子邮件地址，一个用于密码。它还有一个第三个字段，只有当用户在密码字段和第三个字段中输入相同的密码时才被认为有效。

<h1>Create new account</h1>
<form action="/newaccount" method=post
      oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')">
 <p>
  <label for="username">Email address:</label>
  <input id="username" type=email required name=un>
 <p>
  <label for="password1">Password:</label>
  <input id="password1" type=password required name=up>
 <p>
  <label for="password2">Confirm password:</label>
  <input id="password2" type=password name=up2>
 <p>
  <input type=submit value="Create account">
</form>

对于单选按钮，如果 组 中的任何一个单选按钮被选中，则 required 属性满足。因此，在以下示例中，任何一个单选按钮都可以被选中，而不仅仅是标记为必需的那个。

<fieldset>
 <legend>Did the movie pass the Bechdel test?</legend>
 <p><label><input type="radio" name="bechdel" value="no-characters"> No, there are not even two female characters in the movie. </label>
 <p><label><input type="radio" name="bechdel" value="no-names"> No, the female characters never talk to each other. </label>
 <p><label><input type="radio" name="bechdel" value="no-topic"> No, when female characters talk to each other it's always about a male character. </label>
 <p><label><input type="radio" name="bechdel" value="yes" required> Yes. </label>
 <p><label><input type="radio" name="bechdel" value="unknown"> I don't know. </label>
</fieldset>

为了避免对 单选按钮组 是必需还是可选产生混淆，作者鼓励在组中的所有单选按钮上指定该属性。实际上，一般来说，作者鼓励避免使用任何一开始没有选中控件的单选按钮组，因为这是用户无法返回到的状态，因此通常被认为是糟糕的用户界面。

以下摘录展示了如何使电子邮件客户端的“收件人”字段接受多个电子邮件地址。

<label>To: <input type=email multiple name=to></label>

如果用户在其用户联系人数据库中有很多朋友，其中有两个朋友分别是“蜘蛛侠”（地址为“[email protected]”）和“绯红女巫”（地址为“[email protected]”），那么在用户输入“s”后，用户代理可能会向用户建议这两个电子邮件地址。

该页面也可以从网站上链接到用户的联系人数据库。

<label>To: <input type=email multiple name=to list=contacts></label>
...
<datalist id="contacts">
 <option value="[email protected]">
 <option value="[email protected]">
 <option value="[email protected]">
 <option value="[email protected]">
</datalist>

假设用户已在该文本控件中输入了“[email protected]”，然后开始输入以“s”开头的第二个电子邮件地址。用户代理可能会显示前面提到的两位朋友，以及 datalist 元素中给出的“astrophy”和“astronomy”值。

以下摘录展示了如何使电子邮件客户端的“附件”字段接受多个文件以供上传。

<label>Attachments: <input type=file multiple name=att></label>