HTML5 用に 8 つの新しいタイプの INPUT 入力を追加しました

この記事では、HTML5 の 8 つの新しい INPUT 入力タイプを主に紹介します。この 8 つの新しい入力タイプは、それぞれ、メール型、URL 型、数値型、日付型、検索型、電話型です。 、必要な友人は、既存の入力タイプの HTML コード例を参照できます:

文本域 <input type="text">
单选按钮 <input type="radio">
复选框 <input type="checkbox">
下拉列表 <select><option>
密码域 <input type="password">
提交按钮 <input type="submit">
可单击按钮 <input type="button">
图像按钮 <input type="image">
隐藏域 <input type="hidden">
重置按钮 <input type="reset">
文件域 <input type="file">

HTML5 では、複数の新しいフォーム入力入力タイプが追加されており、これらの新しい要素を使用することで、より優れた入力制御と検証を実現できます。

1. メールタイプのアプリケーション
メールタイプの入力要素は、メールアドレスを入力するために特別に使用されるテキスト入力ボックスです。フォームが送信されると、メール入力ボックスの値が自動的に検証されます。

<input type="email" name="user_email" />

2. URL タイプのアプリケーション

url タイプの input 要素は、URL アドレスなどの特別なテキストを入力するためのテキスト ボックスを提供します。

<input type="url" name="user_url" />

3. 数値型アプリケーション

数値型入力要素は、数値を入力するためのテキスト ボックスを提供します。

<input type="number" name="number1" min="1" max="20" step="4" />

4. range型の応用

range型のinput要素は、Webページ上でスクロールバーとして表示される、一定範囲内の数値を含むテキストボックスを提供します。

<input type="range" name="range1" min="1" max="30" />

5.日付チェックアウト型アプリ

入力タイプHTMLコード機能説明

date <input type="date">

日、月、年を選択

month <input type="month">

月、年を選択

week <input type="week">

週と年を選択

time <input type="time">

時間（時間）を選択と分)

datetime <input type="datetime">

時間、日、月、年 (UTC 時間) を選択します

datetime-local
<input type="datetime-local"> 选取时间、日、月、年（本地时间）

6. 検索タイプのアプリケーション

検索タイプの入力要素には、検索キーワードを入力するためのテキスト ボックスが表示されます。

<input type="search" name="search1" />
input[type="search"]
{  
 -webkit-appearance:textfield;
 }

7. Tel タイプのアプリケーション

Tel タイプの入力要素は、電話番号を入力するための専用のテキスト ボックスを提供します。

<input type="tel" name="tel" />

8. カラー タイプ アプリケーション

カラー タイプ入力要素は、カラーを設定するために特別に使用されるテキスト ボックスを提供します。

<input type="color" name="color" />

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

HTML5 タッチ イベント

以上がHTML5 用に 8 つの新しいタイプの INPUT 入力を追加しましたの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。