フォームとは
フォームとは，ブラウザからサーバに対して情報の受け渡すことを目的とした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メソッドは環境変数を通じて変数名と値がサーバに渡されます。下記の動作例で確認して下さい。
form要素内に記述する入力用の要素: <input ... />
フォーム内に記述する入力用のinput要素には次の属性を指定します。
- type属性
- フォームの入力方式を決定することができます。入力方式としては下記のものがあります。
- テキストボックス
- パスワードボックス
- ボタン
- ラジオボタン
- チェックボックス
- リストメニュー
- ファイルメニュー
- テキストエリア
- 日付(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を省略することも可能です。
使用属性
type="text"：テキストボックス形式であることを示すname：送信の目印となる名前を決めるvalue：初期入力値を設定するsize：テキストボックスの表示サイズを設定するmaxlength：入力最大文字数を設定する
テキストボックスの例
HTMLファイル
パスワード: <input type="password" ... />
基本的にはテキストボックスと同じ機能を持ちますが，入力された文字列を隠すことができます。
パスワードの例
HTMLファイル
ボタン: <input type="button" ... />
送信(submit)，リセット(reset)とも異なる，単なるボタンです。
ボタンの例
HTMLファイル
ラジオボタン:<input type="radio" ... />
選択肢を一つだけ選んでほしい時に使用します。
使用属性
type="radio"：ラジオボタン形式であることを示すname：送信の目印となる名前を決めるvalue：入力値を設定する(画面表示はされません)checked: 最初から選択された状態にする
ラジオボタンの例
Sample01
Sample02
チェックボックス:<input type="checkbox" ... />
チェックをした複数の内容を送信することができます。
使用属性
type="checkbox"：チェックボックス形式であることを示すname：送信の目印となる名前を決めるvalue：入力値を設定する(画面表示はされません)checked:最初から選択された状態にする
チェックボックスの例
HTMLファイル
セレクト: <select ... > ～<option ... >～</option> ～ </select>
ドロップダウンリストの中に示した選択肢から一つあるいは複数選ばせる際に使用します。
使用タグと属性
タグ：select(囲まれた要素全体がリストボックスの内容になる)
name：送信の目印となる名前を決める
option(ドロップダウンされる1項目を作る)
value：入力値を設定
セレクトの例
HTMLファイル
ファイルメニュー: <input type="file" ... />
ローカルの既存ファイルを選択し，選択したファイルを送信することができるようにするメニューです。ファイルメニューを使う際は，form要素にenctype属性を必ず指定する必要があります。
enctype="multipart/form-data"：ファイルを送信する際には必ず必要な属性
ファイルをコード化し，文字情報にする
type="file"：ファイルを選択し，送信することができるようにする/li>name：送信の目印となる名前を決めるsize：フォームのサイズを指定する
ファイルメニューの例
HTMLファイル
テキストエリア:<textarea ...>～</textarea>
縦方向(rows)と横方向(cols)をそれぞれ指定して長文を入力できるようにしたテキストボックスです。初期入力値を設定する場合は，
使用属性
name=""：送信の目印となる名前を決めるcols=""：属性値に数字を入れることでエリアの横の長さを決めるrows=""：属性値に数字を入れることでエリアの縦の長さを決める
テキストエリアの例
HTMLファイル
