HTML5 の入力タイプにはどのような属性が含まれますか?

HTML5 の入力タイプには、電子メール、URL、番号、範囲、検索などの属性が含まれます。各属性には異なる機能があります

今日は、HTML5 の新しい入力タイプ input を紹介します。これらの新しい機能は、より多くの機能を実装し、より良いユーザー エクスペリエンスを提供するのに大いに役立ちます。次に、この記事で入力タイプの使用方法を詳しく紹介します。

【おすすめコース: HTML5 チュートリアル】

##入力タイプ属性

(1) 電子メール属性: 電子メール アドレスを含む入力フィールドに適しています。フォームを送信するときに、電子メール フィールドの値が自動的に検証されます。 。

間違った値を入力すると、正しい形式を入力するよう自動的に求められ、不足しているものが通知されます

<form action="#" method="get">
E-mail:<input type="email" name="email">
<input type="submit">
</form>

レンダリング

(2) url 属性: URL アドレスを含む入力フィールドに適用されます。 URL フィールドの値は、フォームの送信時に自動的に検証されます。

入力エラーが表示される場合はURLを入力してください

<form action="#" method="get">
URL:<input type="url" name="url">
<input type="submit">
</form>

レンダリング

(3)数値属性：数値を含む入力に適しています。値領域。受け入れられる数値に制限を設定することもできます。

max: 最大許容数値を指します。

min: 最小許容数値を指します。

step: 法定デジタル間隔を指します。例: step=3 は、デジタル間隔が 3 であることを意味します

value: デフォルト値

<form action="#" method="get">
		Points: <input type="number" name="points" min="1" max="10" />
		<input type="submit">
	</form>

Rendering

( 4) Range 属性: 一定の範囲内の数値を含む入力フィールドに適用されます。

max: 許容される最大値

min: 許容される最小値

step: 許可される有効な数値間隔

value: デフォルト値

<form action="#" method="get">
Range: <input type="range" name="points" min="1" max="10" />
<input type="submit">
</form>

(5) 検索プロパティ: サイト検索や Google 検索などの検索ドメインに適用されます。

検索フィールドは通常のテキスト フィールドとして表示されます

<form action="#" method="get">
Search: <input type="search" name="points" min="1" max="10" />
<input type="submit">
</form>

レンダリング

概要: 上記はすべてです記事の内容 この記事が HTML5 の入力型を皆さんにある程度理解してもらい、実際のケースに適用できることを願っています。

以上がHTML5 の入力タイプにはどのような属性が含まれますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。