HTML 【フォーム】3 ~ form要素で使う主な属性の使い方

Contact Us Call Service Customer Care Website Webpage Concept

今回は、form要素で使う主な属性の使い方についてまとめたいと思います。

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

目次

1.action属性
2.method属性
3.enctype属性
4.accept-charset属性
5.novalidate属性
6.autocomplete属性
7.name属性
8.target属性

1.action属性

action=”送信先のURL”

action属性は、フォームのデータを送る、送信先のファイル(プログラム)のURLを指定します。

<form action=”test.cgi” method=”post”>

送信ボタン(input要素の type=”submit” や type=”image”と、button要素の type=”submit”)にformaction属性が指定された場合は、そちらが優先されます。

▲目次へ戻る

2.method属性

method=”post” または method=”get”

method属性は、フォームデータの送信方法を指定します。
デフォルト値はgetなので、method属性を省略するとgetになります。

method=”get”で指定すると、action属性で指定されたURLとフォームデータが連結されて送信されます。ですので、検索ワードなど、フォームデータが短い(データ量が少ない)場合に適しています。

method=”post”で指定すると、action属性で指定されたURLとフォームデータが連結されず、フォームデータのみが送信されます。ですので、フォームデータの容量が多い場合に適しています。

<form action=”test.cgi” method=”post”>

送信ボタン(input要素の type=”submit” や type=”image”と、button要素の type=”submit”)にformmethod属性が指定された場合は、そちらが優先されます。

▲目次へ戻る

3.enctype属性

enctype=”送信時のデータ形式”

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

デフォルト値はapplication/x-www-form-urlencodedなので、enctype属性を省略するとapplication/x-www-form-urlencodedになります。

●application/x-www-form-urlencoded
 URLエンコード形式です。
 デフォルト値のため、enctype属性を省略するとこの値になります。

●multipart/form-data
 マルチパート形式です。
 <input type=”file”>を指定する場合は、必ずこの値にする必要があります。

●text/plain
 プレーンテキスト形式です。

<form action=”test.cgi” method=”post” enctype=”multipart/form-data”>

送信ボタン(input要素の type=”submit” や type=”image”と、button要素の type=”submit”)にformenctype属性が指定された場合は、そちらが優先されます。

▲目次へ戻る

4.accept-charset属性

accept-charset=”文字コード”

accept-charset属性は、送信時に使う文字コード(Shift_JIS、UTF-8など)を指定します。

<form action=”test.cgi” method=”post” accept-charset=”UTF-8″>

▲目次へ戻る

5.novalidate属性

novalidate または novalidate=”” または novalidate=”novalidate”

novalidate属性は、バリデーション(入力内容の妥当性のチェック)をオフに指定します。
HTML5の新しい要素や属性で、様々な入力値の制約が可能となり、送信時に入力値が制約に適っているかチェック(バリデート)するのがデフォルトとなったため、それをオフにできるnovalidate属性が新たに登場しました。

<form action=”test.cgi” method=”post” novalidate>
<p><b>必須</b>お名前:<input type=”text” name=”name” required></p>
<p><b>必須</b>ご住所:<input type=”text” name=”name” required></p>
<p><input type=”submit” value=”送信する”> </p>
</form>

required属性は、必須項目である事を指定する属性です。
よって、上の例では、required属性の指定がある「お名前」や「ご住所」が未入力の場合は、入力チェック(バリデーション)機能が働いて、データの送信ができない状態になるのがデフォルトですが、novalidate属性の指定があるため、バリデーション機能がオフとなり、required属性の指定がある項目が未入力の場合でもデータの送信が可能となります。

送信ボタン(input要素の type=”submit” や type=”image”と、button要素の type=”submit”)にformnovalidate属性が指定された場合は、そちらが優先されます。

▲目次へ戻る

6.autocomplete属性

autocomplete=”on” または autocomplete=”off”

autocomplete属性は、オートコンプリートのオンまたはオフを指定する属性です。
オートコンプリートとは、過去に入力したデータを覚えていて、少し入力するとその先を予測してデータの候補が出てくる機能です。
この属性は、デフォルト値がonなので、offにしたい時に使う属性です。

<form action=”test.cgi” method=”post” autocomplete=”off”>

▲目次へ戻る

7.name属性

name=”フォームの名前”

name属性は、フォームに固有の名前を付ける必要がある時に使用します。
複数のフォームがある場合に、各フォームに名前を付けていれば、Javascriptなどで操作したいフォームをコントロールすることができます。

<form action=”test.cgi” method=”post” name=”form1″>

▲目次へ戻る

8.target属性

target=”_blank”
または target=”_self”
または target=”_parent”
または target=”_top”
または target=”ウィンドウ(フレーム)名”

target属性は、処理結果を表示するウィンドウ(またはフレーム)を指定します。

●_blank
  新規の(別の)ウィンドウに表示します。

●_self
  現在の(同じ)ウィンドウ(フレーム)に表示します。

●_parent
  親になるウィンドウ(フレーム)に表示します。

●_top
  フレームを解除してウィンドウ全体に表示します。

●ウィンドウ(フレーム)名
  その名前のウィンドウ(フレーム)に表示します。

<form action=”test_2.html” method=”get” target=”target_test”>
上のソースのプレビューです<input type=”submit” value=”送信する”>
<iframe src=”test_1.html” name=”target_test” sandbox></iframe>
</form>

上の例では、インラインフレームに結果が表示されます。
インラインフレームに name属性でname=”target_test”と名前を付けておいて、form要素 の target属性でその名前を指定すればOKです。

target属性についてはHTML 【メタデータ】1 ~ メタデータ・コンテンツの概要とbase要素 4.base要素のtarget属性もご参照下さい。

送信ボタン(input要素の type=”submit” や type=”image”と、button要素の type=”submit”)にformtarget属性が指定された場合は、そちらが優先されます。

他に、form要素ではid属性、class属性、title属性、style属性などのグローバル属性も使います。
グローバル属性についてはHTML5 【 グローバル属性 】 ~ 全ての要素で使える属性をご参照下さい。

▲目次へ戻る

コメントを残す

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