HTML入力：ステップバイステップガイド

<form>
	... Form elements ...
</form>

タグ内は、フォーム内の要素が格納される場所です。フォーム要素には、テキストフィールド、送信ボタン、ラジオボタン、複数行のテキストボックス、およびHTMLで受け入れられるその他の種類の入力データを含めることができます。

HTML入力

要素は、訪問者がデータを送信できるフォームフィールドを定義します。 は、日付ピッカー、チェックボックス、ボタン、ファイルアップローダーなどのフィールドをサポートします。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

要素の構文は次のとおりです。

<input type="inputType">

要素はいくつかの属性を受け入れますが、指定する必要のある主な属性はtype属性です。 type属性を指定しない場合、要素はWebページに表示されません。これは、要素がデフォルトで空であるためです。

HTMLのタグがどのように機能するかを示すためにいくつかの例を見ていきましょう。

地元のサンドイッチとサラダの店、スーのサラダのフォームを作成するように依頼されました。このフォームでは、顧客がストアでの経験に基づいてフィードバックを送信できるようにする必要があります。作成を依頼されたフォームは、次のものを受け入れる必要があります：

• 顧客の名前（テキストとして）
• 顧客がストアのポイントプログラムの加入者であるかどうかを示すチェックボックス（チェックボックス）
• 店舗での顧客の経験に基づく1〜5の評価（数値として）

HTML入力タイプ

タグは、さまざまな入力タイプを受け入れます。入力タイプは、「type」属性を使用して指定されます。一般的な入力タイプには、ボタン、日付ピッカー、パスワードフィールド、テキストフィールドなどがあります。

タグで使用される一般的なフォームコントロール入力タイプの簡単なリストは次のとおりです。

• ボタン
• ファイル
• チェックボックス
• パスワード
• 番号
• ラジオ
• 送信
• テキスト（テキスト入力タイプ）
• url
• 日付（日付と時刻のピッカー）
• 画像
• メール（メールアドレス入力制御）

入力タイプのHTMLの例

HTMLタグを使用していくつかのフォームフィールドを作成しましょう。

テキストフィールド

要素は、HTMLでテキストフィールドを作成するために使用されます。顧客に名前を尋ねるテキストフィールドを作成するとします。このコードを使用してこれを行うことができます：

<input type="text" placeholder="What is your name?">

このコードでは、2つの属性を持つテキストフィールドを作成しました。 type属性はtextに設定されています。これは、フォームがテキスト入力を受け入れることができることを意味します。プレースホルダー属性には、「あなたの名前は何ですか？」という値が割り当てられています。

このテキストは、ユーザーがフィールドにテキストを入力し始めるまで、プレースホルダー値として表示されます。

コードは次のようになります：

<input type="text" placeholder="What is your name?">

ご覧のとおり、プレースホルダー値What is your name?を使用してテキストフィールドを作成しました。

チェックボックス

HTMLでは、チェックボックスはチェックボックスタイプの入力としてマークアップされます：

<input type="checkbox" id="loyalty" name="loyalty" value="Yes"> 
<label for="loyalty">Are you a subscriber to our loyalty program?</label>

このコードは、「はい」というテキストを表示するチェックボックスボタンを作成します。チェックボックスをクリックすると、強調表示されます。

チェックボックスには、「あなたは私たちのロイヤルティプログラムの加入者ですか？」というラベルが付いています。ラベルをクリックすると、チェックボックスが切り替わります。ラベル入力タイプは、読者がフォームの内容を簡単に見つけられるようにするため、アクセシビリティに不可欠です。

HTMLラベルの詳細については、HTMLのタグに関するガイドをご覧ください。

チェックボックスには、いくつかの属性が関連付けられています。

• タイプ属性。 入力タイプをチェックボックスに設定する必要があります。
• ID。 IDは、ファイルに固有である必要があることを忘れないでください。
• 名前と値。 名前と値は、フォームの送信後に収集されたデータを処理できるように割り当てると便利です。
• 確認済み。 チェックされた属性は、何にも割り当てられていないため、ブール属性と呼ばれます。そこでチェックすると、自動的にtrueに設定されます。デフォルトはfalseであるため、チェックボックスをオンにする場合にのみ設定する必要があります。

ラジオボタン

要素は、HTMLでラジオボタンを作成するために使用されます。

「ラジオボタン」という用語は、奇妙なことに、自動車業界に由来しています。カーステレオには、一度に1つのボタンしか押すことができない物理的なボタンがありました。別の選択を押すと、前のボタンの選択が解除されます。

チェックボックスと一連のラジオボタンの使用の違いは、ラジオボタンでは1つの選択肢しか選択できないことです。選択を確認すると、残りのボタンが無効になるため、複数のラジオボタンを選択できなくなります。一方、チェックボックスには複数の選択肢があります。

チェックボックス入力をラジオボタン入力に変更するには、2つのことを行う必要があります。まず、入力タイプを無線に変更します。最後に、名前の値がすべてのラジオボタンで一致していることを確認します。これは、ボタンが選択されたときに残りのボタンを無効にするものです。

ユーザーがSue’sSaladsの顧客ロイヤルティプログラムのサブスクライバーであるかどうかを尋ねるフィールドを作成するとします。次のコードを使用してフィールドを作成できます：

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes" />
<label for="no">No</label>
<input type="radio" value="no" id="no" />

コードは次のようになります：

<label for="yes">Yes</label>
<input type="radio" value="yes" id="yes">
<label for="no">No</label>
<input type="radio" value="no" id="no">

このコードでは、2つのラジオボタンを作成しました。最初のラジオボタンには「はい」というラベルが割り当てられ、値は「はい」になります。 2番目のラジオボタンにはラベルNoが割り当てられ、値はnoです。

数値フィールド

要素は、フォームへの数値入力を受け入れるために使用されます。

Sue’sSaladsの顧客に店での経験を評価するように依頼するフォームを作成したいとします。顧客は1から5までの数値グレードを与える必要があります。次のコードを使用してこのデータを収集するWebフォームを作成できます。

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5" />

コードは次のようになります：

<label>How positive was your experience at Sue's Salads (between 1 and 5)?</label>
<input type="number" min="1" max="5">

1から5までの任意の数値を受け入れるフォームフィールドを作成しました。このフィールドは数値のみを受け入れることができます。ユーザーがフィールドにテキストを入力しようとすると、テキストは処理されません。

さらに、このフォームフィールドには数値タイプがあるため、ボックス内に2つの小さな矢印が表示されます。上矢印をクリックすると、フィールドの値が1増加します。下矢印をクリックすると、フィールドの値が1減少します。

結論

HTMLのタグは、フォームへのユーザー入力を受け入れるために使用されます。 タグは、数値、テキスト、日付、yes / no応答、およびその他のタイプのデータを受け入れるために使用できます。

このチュートリアルでは、例を参照して、HTMLのタグの使用方法、およびタグで使用できる属性について説明しました。これで、タグを使用してHTMLプロのようなフォームフィールド要素を作成する準備が整いました。

HTMLについて詳しく知りたい場合は、HTMLの学習方法に関する完全なガイドをご覧ください。