HTML 入門トップページ


目次

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

フォームを使ってみよう

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

選択リスト

select コントロールを使うと,多数のリストから一つを選ぶことができます.

index.html(抜粋)
<form>
  <div>
    <select name="select1">
      <option value="1">オプション項目1</option>
      <option value="2">オプション項目2</option>
      <option value="3">オプション項目3</option>
      <option value="4">オプション項目4</option>
      <option value="5">オプション項目5</option>
    </select>
  </div>
  <div><button>送信</button></div>
</form>

ブラウザでの表示結果

多数のリストから複数個を選択できるようにするには multiple 属性を指定します.このとき,マウスのドラッグで範囲を選択できます.あるいは始点を選択した後,Shift キーを押しながら終点をクリックして範囲を選択します.さらに,Ctrl(Mac では )キーを押しながら個別に選択することもできます.ただし,このような複数項目の選択を問題なく利用できるユーザは決して多くないことも注意しなければなりません.

index.html(抜粋)
<form>
  <div>
    <select name="select2" multiple size="5">
      <option value="1">オプション項目1</option>
      <option value="2">オプション項目2</option>
      <option value="3">オプション項目3</option>
      <option value="4">オプション項目4</option>
      <option value="5">オプション項目5</option>
    </select>
  </div>
  <div><button>送信</button></div>
</form>

ブラウザでの表示結果

目次に戻る