HTMLチュートリアル

HTMLホーム HTMLの紹介 HTMLエディター HTMLベーシック HTML要素 HTML属性 HTML見出し HTML段落 HTMLスタイル HTMLフォーマット HTMLの引用 HTMLコメント HTMLの色 HTML CSS HTMLリンク HTML画像 HTMLファビコン HTMLテーブル HTMLリスト HTMLブロックとインライン HTMLクラス HTMLID HTMLIframe HTML JavaScript HTMLファイルパス HTMLヘッド HTMLレイアウト HTMLレスポンシブ HTMLコンピューターコード HTMLセマンティクス HTMLスタイルガイド HTMLエンティティ HTMLシンボル HTML絵文字 HTML文字セット HTMLURLエンコード HTMLとXHTML

HTMLフォーム

HTMLフォーム HTMLフォーム属性 HTMLフォーム要素 HTML入力タイプ HTML入力属性 HTML入力フォームの属性

HTMLグラフィックス

HTMLキャンバス HTML SVG

HTMLメディア

HTMLメディア HTMLビデオ HTMLオーディオ HTMLプラグイン HTML YouTube

HTML API

HTMLジオロケーション HTMLドラッグアンドドロップ HTMLWebストレージ HTMLWebワーカー HTML SSE

HTMLの

HTMLの例 HTMLクイズ HTML演習 HTML証明書 HTMLの概要 HTMLアクセシビリティ

HTMLリファレンス

HTMLタグリスト HTML属性 HTMLグローバル属性 HTMLブラウザのサポート HTMLイベント HTMLの色 HTMLキャンバス HTMLオーディオ/ビデオ HTMLDoctypes HTML文字セット HTMLURLエンコード HTML言語コード HTTPメッセージ HTTPメソッド PXからEMへのコンバーター キーボードショートカット

HTMLフォーム


HTMLフォームは、ユーザー入力を収集するために使用されます。ユーザー入力は、ほとんどの場合、処理のためにサーバーに送信されます。








<form>要素

HTML<form>要素は、ユーザー入力用のHTMLフォームを作成するために使用されます。

<form>
.
form elements
.
</form>

この<form>要素は、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなど、さまざまなタイプの入力要素のコンテナです。

この章では、さまざまなフォーム要素すべてについて説明します: HTMLフォーム要素


<input>要素

HTML<input>要素は、最もよく使用されるフォーム要素です。

要素は、属性<input>に応じてさまざまな方法で表示できます。type

ここではいくつかの例を示します。

タイプ 説明
<input type = "text"> 1行のテキスト入力フィールドを表示します
<input type = "radio"> ラジオボタンを表示します(多くの選択肢から1つを選択するため)
<input type = "checkbox"> チェックボックスを表示します(多くの選択肢から0個以上を選択するため)
<input type = "submit"> 送信ボタンを表示します(フォームを送信するため)
<input type = "button"> クリック可能なボタンを表示します

この章では、さまざまな入力タイプすべてについて説明します: HTML入力タイプ



テキストフィールド

<input type="text">、テキスト入力用の1行の入力フィールドを定義します。

テキストの入力フィールドを持つフォーム:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

上記のHTMLコードがブラウザに表示される方法は次のとおりです。

ファーストネーム:

苗字:

注:フォーム自体は表示されません。また、入力フィールドのデフォルトの幅は20文字であることに注意してください。


<label>要素

<label>上記の例の要素の使用に注意してください。

タグは、多くのフォーム要素の<label>ラベルを定義します。

この<label>要素は、ユーザーが入力要素にフォーカスするとスクリーンリーダーがラベルを読み上げるため、スクリーンリーダーのユーザーに役立ちます。

この<label>要素は、非常に小さな領域(ラジオボタンやチェックボックスなど)をクリックするのが難しいユーザーにも役立ちます。ユーザーが<label>要素内のテキストをクリックすると、ラジオボタン/チェックボックスが切り替わるためです。

タグのfor属性は、 それらをバインドするための要素の属性<label>と同じである必要があります。id<input>


ラジオボタン

<input type="radio">ラジオボタンを定義します。

ラジオボタンを使用すると、ユーザーは限られた数の選択肢から1つを選択できます。

ラジオボタン付きのフォーム:

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

上記のHTMLコードがブラウザに表示される方法は次のとおりです。

お気に入りのWeb言語を選択してください:




チェックボックス

チェックボックス<input type="checkbox">を定義します

チェックボックスを使用すると、ユーザーは限られた数の選択肢から0個以上のオプションを選択できます。

チェックボックスのあるフォーム:

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

上記のHTMLコードがブラウザに表示される方法は次のとおりです。




送信ボタン

<input type="submit">、フォームデータをフォームハンドラーに送信するためのボタンを定義します。

フォームハンドラーは通常、入力データを処理するためのスクリプトを含むサーバー上のファイルです。

フォームハンドラーは、フォームのaction 属性で指定されます。

送信ボタンのあるフォーム:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

上記のHTMLコードがブラウザに表示される方法は次のとおりです。

ファーストネーム:

苗字:



<input>の名前属性

各入力フィールドには、name送信する属性が必要であることに注意してください。

属性を省略するnameと、入力フィールドの値はまったく送信されません。

この例では、「名」入力フィールドの値は送信されません。 

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

HTML演習

エクササイズで自分をテストする

エクササイズ:

以下のフォームで、タイプが「button」で値が「OK」の入力フィールドを追加します。

<フォーム>
<>
</ form>