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

新しいフォーム属性

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

autocomplete (自動補完)

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

• 取值:

• on:开启

• off:关闭

• 适用情况:

• 一般用在input标签中

• 示例代码:

• 使用注意:

• 标签需要添加name属性

• 只有提交了一次以后才会出现提示

autofocus(获取焦点)

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

• 使用方法:

• 需要哪个表单元素获得焦点,只需要添加该属性即可

• 不需要赋值,只需要添加属性即可,见示例代码

• 示例代码:

       
    
   姓名: 
   年龄  
    

  ログイン後にコピー

• 使用注意:

• 在没有该属性之前,能够使用JavaScript来指定元素

• 如果页面中多个元素设置了该属性,最后一个会获得焦点

form(表单关联)

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

• 使用方法:

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

• 示例代码

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

     
  
 姓名: 
 年龄: 
  
 
 爱好:  

• 使用注意:

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

multiple(多选)

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

• 适用情况:

• 该属性可以用在type为file标签内

• 示例代码

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

  ログイン後にコピー

placeholder(占位提示)

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

• 使用方式:

• 直接为该属性赋值想要提示的内容即可

• 适用情况:

• 想要不通过JavaScript
• Value:

  on: オン
  

  off: オフ

  該当する状況:
  は通常、 入力タグ サンプルで使用されますコード:

  ログイン後にコピー

  ログイン後にコピー
  使用上の注意:
  タグには name属性を追加する必要がありますプロンプトは一度送信した後にのみ表示されますautofocus (フォーカスの取得)特定の項目に多数がある場合ページ 入力可能な要素がある場合、ユーザーはマウスを使用して入力する要素をクリックする必要があります。ユーザー エクスペリエンスを向上させるために、 autofocus 属性
  使用法:
  どの form 要素が必要 フォーカスを取得するには、属性を追加するだけです 割り当ては必要ありません。属性を追加するだけです。サンプル コードを参照してください サンプル コード:

  网址:<input type="url" list="url_list" name="link"/> <datalist id="url_list"> <option label="W3School" value="http://www.W3School.com.cn"/> <option label="Google" value="http://www.google.com"/> <option label="Microsoft" value="http://www.microsoft.com"/> </datalist> 电话: <input type="tel" list="tel_list"> <datalist id="tel_list"> <option value="186xxx" label="移动">移动</option> <option value="187xxx" label="联通">联通</option> <option value="135xxx" label="天翼">天翼</option> </datalist>

  ログイン後にコピー

  ログイン後にコピー
  使用上の注意:
  この属性が使用可能になる前は、< を使用できました。 code>JavaScriptで要素を指定しますページ内の複数の要素がこの属性が設定されていると、最後の属性がフォーカスされます form (フォーム関連付け) データを送信したいときは、対応する に form 要素を入れる必要があります。 formタグを使用すると、 フォーム要素の配置が
  使用法:
  特定の 外部フォーム 要素と form間の接続を確立するには、属性 form="form" を追加するだけです。 id"を要素に追加し、接続を確立したい form idに設定します。 >以上ですサンプルコード
  好みの input タグは userForm の ID に関連付けられますformrrreee
  使用上の注意:
  この属性は要素の配置を制限できますが、コーディングの際には対応する形式で要素を配置することをお勧めします。互換性の問題に加えて、読みやすさと保守性を向上させるために、コードmultiple (複数選択)特定の inputタグで複数の値を選択したい場合は、この属性を使用できます
  該当する状況:
  この属性は、次のタイプのタグで使用できます。 ファイルサンプルコード
  複数のファイルを選択する場合は、 ctrl ボタンrrreeeプレースホルダー (プレースホルダープロンプト) 一部のプロンプト情報はデフォルトで入力要素に表示されます。ユーザーが入力すると自動的に消えます。placeholder属性が表示されるまで、JavaScriptを使用する必要があります
  使用法:
  プロンプトを表示するコンテンツをこの属性に直接割り当てるだけです 該当する状況:
  JavaScriptを使わずに実装したいプロンプト関数サンプルコード:placeholder.png

  • 显示效果如下

  ログイン後にコピー

  ログイン後にコピー

  新的表单元素

  除了在input标签中增加了一些新的type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素

  datalist

  该元素规定了输入区域的选项列表,可以让用户有一些选项

  • 测试代码:

  • 注:测试代码只是body内部的代码

  网址:  电话:  

  ログイン後にコピー

  ログイン後にコピー

  • datalist:

  • id:id属性,想要使用该datalist的元素需要通过list=id的方式来指定

  • option:

  • value:指定具体的值

  • label:提示信息

  • 注意:

  • 如果input的type为url,option中对应的value需要使用http://开始

  keygen

  keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键，一个是私钥，一个公钥。
  私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate），即实现非对称加密
  目前，浏览器对此元素的糟糕的支持度不足以使其成为一种有用的安全标准。

  • 使用频率:低

  output

  属于新的语义标签:用来放置输出的内容,但是不能自动的计算结果,依旧需要通过js的方式来动态修改结果,只是相比于其他的标签,语义性更强。

  • 使用频率:低

  【相关推荐】

  1.免费h5在线视频教程

  2.HTML5 完整版手册

  3.php.cn原创html5视频教程

  以上がHTML5の新しいフォーム属性について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。