HTML5 フォームの属性は何ですか?

フォームの要素の詳細な説明を見たい場合は、HTML5 フォーム要素の詳細な説明をここで参照してください

上でフォームの要素について説明しましたが、次にいくつかの新しい属性を見てみましょう

まだ見ていない方は、リンクをクリックしてください: HTML5 フォーム要素の詳細な説明

HTML5 の新しいフォーム属性は、主に 2 つの側面にあります。

要素の新しい属性です。

HTML5 フォーム属性

新しいフォーム属性:

• autocomplete

• novalidate

新しい入力属性:

• オートフォーカス

• フォーム

• フォームのオーバーライド (formaction、formenctype、formmethod、formnovalidate、formtarget)

• 高さと幅

• リスト

• min、max、step

• 複数の

• パターン(正規表現)

• placeholder

• required

autocomplete属性

autocomplete属性は、フォームまたは入力フィールドにオートコンプリート機能が必要であることを指定します。

注: オートコンプリートは、 タグのほか、テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲、色などの タグに適用されます。

ユーザーがオートコンプリート フィールドに入力を開始すると、ブラウザはフィールドに入力するためのオプションを表示する必要があります:

<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>

注: 一部のブラウザでは、この属性を有効にするためにオートコンプリートを有効にする必要がある場合があります。

autofocus 属性

autofocus 属性は、ページの読み込み時にフィールドが自動的にフォーカスを取得することを指定します。

注: autofocus 属性は、すべての タグ タイプに適用されます。

User name: <input type="text" name="user_name"  autofocus="autofocus" />

form 属性

form 属性は、入力フィールドが属する 1 つ以上のフォームを指定します。

注: form 属性はすべての タグ タイプに適用されます。

form 属性は、それが属するフォームの ID を参照する必要があります:

<form action="demo_form.asp" method="get" id="user_form">
First name:<input type="text" name="fname" />
<input type="submit" />
</form>
Last name: <input type="text" name="lname" form="user_form" />

注: 複数のフォームを参照する必要がある場合は、スペースで区切られたリストを使用してください。

フォームオーバーライド属性

フォームオーバーライド属性を使用すると、フォーム要素の特定の属性設定をオーバーライドできます。

フォーム書き換え属性は次のとおりです:

formaction - フォームの action 属性を書き換えます

formenctype - フォームの enctype 属性を書き換えます

formmethod - フォームのメソッド属性を書き換えます

formnovalidate - フォームの novalidate 属性を書き換えますフォーム

formtarget - フォームのターゲット属性を書き換えます

注: フォーム書き換え属性は、submit タグと image タグのタイプに適用されます。

<form action="demo_form.asp" method="get" id="user_form">
E-mail: <input type="email" name="userid" /><br />
<input type="submit" value="Submit" />
<br />
<input type="submit" formaction="demo_admin.asp" value="Submit as admin" />
<br />
<input type="submit" formnovalidate="true" value="Submit without validation" />
<br />
</form>

注: これらのプロパティは、さまざまな送信ボタンを作成する場合に役立ちます。

高さと幅の属性

高さと幅の属性は、画像タイプの入力タグに使用される画像の高さと幅を指定します。

注: 高さと幅の属性は、画像タイプの タグにのみ適用されます。

<input type="image" src="img_submit.gif" width="99" height="99" />

list属性

list属性は入力フィールドのデータリストを指定します。 datalist は、入力フィールドのオプションのリストです。

注: list 属性は、テキスト、検索、URL、電話、電子メール、日付ピッカー、数値、範囲、色などの タグのタイプに適用されます。

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3school.com.cn" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

min、max、step 属性

min、max、step 属性は、数値または日付を含む入力タイプの制限 (制約) を指定するために使用されます。

max 属性は、入力フィールドに許可される最大値を指定します。

min 属性は、入力フィールドに許可される最小値を指定します。

step 属性は、入力フィールドの有効な数値間隔を指定します (step="3" の場合、有効な数値は -3、0、3、6 などです)。

注: min、max、step 属性は、日付ピッカー、数値、範囲の タグのタイプに適用されます。

次の例は、0 から 10 までの値を 3 ステップで受け入れる数値フィールドを示しています (つまり、有効な値は 0、3、6、9 です):

Points: <input type="number" name="points" min="0" max="10" step="3" />

複数属性

複数属性入力フィールドで複数の値を選択できることを指定します。

注: multiple 属性は、電子メールとファイルの タグのタイプに適用されます。

Select images: <input type="file" name="img" multiple="multiple" />

novalidate 属性

novalidate 属性は、フォームの送信時にフォームまたは入力フィールドを検証しないことを指定します。

注: novalidate 属性は、 および次の種類の タグに適用されます: テキスト、検索、URL、電話、電子メール、パスワード、日付ピッカー、範囲および色。

pattern 属性は、入力フィールドの検証に使用されるパターンを指定します。 パターンは正規表現です。正規表現については、JavaScript チュートリアルで学習できます。

注: pattern 属性は、テキスト、検索、URL、電話、メール、パスワードの タグのタイプに適用されます。

次の例は、3 文字のみを含めることができるテキスト フィールド (数字と特殊文字を除く) を示しています:

<form action="demo_form.asp" method="get" novalidate="true">
E-mail: <input type="email" name="user_email" />
<input type="submit" />
</form>

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

注：placeholder 属性适用于以下类型的 标签：text, search, url, telephone, email 以及 password。

提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

<input type="search" name="user_search"  placeholder="Search php" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

注：required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

Name: <input type="text" name="usr_name" required="required" />

【相关推荐】

html的基础元素，让你零基础学习HTML

HTML和HTML5的发展历史

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