最も完全なフォーム属性は、w3cschool-h5 フォーム属性を参照することで取得できます。ここでは、一般的な属性についてのみ説明します
はユーザー入力を記録し、プロンプトを表示できます。これは
autocomplete
の役割ですautocomplete
的作用
取值:
on:开启
off:关闭
适用情况:
一般用在input标签中
示例代码:
Title
使用注意:
标签需要添加name
属性
只有提交了一次以后才会出现提示
当某一页有很多个可供输入的元素时,用户需要使用鼠标点选元素进行输入,为了提升用户体验,我们可以通过
autofocus
属性来指定页面中默认选中的元素
使用方法:
需要哪个表单元素
获得焦点,只需要添加该属性即可
不需要赋值,只需要添加属性即可,见示例代码
示例代码:
Title
使用注意:
在没有该属性之前,能够使用JavaScript
来指定元素
如果页面中多个元素设置了该属性,最后一个会获得焦点
当我们想要提交数据时,需要把
表单元素
放到对应的form
标签中,这个属性的出现让表单元素
的放置位置不在受到约束
使用方法:
想要某个表单外
元素跟该表单
建立联系,只需要为元素添加属性form="表单id"
设置为想要建立联系的表单id
即可
示例代码
让表单外输入爱好的input
标签跟id为userForm
表单建立联系
Title
使用注意:
虽然这个属性可以让元素的放置位置不在成为限制,但是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题以外,也为了提升代码的可读以及可维护性
如果想要在某个
input
标签中选择多个值,可以使用该属性
输入元素内默认显示一些提示信息,当用户输入之后自动消失,这种效果我们需要使用
JavaScript
来实现,知道出现了placeholder
这个属性
使用方式:
直接为该属性赋值想要提示的内容即可
适用情况:
想要不通过JavaScript
on: オン
off: オフ
該当する状況:name
属性を追加する必要がありますプロンプトは一度送信した後にのみ表示されますautofocus (フォーカスの取得)特定の項目に多数がある場合ページ 入力可能な要素がある場合、ユーザーはマウスを使用して入力する要素をクリックする必要があります。ユーザー エクスペリエンスを向上させるために、
autofocus を使用してページ上でデフォルトで選択されている要素を指定できます。コード> 属性使用法: どの form 要素が必要 code> フォーカスを取得するには、属性を追加するだけです 割り当ては必要ありません。属性を追加するだけです。サンプル コードを参照してください サンプル コード: 网址:<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タグを使用すると、
フォーム要素の配置
が
使用法:
特定の
外部フォーム code> 要素と form
間の接続を確立するには、属性
form="form" を追加するだけです。 id"
を要素に追加し、接続を確立したい
form id
に設定します。 >以上ですサンプルコード
好みの
input をフォームの外に入力します code> タグは 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的方式来动态修改结果,只是相比于其他的标签,语义性更强
。
使用频率:低
【相关推荐】
以上がHTML5の新しいフォーム属性について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。