HTML5の新しいフォーム属性について詳しく解説-H5 チュートリアル-php.cn

HTML5の新しいフォーム属性について詳しく解説

零下一度

リリース： 2017-05-06 11:52:00

オリジナル

1742 人が閲覧しました

新しいフォーム属性

最も完全なフォーム属性は、w3cschool-h5 フォーム属性を参照することで取得できます。ここでは、一般的な属性についてのみ説明します

autocomplete (自動補完)

はユーザー入力を記録し、プロンプトを表示できます。これは autocomplete の役割ですautocomplete的作用

取值:

on:开启
off:关闭

适用情况:

一般用在input标签中

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" >
    <input type="text" autocomplete="on" name="userName">
    <input type="submit">
</form>
</body>
</html>

ログイン後にコピー

使用注意:

标签需要添加name属性
只有提交了一次以后才会出现提示

autofocus(获取焦点)

当某一页有很多个可供输入的元素时,用户需要使用鼠标点选元素进行输入,为了提升用户体验,我们可以通过autofocus属性来指定页面中默认选中的元素

使用方法:

需要哪个表单元素获得焦点,只需要添加该属性即可
不需要赋值,只需要添加属性即可,见示例代码

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<form action="" >
  姓名:<input type="text"  name="userName">
  <br/>
  年龄<input type="number" name="telNum" autofocus>
  <input type="submit">
</form>
</body>
</html>

ログイン後にコピー

使用注意:

在没有该属性之前,能够使用<a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a>来指定元素
如果页面中多个元素设置了该属性,最后一个会获得焦点

form(表单关联)

当我们想要提交数据时,需要把表单元素放到对应的form标签中,这个属性的出现让表单元素的放置位置不在受到约束

使用方法:

想要某个表单外元素跟该表单建立联系,只需要为元素添加属性form="表单id"设置为想要建立联系的表单id即可

示例代码

让表单外输入爱好的input标签跟id为userForm表单建立联系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="" id="userForm" >
    姓名:<input type="text"  name="userName">
    <br/>
    年龄:<input type="number" name="telNum" autofocus>
    <br/>
    <input type="submit">
</form>

<br/>
爱好:<input type="text" name="habbit" form="userForm">
</body>
</html>

ログイン後にコピー