ITコラム

プログラミングノウハウ

2017.02.01

#HTML入門

HTML【フォーム】2～form要素の使い方

form要素は、フォームのデータ送信時の指定をする要素です。
form要素で送信先と送信方法を指定することが特に重要で、その他必要に応じて、データ形式、文字コード、オートコンプリート機能、バリデート機能などを指定することができます。
これらはすべて、form要素の属性を使って指定していきます。
今回は、form要素についてまとめたいと思います。

フォームについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

１．form要素とは
２．form要素の中にフォームの部品をまとめる
３．action属性で送信先のURLを指定
４．method属性で送信方法を指定
- method=”get”
- method=”post”
５．enctype属性でMIMEタイプを指定
６．HTML5からの変更点
７．form要素なしで部品だけ

１．form要素とは

form要素は、入力フォームを作成する要素です。
この要素内に、フォームを構成する各部品を配置していきます。
フォームの各部品は、form要素で囲んでまとまめるのが一般的ですが、HTML5から、部品をform要素の外に出すことも可能となりました。
また、データの送信を行わない場合はform要素自体が不要です。

使用する要素　：　form

使用する属性	action	送信先ファイルのURL
	method	データの送信方法（get か post）
	enctype	送信時のデータ形式
	accept-charse	送信時の文字コード
	novalidate	入力チェック (バリデート) せずに送信
	autocomplete	オートコンプリート機能のON、OFF
	name	フォームに固有の名前をつける
	target	結果を表示するウィンドウを指定

▲目次へ戻る

２．form要素の中にフォームの部品をまとめる

form要素の中に、フォームの部品になる要素（label要素やinput要素など）が入ります。

<form>
<p>お名前：<input　type="text"　name="name"></p>
<p>ご回答：
<label><input　type="radio"　name="reply"　value="回答1"　checked>　回答１</label>
<label><input　type="radio"　name="reply"　value="回答2">　回答2</label>
<label><input　type="radio"　name="reply"　value="回答3">　回答3</label>
</p>
<p><input type="submit" value="送信する"> ※このページに戻ります。サンプルなので。</p>
</form>

部品を<form>～</form>で囲みます。

ブラウザでは次のように表示されます。
HTML フォーム input要素 form要素の使い方プログラマカレッジ

▲目次へ戻る

３．action属性で送信先のURLを指定

action属性で、データの送信先のファイル（プログラム）のURLを指定します。
actionは、実行・作動という意味です。

<form　action="mailform.cgi"　method="post">

重要な役割を持っているaction属性ですが、HTML5から必須ではなくなりました。
action属性を指定しない場合は、送信先がそのHTMLファイル自身になります。

送信ボタン（input要素の type=”submit” や type=”image”と、button要素の type=”submit”）には、このform要素の action属性の指定を上書きするformaction属性があります。

▲目次へ戻る

４．method属性で送信方法を指定

method属性で送信方法を指定します。
methodは、メソッド、方法、方式という意味です。ここではHTTPメソッドのことです。

method=”get”

method=”get”がmethod属性のデフォルトです。
method属性を指定しない場合は”get”になります。
検索フォームでよく利用される方法です。

<form　action="mailform.cgi"　method="get">

<!--省略しても上記と同じです。-->
<form　action="mailform.cgi">

■get の特徴
action属性で指定されたURLの後に「?」が付いて、その後にクエリ（フォームの内容）が付けられて送信されます。
URLと連結されて送信されるので、データ自体がURLの一部となり、受け取ったサーバが、「?」の部分で分割して、クエリをURLのプログラムに渡す仕組みになっています。
このように、データがURLと繋がるので、長い（重い）データの送信には不向きです。検索キーワードなどは得意だけど、長文のテキストや画像ファイルなどには無理を来すイメージです。
また、URLと連結されるので、ユーザのPCにキャッシュで送信内容が残る場合があるため、パスワードなどの送信には、getでなくpostにするなどの配慮が必要です。

method=”post”

お問合せフォームなどで使われる送信方法です。

<form　action="mailform.cgi"　method="post">

■post の特徴
クエリ（フォームの内容）はURLと連結されず、各データ自体が送信されます。
ですので、容量の大きいデータの送信が可能です。長文テキストやファイル送信の場合には、getではなくpostの方が適しています。
また、get はURLと連結するのでキャッシュが残る場合があるため、キャッシュが残ると不都合が生じるものの送信には、postを使う
方が良いです。

送信ボタン（input要素の type=”submit” や type=”image”と、button要素のtype=”submit”）には、このform要素の method属性の指定を上書きするformmethod属性があります。

▲目次へ戻る

５．enctype属性でMIMEタイプを指定

enctypeは、encode type（エンコードタイプ）の略です。
enctype属性で、データ形式を指定します。データ形式はMIMEタイプで指定します。
MIMEタイプについてはHTML 【 metadata 】２～ link要素（１）MIMEタイプ一覧と属性一覧　１．MIMEタイプ一覧をご参照下さい。

enctype属性で指定できるMIMEタイプは、次の３つです。
●application/x-www-form-urlencoded（URLエンコード）
●multipart/form-data（マルチパート形式）
●text/plain（プレーンなテキストデータ）

enctype=”application/x-www-form-urlencoded”
これがenctype属性のデフォルトです。enctype属性を指定しない場合はapplication/x-www-form-urlencodedになります。
URLエンコード形式のMIMEタイプです。

通常、enctype属性は省略でOKです。

<form　action="mailform.cgi"　method="post">

<input　type=”file”>でファイルを送信したい時は、enctype=”multipart/form-data” に指定する必要があります。
マルチパート形式のMIMEタイプです。
ファイル送信の場合は容量が大きく、通常のURLエンコードだと不都合が生じるため、この形式を使います。
この場合、method=”post”にしておくことも忘れないように注意します。

<form　action="mailform.cgi"　method="post"　enctype="multipart/form-data">
<input　type="file"　name="file_upload"　size="30">
<input　type="submit"　value="送信する">
</form>

マルチパート形式とは、フォームの各項目ごとのデータを境界で区切って、それぞれ実データが送られる形式で、ファイルのアップロードを伴う場合に使われます。

送信ボタン（input要素の type=”submit” や type=”image”と、button要素のtype=”submit”）には、このform要素の enctype属性の指定を上書きするformenctype属性があります。

▲目次へ戻る

６．HTML5からの変更点

form属性を使って部品を外に出せるようになった

HTML5からは、部品の要素が必ずしもform要素の中に入ってなくてもOKになりました。
そのおかげで、フォームの構成上の自由度が大幅にアップしました。

まずid属性でform要素にID名を付けておきます。
外に出す要素のform属性で、親であるべきform要素のID名を呼び出して関連付けを行います。

<form　method="post"　action="sample.cgi"　id="example">
<p>お名前：<input　type="text"　name="name"></p>
<p>ご回答：
<label><input　type="radio"　name="reply"　value="回答1"　checked>回答１</label>
<label><input　type="radio"　name="reply"　value="回答2">回答2</label>
<label><input　type="radio"　name="reply"　value="回答3">回答3</label>
</p>
</form>
<!--外に出ている部品 ↓ -->
<input　type="submit"　value="送信する"　form="example">

form要素とform属性ってややこしいですが、これはHTML5から新しくできた属性です。
form要素に使うのではなく、中身の部品の要素に使います。

autocomplete属性が追加された

オートコンプリート（過去の入力履歴から入力を予測する）機能のオン、オフが指定できます。
デフォルト値はオンなので、オフにしたいときだけ使う属性です。

novalidate属性が追加された

バリデート（入力内容をチェックする）機能をオフに指定できます。
HTML5からの部品用の新要素と新属性で、色々なバリデーション機能が、ブラウザのデフォルトで使用可能になったためにnovalidate属性が追加されました。

action属性が必須でなくなった

以前は必須だったaction属性が、必須ではなくなりました。
action属性の指定をしない場合は、送信先がそのHTMLファイル自身になります。

accept属性が廃止された

accept属性は、プログラム側が受け入れるMIMEタイプを指定する属性だったのですが、form要素では廃止されました。（input要素では使用可能です。）

▲目次へ戻る

７．form要素なしで部品だけ

form要素はデータを送信することが前提となっているため、データ送信の必要がない場合はform要素自体が不要です。
単に表示したいデータ（部品）を、そのままform要素なしでHTML上に書きます。

次のような書き方です。

動作確認済みブラウザ：
<input　type="checkbox"　checked disabled> Chrome
<input　type="checkbox"　checked disabled> Opera
<input　type="checkbox"　checked disabled> Firefox
<input　type="checkbox"　checked disabled> Safari
<input　type="checkbox"　disabled> IE

ブラウザでは次のように表示されます。
HTML フォーム input要素 form要素の使い方プログラマカレッジ