HTML 入門トップページ

« 戻る 次へ »

目次

  1. ホームページ作成はじめの一歩
  2. HTMLの基礎
  3. 基礎的なタグをマスターしよう
  4. HTML 文書を検証してみよう
  5. スタイルシート
  6. フォームを使ってみよう
    1. テキストコントール
    2. テキストエリア
    3. チェックボックスとラジオボタン （ チェックボックス | ラジオボタン ）
    4. 選択リスト
  7. 参考サイト

フォームを使ってみよう

Webページの利用者が何らかのデータを入力して送信するときにはフォームを配置します．実際に利用者が入力したデータを受け取って処理をするためにはそのためのプログラムを記述する必要があります．

チェックボックスとラジオボタン

目次に戻る

チェックボックス

1個以上の選択肢について個別に On/Off を切り替えるためのコントロールとしてチェックボックスがあります．次のように入力するとチェックボックスを配置できますが，隣の文字列をクリック（タップ）しても On/Off を切り替えられず，切り替えるためにはチェックボックスそのものをクリック（タップ）しなけばなりません．これでは使い勝手が非常に悪いでしょう． 

index.html（抜粋）
<form>
  <div><input type="checkbox" name="check1">オプション項目1</div>
  <div><input type="checkbox" name="check2">オプション項目2</div>
  <div><button>送信</button></div>
</form>

ブラウザでの表示結果

オプション項目1
オプション項目2

文字列をクリック（タップ）しても On/Off が切り替えられるようにするためには <label> を使います．さらに送信ボタンを押したときにどのようなパラメータが URL に含まれて送信されているかについて確認するようにしてください． 

index.html（抜粋）
<form>
  <div>
    <label><input type="checkbox" name="check1">オプション項目1</label>
  </div>
  <div>
    <label><input type="checkbox" name="check2">オプション項目2</label>
  </div>
  <div><button>送信</button></div>
</form>

ブラウザでの表示結果

目次に戻る

ラジオボタン

複数の選択肢の中から1つだけを選ぶようにするためにはラジオボタンコントロールを使用します．このとき，同じ name 属性を指定したコントロールが一つのグループになります．また，各選択肢には異なる value 属性値を指定することにも注意してください． 

index.html（抜粋）
<form>
  <div>
    <label><input type="radio" name="radio1" value="1">オプション項目1</label>
  </div>
  <div>
    <label><input type="radio" name="radio1" value="2">オプション項目2</label>
  </div>
  <div><button>送信</button></div>
</form>

ブラウザでの表示結果

ページを読み込んだときにあらかじめ一つの選択肢を選択しておくためには checked 属性を指定すると良いでしょう．なお，checked は論理属性ですので，checked="checked" と書くべきところを checked のように省略することが可能です． 

index.html（抜粋）
<form>
  <div>
    <label><input type="radio" name="radio2" value="1">オプション項目1</label>
  </div>
  <div>
    <label><input type="radio" name="radio2" value="2" checked>オプション項目2</label>
  </div>
  <div>
    <label><input type="radio" name="radio2" value="3">オプション項目3</label>
  </div>
  <div><button>送信</button></div>
</form>

ブラウザでの表示結果

目次に戻る

« 戻る 次へ »