ITコラム

Yes No Answer Questionnaire Concept

ITコラム

2017.02.01

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

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

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

HTML 【フォーム】1 ~ フォームの概要とform要素の属性一覧
HTML 【フォーム】2 ~ form要素の使い方(本ページ)
HTML 【フォーム】3 ~ form要素で使う主な属性の使い方
HTML 【フォーム】4 ~ fieldset要素とlegend要素
HTML 【フォーム】5 ~ input要素(1)フォーム部品一覧
HTML 【フォーム】5 ~ input要素(2)テキスト入力部品
HTML 【フォーム】5 ~ input要素(3)ラジオボタンとチェックボックス
HTML 【フォーム】5 ~ input要素(4)日時の入力部品
HTML 【フォーム】5 ~ input要素(5)数値の入力部品
HTML 【フォーム】5 ~ input要素(6)レンジ(range)の入力部品
HTML 【フォーム】5 ~ input要素(7)色(color)の入力部品
HTML 【フォーム】5 ~ input要素(8)ファイル送信のための部品
HTML 【フォーム】5 ~ input要素(9)隠し情報(hidden)
HTML 【フォーム】5 ~ input要素(10)ボタン(submit、reset、button)
HTML 【フォーム】5 ~ input要素(11)画像ボタン(image)
HTML 【フォーム】6 ~ button要素で作るボタン
HTML 【フォーム】7 ~ ボタンの作り方比較とJavaScriptでアラート表示
HTML 【フォーム】8 ~ セレクトリスト
HTML 【フォーム】9 ~ 入力候補(datalist)
HTML 【フォーム】10 ~ テキストエリア(textarea)
HTML 【フォーム】11 ~ ラベル(label)
HTML 【フォーム】12 ~ 出力欄(output)
HTML 【フォーム】13 ~ 数量や割合のゲージ(meter)
HTML 【フォーム】14 ~ 進捗状況を示すプログレスバー(progress)
HTML 【フォーム】15 ~ キーを発行して暗号化(keygen)
HTML 【フォーム】16 ~ CSSでフォームを整える

目次

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>で囲みます。

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

▲目次へ戻る

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

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

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.