HTML5の新しいフォーム属性について詳しく解説
新しいフォーム属性
最も完全なフォーム属性は、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>使用注意:
虽然这个属性可以让元素的放置位置不在成为限制,但是编码时依旧建议,将元素放置到对应的表单中,除了兼容性问题以外,也为了提升代码的可读以及可维护性
multiple(多选)
如果想要在某个
input标签中选择多个值,可以使用该属性
适用情况:
该属性可以用在type为
<a href="http://www.php.cn/wiki/1313.html" target="_blank">file</a>标签内示例代码
选择多文件时,需要按住
ctrl按钮<input type="file" multiple >
ログイン後にコピー
placeholder(占位提示)
输入元素内默认显示一些提示信息,当用户输入之后自动消失,这种效果我们需要使用
JavaScript来实现,知道出现了placeholder这个属性
使用方式:
直接为该属性赋值想要提示的内容即可
适用情况:
想要不通过
JavaScript- Value:
on: オン
off: オフ
🎜🎜🎜🎜🎜該当する状況: 🎜🎜🎜- 🎜🎜 は通常、入力タグ 🎜🎜🎜🎜🎜🎜🎜 サンプルで使用されますコード:🎜🎜🎜🎜
<input type="text"placeholder="输入用户名">
ログイン後にコピーログイン後にコピー- 🎜🎜🎜使用上の注意:🎜🎜🎜
- 🎜🎜 タグには
name属性を追加する必要があります🎜🎜🎜🎜プロンプトは一度送信した後にのみ表示されます🎜🎜🎜🎜🎜autofocus (フォーカスの取得)🎜🎜🎜特定の項目に多数がある場合ページ 入力可能な要素がある場合、ユーザーはマウスを使用して入力する要素をクリックする必要があります。ユーザー エクスペリエンスを向上させるために、autofocus</ を使用してページ上でデフォルトで選択されている要素を指定できます。コード> 属性🎜🎜<ul class=" list -paddingleft-2">🎜🎜🎜使用法:🎜🎜🎜<ul class=" list-paddingleft-2" style="list-style-type: square;">🎜 🎜どの <code>form 要素が必要</ code> フォーカスを取得するには、属性を追加するだけです 🎜🎜🎜🎜 割り当ては必要ありません。属性を追加するだけです。サンプル コードを参照してください 🎜🎜🎜🎜🎜🎜 サンプル コード: 🎜🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>网址:<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></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>🎜🎜🎜🎜使用上の注意: 🎜 🎜🎜<ul class=" list-paddingleft-2" style="list-style-type: square;">🎜🎜この属性が使用可能になる前は、< を使用できました。 code><a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript🎜で要素を指定します🎜🎜🎜🎜ページ内の複数の要素がこの属性が設定されていると、最後の属性がフォーカスされます🎜🎜🎜🎜🎜 form (フォーム関連付け)🎜🎜🎜 データを送信したいときは、対応するに <code>form 要素を入れる必要があります。 form タグを使用すると、フォーム要素の配置が 🎜🎜🎜- 🎜🎜🎜使用法:🎜🎜🎜
- 🎜🎜特定の
外部フォーム</ code> 要素と <code>form間の接続を確立するには、属性form="form" を追加するだけです。 id"を要素に追加し、接続を確立したいform idに設定します。 >以上です🎜🎜🎜🎜🎜サンプルコード🎜🎜- 🎜🎜好みの
input</ をフォームの外に入力します code> タグは <code>userForm の ID に関連付けられますform🎜🎜🎜🎜rrreee- 🎜🎜🎜使用上の注意:🎜🎜🎜
- 🎜🎜この属性は要素の配置を制限できますが、コーディングの際には対応する形式で要素を配置することをお勧めします。互換性の問題に加えて、読みやすさと保守性を向上させるために、コード🎜🎜🎜🎜🎜multiple (複数選択)🎜🎜🎜特定の
inputタグで複数の値を選択したい場合は、この属性を使用できます🎜🎜- 🎜🎜🎜該当する状況:🎜🎜🎜
- 🎜 🎜この属性は、次のタイプのタグで使用できます。
<a href="http://www.php.cn/wiki/1313.html" target="_blank">ファイル🎜🎜🎜🎜🎜 🎜サンプルコード🎜🎜 显示效果如下
<input type="text"placeholder="输入用户名">
新的表单元素
除了在input标签中增加了一些新的
type属性以外,H5也推出了一些新的表单元素,由于浏览器的兼容问题,使用频率并不广,了解即可 w3cSchool_新表单元素
datalist
该元素规定了输入区域的选项列表,可以让用户有一些选项
测试代码:
注:测试代码只是
body内部的代码
网址:<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>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 完整版手册
以上がHTML5の新しいフォーム属性について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7488
15
1377
52
77
11
19
39
HTMLの表の境界線
Sep 04, 2024 pm 04:49 PM
HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。
HTML 左マージン
Sep 04, 2024 pm 04:48 PM
HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。
HTML のネストされたテーブル
Sep 04, 2024 pm 04:49 PM
これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。
HTML テーブルのレイアウト
Sep 04, 2024 pm 04:54 PM
HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。
HTML入力プレースホルダー
Sep 04, 2024 pm 04:54 PM
HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。
HTML 内のテキストの移動
Sep 04, 2024 pm 04:45 PM
HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。
HTML の onclick ボタン
Sep 04, 2024 pm 04:49 PM
HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。
