html5中新增input的10条常用属性

9.12学习

一、html5中input新增的一些属性。

multiple

• 这个类似于file，但这个file不支持上传多个文件。multiple可供上传多个文件。

placeholder

• 会输入框显示一段灰色的字符，用于提醒客户来填写信息。例如账号、或者密码。以下是示例图、和代码。

<input type="text" name="fname" placeholder="账号"><br>
    <input type="text" name="lname" placeholder="密码"><br>

required

• 属性规定必需在提交表单之前填写输入字段，也就是必须输入才能通过。需要在表单内使用。

<form>
        Username: <input type="text" name="usrname" required>
        <input type="submit">
      </form>

autofocus

• 在加载后，input会自动获取焦点。如果有多个，则焦点为第一个。

        账号<input type="text" name="fname" autofocus>

autocomplete

• 自动补全，有两个属性值 “on”开启、 “off”关闭。以用户在已输入的部分，来推测用户下个单词、账号、密码，并且会提供候选项供用户选择。以下是代码和示例图。

<form action="demo-form.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

pattern

• 属性用于验证input元素的值的正则表达式。

min 和 max

• 属性规定input元素的最小值或最大值，通常和number、date、time一起使用。

step

• 用户输入的数值中递增或递减的数值大小。下面是代码和图片示例。

<input type="number" step="1">

readonly（此属性是html原本就有的，因为笔记需要qwq）

• 可以使输入的input为只读。但焦点还可以在input上。

disabled（此属性是html原本就有的，因为笔记需要qwq）

• 可以使input禁用。焦点不能在input上。

二、总结

以上就是我今天的笔记总和，谢谢你的观看！

• 打卡9.12