備忘録的プログラミングリファレンス

form タグエレメント

 form タグエレメントは、ユーザーが入力したデータをサーバーに送信をするための HTML タグエレメントです。
 データの入力は <input><select><textarea><button> によって受け付けます。

 form エレメントで送信するデータは受け取る側で処理できるようにしておかなければなりません。詳しくはform 処理 サーバーなどで調べてみてください。

 送信したいデータの範囲ごとに <form>、 </form> で囲み、<form> にはサーバーにデータを送る手段を指定します。

form タグエレメント
<form name="example_form" action="./" method="post" enctype="application/x-www-form-urlencoded">
 <fieldset><legend>example form</legend>
  <label>予定名</label><input name="plan" type="text" value="" placeholder="予定名"></input>
  <label>予定日</label><input type="date" name="expl_date"></input>
  <input type="submit">
 </fieldset>
</form>
form タグエレメント表示例
example form

 送信先や POST 、GET といったサーバーにデータを送る手段は、<form>の属性で指定します。以下の属性を参照してください。

 サーバーにデータを送信する場合には、<input><select><textarea> といったデータを受け付けるエレメントに name 属性を設定します。
 name の値と value の値の組み合わせがサーバーに送信されます。

 <form> の送信内容を分けるためには <fieldset> を利用します。

属性

 以下に主な属性のみを示します。

 特に必要なのは、form の送信先であるaction、送信内容を隠すか( POST )見える状態で送るか( GET )のmethod属性です。

AttributeValueExtra information
name*必須。タグエレメントを特定するための属性です。
idcssにも使えます。エレメントをユニークとします。
classcssに使います。同名のclassは同じスタイルが適応されます。
action送信先のURL(例:cgi-bin/***.cgi)です。
method データの送信形式
enctype エンコード形式(送信するデータのmimeタイプ)

 target 属性も設定できます。target 属性によって送信結果をその指定 Window に表示できます。target 属性に指定できる値は以下があります。

  • _blank... 別タブまたはウィンドウに表示
  • _self... リンク元に表示
  • _parent... ひとつ上の親フレームに表示
  • _top... フレームがあれば全て解除して表示
Window<iframe> の name 属性の値を指定することもできます。

ボタンの追加

submitボタン
作成する 作成しない
"

methodについて

 POST と GET があり、POST が default です。
 POST は送信データを隠すことができます。ファイルのアップロードでは POST を使います。
 GET は URL に追記する形で送信します。そのために送信する内容が丸見えになります。

enctype について

 application/x-www-form-urlencoded が default です。URL をエンコードします。
 ファイルのアップロード用には multipart/form-data にします。その場合は、サーバー側にもファイルを受け付けられるようにする必要があります。
 text/plain はスペースが + に置き換わるだけで URL エンコードなしです。

データ入力用エレメント <input>、<select>、<textarea>、<button>

 データ入力には <input><select><textarea> といった <form> 部品を使います。内容は以下です。

  • <input>... テキスト(改行を含まない)、数値、日時、送信ボタンなど
  • <select>... 一覧から選択入力
  • <textarea>... 改行を含むテキスト

 その他に汎用のボタン <button>、項目名を付ける <label> といった <form> 部品があります。

 <form> 内を内容ごとに分けるには<fieldset>を使います。 <fieldset>にはdisabled属性があります。disabledが指定された<fieldset>内の内容はサーバーに送信されません。

 データの送信はスクリプトでもできます。スクリプトでは非同期通信が可能で、javascriptでは ajax とも呼ばれていますが、サーバー側で非同期に対応する必要があります。

JavaScript

 <form>を定義したインターフェイスは、HTMLFormElement です。詳しくは、HTMLFormElement を参照してください。

 <form>内の子エレメント群については、HTMLFormControlsCollection を参照してください。