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

Yes No Answer Questionnaire Concept

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

フォームについては、以下のページもご参照下さい。
HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧

目次

1.form要素とは
2.form要素の中にフォームの部品をまとめる
3.action属性で送信先のURLを指定
4.method属性で送信方法を指定
5.enctype属性でMIMEタイプを指定
6.HTML5からの変更点
7.form要素なしで部品だけ

1.form要素とは

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

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

▲目次へ戻る

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

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

<form>
<p>お名前:<input type=”text” name=”name”></p>
<p>ご回答:
<label><input type=”radio” name=”reply” value=”回答1″ checked> 回答1</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>で囲みます。

ブラウザでは次のように表示されます。
colmun_image2233_01

▲目次へ戻る

3.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属性があります。

▲目次へ戻る

4.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属性があります。

▲目次へ戻る

5.enctype属性でMIMEタイプを指定

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

enctype属性で指定できるMIMEタイプは、次の3つです。
●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属性があります。

▲目次へ戻る

6.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>回答1</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要素では使用可能です。)

▲目次へ戻る

7.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

ブラウザでは次のように表示されます。
colmun_image2233_02

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です