HTMLではHTMLフォームの重要な要素です。 input 要素の「type」属性にはさまざまなタイプがあり、情報フィールドを定義します。テキストボックスを与えるなど。
以下は、HTML のすべてのタイプの要素のリストです。
| type=' ' | 説明 |
|---|---|
| 文章 | 1 行のテキスト入力フィールドを定義します |
| パスワード | 1 行のパスワード入力フィールドを定義します |
| 提出する | フォームをサーバーに送信するための送信ボタンを定義します |
| リセット | フォーム内のすべての値をリセットするためのリセット ボタンを定義します。 |
| 無線 | オプションを 1 つ選択できるラジオ ボタンを定義します。 |
| チェックボックス | 複数のオプション フォームを選択できるチェックボックスを定義します。 |
| ボタン | イベントでタスクを実行するようにプログラムできる単純なプッシュ ボタンを定義します。 |
| ファイル | デバイスストレージからファイルを選択するように定義します。 |
| 画像 | グラフィカルな送信ボタンを定義します。 |
HTML5 では要素に新しい型が追加されました。以下はHTML5の要素の種類の一覧です。
| type=' ' | 説明 |
|---|---|
| 色 | 入力フィールドを特定の色で定義します。 |
| 日付 | 日付を選択するための入力フィールドを定義します。 |
| 日時ローカル | タイムゾーンなしの日付を入力するための入力フィールドを定義します。 |
| Eメール | 電子メール アドレスを入力するための入力フィールドを定義します。 |
| 月 | タイムゾーンなしで、月と年を使用してコントロールを定義します。 |
| 番号 | 数値を入力する入力フィールドを定義します。 |
| URL | URLを入力するフィールドを定義します |
| 週 | タイムゾーンなしで週と年を含む日付を入力するフィールドを定義します。 |
| 検索 | 検索文字列を入力するための 1 行のテキスト フィールドを定義します。 |
| 電話番号 | 電話番号を入力するための入力フィールドを定義します。 |
以下に要素の種類を例を挙げて説明します。
1.:
タイプ「text」の要素は、単一行の入力テキストフィールドを定義するために使用されます。
例：
Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p>今すぐテストしてください
出力：
入力「テキスト」タイプ:
の '文章' フィールドは 1 行の入力テキスト フィールドを定義します。
名を入力してください姓を入力してください
注記： デフォルトの最大文字長は 20 です。
2. :
「password」タイプの要素を使用すると、ユーザーは Web ページにパスワードを安全に入力できます。パスワードファイルに入力した文字列は「*」または「.」に変換され、他のユーザーは読み取れなくなります。
例：
Enter User name <br> <br> Enter Password <br> <br> <br>今すぐテストしてください
出力：
「パスワード」タイプを入力してください:
の 'パスワード' フィールドは、パスワードを安全に入力するための 1 行のパスワード入力フィールドを定義します。
ユーザーネームを入力してくださいパスワードを入力する
3.:
「submit」タイプの要素は、「click」イベントが発生したときにフォームをサーバーに送信するための送信ボタンを定義します。
例：
Enter User name <br> <br> Enter Password <br> <br> <br>今すぐテストしてください
出力：
システムソフトウェア
「送信」タイプを入力してください:
ユーザーネームを入力してくださいパスワードを入力する
送信ボタンをクリックすると、フォームがサーバーに送信され、ページが次の場所にリダイレクトされます。 アクション value。「action」属性については後の章で学びます
4.:
「リセット」タイプもボタンとして定義されていますが、ユーザーがクリック イベントを実行すると、デフォルトですべての入力値がリセットされます。
例：
User id: Password: <br> <br>今すぐテストしてください
出力：
入力「リセット」タイプ:
ユーザーID: パスワード:ユーザー ID とパスワードの入力値を変更してみて、[リセット] をクリックすると、入力フィールドがデフォルト値にリセットされます。
5.:
「radio」タイプはラジオ ボタンを定義し、関連するオプションのセットからオプションを選択できるようにします。一度に選択できるラジオ ボタン オプションは 1 つだけです。
例：
ご希望の色をお選びください
赤青
緑
ピンク
今すぐテストしてください
出力：
「無線」タイプを入力してください
ご希望の色をお選びください
赤青
緑
ピンク
6. :
「チェックボックス」タイプは、指定されたオプションから選択肢を選択するためにチェックを入れるかチェックを外すことができる四角いボックスとして表示されます。
注: 「ラジオ」ボタンはチェックボックスに似ていますが、両方のタイプには重要な違いがあります。ラジオ ボタンではユーザーは一度に 1 つのオプションのみを選択できますが、チェックボックスではユーザーは一度に 0 個から複数のオプションを選択できます。 。
例：
Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br>今すぐテストしてください
出力：
「チェックボックス」タイプを入力してください
登録用紙
あなたの名前を入力してください：あなたの好きなスポーツを選択してください
クリケットテニス
フットボール
野球
バドミントン
7。 ：
「ボタン」タイプは単純なプッシュ ボタンを定義します。これは、クリック イベントなどの任意のイベントの機能を制御するようにプログラムできます。
int を double java に変換する
注: 主に JavaScript で動作します。
例：
今すぐテストしてください
出力：
「ボタン」タイプを入力してください。
ボタンをクリックして結果を確認します。
注: 上記の例では、JS の「アラート」を使用しました。これについては、JS チュートリアルで学習します。ポップウィンドウを表示するために使用されます。
8. :
タイプ「file」の要素は、ユーザー デバイス ストレージから 1 つ以上のファイルを選択するために使用されます。ファイルを選択して送信すると、JS コードとファイル API を使用してこのファイルをサーバーにアップロードできます。
例：
Select file to upload:今すぐテストしてください
出力：
「ファイル」タイプを入力してください。
指定しない限り、任意のタイプのファイルを選択できます。選択したファイルは「ファイルを選択」オプションの横に表示されます
アップロードするファイルを選択してください:9. :
'image' タイプは、画像の形式で送信ボタンを表すために使用されます。
例：
<h2>Input 'image' type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br>
HTML5 で新たに追加された types 要素
1.:
タイプ「color」は、色を含む入力フィールドを定義するために使用されます。これにより、ユーザーはブラウザ上の視覚的なカラー インターフェイスによって色を指定できます。
PowerShell 以上
注: 「color」タイプは 16 進形式のカラー値のみをサポートしており、デフォルト値は #000000 (黒) です。
例：
Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick今すぐテストしてください
出力：
入力「色」タイプ:
お気に入りの色をお選びください:上クリック
ダウンクリック
注記： 「カラー」タイプのデフォルト値は #000000 (黒) です。 16 進形式のカラー値のみをサポートします。
2. :
「date」タイプの要素は入力フィールドを生成し、ユーザーが指定された形式で日付を入力できるようにします。ユーザーは、テキスト フィールドまたは日付ピッカー インターフェイスによって日付を入力できます。
例：
Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br>今すぐテストしてください
出力：
「日付」タイプを入力してください
開始日と終了日を選択します:開始日：
終了日：
3.:
「datetime-local」タイプの要素は、ユーザーがタイムゾーン情報なしで日付だけでなく現地時間の時と分を選択できるようにする入力フィールドを作成します。
例：
Select the meeting schedule: <br> <br> Select date & time: <br> <br>今すぐテストしてください
出力：
'datetime-local' タイプを入力してください
会議のスケジュールを選択します。日付と時刻を選択してください:
4.:
「電子メール」タイプは、ユーザーがパターン検証を使用して電子メール アドレスを入力できる入力フィールドを作成します。複数の属性を使用すると、ユーザーは複数の電子メール アドレスを入力できます。
例：
<b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b>今すぐテストしてください
出力：
「メール」タイプを入力してください
メールアドレスを入力してください注記： ユーザーは、次のようにカンマまたは空白で区切って複数の電子メール アドレスを入力することもできます。
複数のメールアドレスを入力してください5.:
「month」タイプは、ユーザーが「MM, YYYY」の形式で月と年を簡単に入力できる入力フィールドを作成します。MM は月の値を定義し、YYYY は年の値を定義します。新しい
文字列を文字Javaに変換します
例：
Enter your Birth Month-year:今すぐテストしてください
出力：
「月」タイプを入力してください:
あなたの誕生月-年を入力してください:6. :
要素タイプ番号により、ユーザーが数値を入力できる入力フィールドが作成されます。 min 属性と max 属性を使用して、最小値と最大値の入力を制限することもできます。
例：
Enter your age:今すぐテストしてください
出力：
「数値」タイプを入力してください
あなたの年齢を入力：注記： 50 ～ 80 の範囲で数値を入力できます。範囲以外の数値を入力するとエラーが表示されます。
7。 ：
「url」タイプの要素は、ユーザーが URL を入力できる入力フィールドを作成します。
例：
Enter your website URL: <br>今すぐテストしてください
出力：
「URL」タイプを入力してください
ウェブサイトの URL を入力してください:8. :
「week」と入力すると、ユーザーがタイムゾーンなしでドロップダウンカレンダーから週と年を選択できる入力フィールドが作成されます。
例：
<b>Select your best week of year:</b> <br> <br>今すぐテストしてください
出力：
「週」タイプを入力してください
一年で最も良い週を選択してください:9. :
「検索」タイプは、ユーザーが検索文字列を入力できる入力フィールドを作成します。これらは機能的にはテキスト入力タイプと対称ですが、スタイルが異なる場合があります。
例：
Search here:今すぐテストしてください
出力：
「検索」タイプを入力してください
検索：10. :
?tel? タイプの要素電話番号を入力するための入力フィールドを作成します。電話番号のパターンは世界中で異なる可能性があるため、「tel」タイプには電子メールなどのデフォルトの検証がありません。
例：
<b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br>今すぐテストしてください
出力：
「電話」タイプを入力してください
電話番号を入力してください(xxx-xxx-xxxxの形式):注記： ここでは、「パターン」と「必須」という 2 つの属性を使用しています。これにより、ユーザーは指定された形式で数値を入力できるようになり、入力フィールドに数値を入力する必要があります。