もじゃもじゃラボ/HTML超入門！押さえておきたいマークアップの基本/タグの種類/フォーム
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

フォーム

HTML超入門！押さえておきたいマークアップの基本
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
Javaマスターへの第一歩！プログラミングの基本を学びましょう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
このチャプターの目次

フォーム

入力したデータの送信に使うフォームについて解説していきたいと思います。いくつかのタグを組み合わせて使います。

form

用途入力フォームの基点（ルート）
書式サンプルソース参照
入力フォームの基点となります。他の要素の親要素となります。

フォームを構成する様々な要素

要素見た目の形状
1行テキストの入力フィールド
パスワードの入力フィールド
メールアドレスの入力フィールド
数値の入力フィールド
日付の入力フィールド
チェックボックス 複数のチェックボックスを1つのグループにするには、name属性を同じ値にする。
ラジオボタン 複数のラジオボタンを1つのグループにするには、name属性を同じ値にする。
アップロードするファイルの選択
複数の選択肢から一つを選択するプルダウン形式のコントロール 選択肢はoptionタグにて設定する。
複数行テキストの入力フィールド

フォームに入力された値を送信する。
formタグの中には、まずinputタグがあります。type属性に指定する値によって表示形式が変わります。type属性に"text"を指定すると、1行入力のテキストボックスが表示されます。
passwordと指定すると、テキストボックスに入力した値は人には見えないように表示されます。
checkboxは、値を選択したり選択を外したりするコントロールです。複数選択することも可能です。
radioは、複数の選択肢の中から値を1つだけ選ぶためのコントロールです。選択肢を変更すると、その前に選択していたものは解除されます。
type="file"は、コンピュータからファイルを選択して送信したい場合に使用します。"ファイルを選択"ボタンをクリックすると、ファイルを選択するためのダイアログが表示されます。
その他には、以下のような種類の入力コントロールがあります。
      • メールアドレス形式のデータを入力するためのコントロールです。
      • 数値を入力するためのコントロールです。
      • 日付を入力するためのコントロールです。
このように、inputタグは様々なtype属性の値が用意されていて、その値によって見た目と役割が変わるタグです。
続いてselectタグです。子要素にoptionタグを使用して選択肢を指定します。プルダウン形式のコントロールです。
textareaです。長文を入力するような時に使います。改行することも可能です。
最後に送信ボタンです。入力した値を送るという役割があります。2種類の書き方があります。inputタグを使うパターンです。type属性にsubmitと指定します。また、ボタンのキャプションはvalue属性に書いたものが使われます。もう一つは、buttonタグです。buttonタグ自体はフォーム以外のところでも使われることがありますが、type属性をsubmitにするとinput type=“submit”と同じ役割になります（省略することも可能です）。ボタンのキャプションはvalue属性ではなく、開始タグと、終了タグの間の中身に書きます。
最後に送信ボタンです。入力した値を送信する役割を果たします。2つの方法で記述することができます。
  • inputタグを使用する方法
    • type属性にsubmitを指定します。
    • ボタンのキャプションはvalue属性に指定したテキストが表示されます。
  • buttonタグを使用する方法
    • buttonタグはフォーム以外の場所でも使用されることがありますが、type属性をsubmitにするとと同じ役割を果たします（省略も可能です）。
    • ボタンのキャプションはvalue属性ではなく、開始タグと終了タグの間に書きます。

サンプルコード

チェックボックスの構造

チェックボックスは、複数の選択肢から値を選んだり、選択を外したりするコントロールです。複数選択することも可能です。以下に、タグの書式とコントロールの構造について記述します。

タグの書式

チェックボックスを表示するにはinputタグを使用し、type属性の値をcheckboxとします。ブラウザの表示は以下の2つの構造に分かれます。
  1. チェックボックスのコントロール
  1. 選択肢のキャプション
HTMLタグでは、以下のように記述します。
チェックボックスのコントロール①と、選択肢のキャプション②は、別のものです。①はinputタグですが、②はただのテキストです。キャプションをクリックしても、チェックボックスのコントロールは選択状態にはなりません。①の部分しかクリックできないため、マウスで操作するには不便です。これを改善し、選択肢のキャプション②をクリックしても、選択肢から値を選んだり、選択を外したりできるようにするには、以下のように記述します。
複数の選択肢がある場合には、以下のように記述します。

ラジオボタンの構造

ラジオボタンは、複数の選択肢から1つの値を選ぶためのコントロールです。以下に、タグの書式とコントロールの構造について記述します。

タグの書式

ラジオボタンを表示するにはinputタグを使用し、type属性の値をradioとします。ブラウザの表示は以下の2つの構造に分かれます。
  1. ラジオボタンのコントロール
  1. 選択肢のキャプション
HTMLタグでは、以下のように記述します。
チェックボックスと同様に、ラジオボタンのコントロール①と選択肢のキャプション②は異なるものです。①はinputタグですが、②はただのテキストです。キャプションをクリックしても、ラジオボタンは選択状態になりません。これを改善し、選択肢のキャプション②をクリックしても選択状態になるようにするには、以下のように記述します。
複数の選択肢がある場合には、以下のように記述します。