5 个有用的输入属性
AWS 安全直播！
大家好，我是Aya Bouchiha，今天是第 33 天，我们将讨论 5 个有用的输入属性。
图案
此属性通常与描述输入框样式的 title 属性一起使用，其作用是指定一个有效的 JavaScript 正则表达式，表单提交时会使用该正则表达式检查输入框的值。它适用于以下输入类型：( text、email、tel、password、search、url、date )。
更多详情
<form>
<input
type="text"
placeholder="full name..."
pattern="[A-z]{8,16}"
title="the full name should be between 4 and 15 letters"
/>
<input type="submit" />
</form>
输出：
最大长度
maxlength 是一个输入属性，用于指定输入字段中允许的最大字符长度。当输入值的长度等于 maxlength 时，输入字段将不再接受任何字符。
<form>
<input type="password" placeholder="phone password..." maxlength="4" />
<input type="submit" />
</form>
输出：
输入达到 4 个字符后，输入字段不再接受更多字符。
自动完成
此属性指定浏览器是否可以预测输入框的值，并在用户开始输入时显示填充选项。此属性适用于以下输入类型（文本、电话、电子邮件、密码、搜索、网址、日期选择器、颜色、范围），也适用于`<input> `和`<form>`标签。
<form>
<input
type="text"
placeholder="first name"
name="f-name"
autocomplete="on"
/>
<input type="email" placeholder="email" name="email" autocomplete="off" />
<input type="submit" />
</form>
输出：
自动对焦
autofocus 是一个属性，用于指定输入字段在页面加载时是否应自动获得焦点。
<form>
<input type="text" placeholder="your name..." autofocus />
<input type="submit" />
</form>
输出：
列表
此属性指向一个包含预定义选项的`<datalist>`元素，这些选项将用于 ` <input> ` 元素。
更多详情
<form>
<input list="programming-languages" />
<datalist id="programming-languages">
<option value="java" />
<option value="javascript" />
<option value="C#" />
<option value="python" />
</datalist>
</form>
输出：
概括：
pattern：指定一个有效的 JavaScript 正则表达式，用于检查输入字段的值是否与该正则表达式匹配。
maxlength：指定输入字段中允许的最大字符长度。
自动完成：指定浏览器可以在用户开始输入或不输入时显示选项来填充字段。
自动聚焦：指定页面加载时输入字段是否自动获得焦点。
list：用于显示元素的预定义选项列表，以向用户提供建议。
参考
祝您编程愉快！
文章来源：https://dev.to/ayabouchiha/5-useful-input-attributes-1b64