フォーム


フォームとは

フォームとは,ブラウザからサーバに対して情報の受け渡すことを目的としたHTMLの機能です。静的なHTMLファイルとして記述する時には,<form>~</form>の中に,次のような入力用の項目を入れ込んで構築していきます。


フォームの例


上記のフォームに内容を記入・選択して「送信する」ボタンをクリックすると,formタグのaction属性に指定したURLに,このフォーム内で使用されるinputタグの記述内容がまとめて送信されます。

フォーム内で使用されるinputタグは,必ずしもformタグ内で使用する必要はなく,独立して使用することも可能です。その場合,入力値をサーバに渡す時にはJavaScript(AJAXなど)を用いてinputタグごとに渡し方を記述しなければなりません。

フォームに使用する要素

form要素: <form ... > ... </form>

action属性
入力値の送信場所を指定します。省略すると,現在アクセスしているURLを指定したことになります。
method属性
送信方法を指定します。この方法には2種類あり,入力値にget(大文字も可),もしくはpostを入力します。GETメソッドはURLに'変数名(name属性で指定) = 値'という形で表現され,POSTメソッドは環境変数を通じて変数名と値がサーバに渡されます。下記の動作例で確認して下さい。

GETとPOSTの動作例

form要素内に記述する入力用の要素: <input ... />

フォーム内に記述する入力用のinput要素には次の属性を指定します。

type属性
フォームの入力方式を決定することができます。入力方式としては下記のものがあります。
  • テキストボックス
  • パスワードボックス
  • ボタン
  • ラジオボタン
  • チェックボックス
  • リストメニュー
  • ファイルメニュー
  • テキストエリア
また,HTML5で追加された入力方式として,下記のものがあります。
  • 日付(date)
  • ローカル時間(datetime-local)
  • 時刻(time)
  • 月(month)
  • 週(week)
  • カラー(色, color)
  • 番号(number)
  • スライドバー(範囲, range)
  • URL(url)
  • メールアドレス(email)
  • 検索(search)
name属性
フォームの入力内容のやり取りを行う際の目印になります。 特にラジオボタンではnameを同じにすることでグループ化しているので注意が必要になります。
value属性
初期入力値を設定します。 選択するチェックボックスやラジオボタンではここで入力しなければ入力値が空になってしまいます。

ボタン用のinputタグ

入力内容に対してアクションを起こすためのボタンとして使います。属性値type="値"を設定してボタンの用途を決定します。

type="submit"
所謂「送信」ボタンです。フォーム内容を送信する際に使用します。
type="reset"
入力内容をキャンセルし初期化します。

inputタグを使わない入力要素としては下記のものがあります。inputタグとは異なる属性値を使用する場合があります。

textarea要素

テキストエリアの入力方式を使うことができます。

select要素

ファイルメニューの入力方式を使うことができ,メニュー欄を作成する際にはoption要素が必要となります。


form要素内に記述する入力用の要素の例

以下では今後使用する機会の多いform要素内の入力用要素の具体例を見ていくことにしましょう。入力用要素はformタグに囲まれていなくても表示できますが,そのままでは入力された値を送信することはできません。下記の例は説明のため,form要素はカットしてあります。

テキストボックス: <input type="text" ... />

短い分を入力する基本的な形式で,typeを省略することも可能です。

使用属性

テキストボックスの例

HTMLファイル

パスワード: <input type="password" ... />

基本的にはテキストボックスと同じ機能を持ちますが,入力された文字列を隠すことができます。

パスワードの例

HTMLファイル

ボタン: <input type="button" ... />

送信(submit),リセット(reset)とも異なる,単なるボタンです。

ボタンの例

HTMLファイル

ラジオボタン:<input type="radio" ... />

選択肢を一つだけ選んでほしい時に使用します。

使用属性

ラジオボタンの例

 Sample01
 Sample02

HTMLファイル

チェックボックス:<input type="checkbox" ... />

チェックをした複数の内容を送信することができます。

使用属性

チェックボックスの例

HTMLファイル

セレクト: <select ... > ~<option ... >~</option> ~ </select>

ドロップダウンリストの中に示した選択肢から一つあるいは複数選ばせる際に使用します。

使用タグと属性

タグ:select(囲まれた要素全体がリストボックスの内容になる) タグ:option(ドロップダウンされる1項目を作る)

セレクトの例

HTMLファイル

ファイルメニュー: <input type="file" ... />

ローカルの既存ファイルを選択し,選択したファイルを送信することができるようにするメニューです。ファイルメニューを使う際は,form要素にenctype属性を必ず指定する必要があります。

使用属性 タグ:form タグ:input

ファイルメニューの例

HTMLファイル

テキストエリア:<textarea ...>~</textarea>

縦方向(rows)と横方向(cols)をそれぞれ指定して長文を入力できるようにしたテキストボックスです。初期入力値を設定する場合は,

<textarea ...>この部分に初期入力値を入れる</textarea>
のように書いておきます。

使用属性

テキストエリアの例

HTMLファイル

Copyright (c) 2014-2022 幸谷研究室 @ 静岡理工科大学 All rights reserved.
Copyright (c) 2014-2022 T.Kouya Laboratory @ Shizuoka Institute of Science and Technology. All rights reserved.