百度前端技术学院 第二天学习笔记（HTML）（5）

HTML学习, 百度前端技术学院 本文总阅读量次

height 和 width 属性

  • height 和 width 属性仅用于 <input type="image">。,规定 <input> 元素的高度和宽度。
  • 注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

list 属性

  • list 属性引用的 <datalist> 元素中包含了 <input> 元素的预定义选项。
  • 具体使用如上datalist的实例。

min 和 max 属性

  • min 和 max 属性规定 <input> 元素的最小值和最大值。
  • min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
    1
    2
    3
    4
    5
    6
    7
    8
    Enter a date before 1980-01-01:
    <input type="date" name="bday" max="1979-12-31">

     Enter a date after 2000-01-01:
    <input type="date" name="bday" min="2000-01-02">

     Quantity (between 1 and 5):
    <input type="number" name="quantity" min="1" max="5">

multiple 属性（同时上传多个文件）

  • multiple 属性是布尔属性。
  • 如果设置multiple="multiple"，则规定允许用户在 <input> 元素中输入一个以上的值。
  • multiple 属性适用于以下输入类型：email 和 file。
  • 实例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <html>
    <body>

    <form action="/example/html5/demo_form.asp" method="get">
    选择图片：<input type="file" name="img" multiple="multiple" />
    <input type="submit" />
    </form>
    <p>请尝试在浏览文件时选取一个以上的文件。</p>

    </body>
    </html>

pattern 属性

  • pattern 属性规定用于检查 <input> 元素值的正则表达式。
  • pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。
  • 提示：请使用全局的 title 属性对模式进行描述以帮助用户。
  • 提示：请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。
  • 实例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <body>

    <form action="/example/html5/demo_form.asp" method="get">
    国家代码：<input type="text" name="country_code" pattern="[A-z]{3}"
    title="三个字母的国家代码" />
    <input type="submit" />
    </form>

    </body>

placeholder 属性

  • placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。
  • 该提示会在用户输入值之前显示在输入字段中。
  • placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password。

required 属性

  • required 属性是布尔属性。
  • 如果设置，则规定在提交表单之前必须填写输入字段。
  • required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file.
  • required或者required="required"都行。
    1
    Username: <input type="text" name="usrname" required>
    或者
    1
    Name: <input type="text" name="usr_name" required="required" />

step 属性

  • step 属性规定 <input> 元素的合法数字间隔。
  • 示例：如果 step=”3”，则合法数字应该是 -3、0、3、6、等等。
  • 提示：step 属性可与 max 以及 min 属性一同使用，来创建合法值的范围。
  • step 属性适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。
  • 实例

HTML5 为 <form> 增加如需属性：

autocomplete
novalidate

HTML学习, 百度前端技术学院