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

<form>エレメント

 <form>エレメントは、サーバーにデータ送信をするためのエレメントです。
 データの入力は<input><select><textarea><button>によって受け付けます。 送信したいデータの範囲ごとに<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>の属性で指定します。

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

JavaScript

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

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

属性

 グローバル属性も持ちます。以下に主な属性のみを示します。

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

 target 属性も設定できます。target 属性に指定できる値は以下があります。

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

ボタンの追加

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

methodについて

 postがdefaultです。データを隠すことができます。ファイルのアップロードでは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>部品を使います。 <form>部品の内容は以下です。

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

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

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

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