column

ITコラム

Contact Us Call Service Customer Care Website Webpage Concept

プログラミングノウハウ

2017.02.02

HTML【フォーム】3~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でフォームを整える

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

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 【 グローバル属性 】 ~ 全ての要素で使える属性をご参照下さい。

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ