ITコラム

Contact Us Call Service Customer Care Website Webpage Concept

ITコラム

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でフォームを整える

目次

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

▲目次へ戻る

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.