コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5の新しいフォーム属性について詳しく解説

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

零下一度
リリース： 2017-05-06 11:52:00
オリジナル
1788 人が閲覧しました

新しいフォーム属性

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

autocomplete (自動補完)

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

  • 取值:

    • on:开启

    • off:关闭

  • 适用情况:

  • 示例代码:

<!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>
ログイン後にコピー

  • 使用注意:

    • 虽然这个属性可以让元素的放置位置不在成为限制,但是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题以外,也为了提升代码的可读以及可维护性

multiple(多选)

如果想要在某个input标签中选择多个值,可以使用该属性

  • 适用情况:

    • 该属性可以用在type为<a href="http://www.php.cn/wiki/1313.html" target="_blank">file</a>标签内

  • 示例代码

    • 选择多文件时,需要按住ctrl按钮

      <input type="file" multiple >
      ログイン後にコピー

placeholder(占位提示)

输入元素内默认显示一些提示信息,当用户输入之后自动消失,这种效果我们需要使用JavaScript来实现,知道出现了placeholder这个属性

関連ラベル：
HTML5，新表单，属性
ソース：php.cn
前の記事：html5 での Canvas の使用による線と面の描画 次の記事：40 の HTML5 面接の質問 (回答付き)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
JavaScriptを使用してプロパティを更新し、配列オブジェクトでプロパティ値を連続した順序で結果を取得する方法 オブジェクトリストの配列があり、パラメータridとrorderが渡されます。 ->1. Rid がリスト内の ID と同じ場合、itemorder> の値を rorde...
から 2024-04-04 13:32:46
0
1
382
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート