カスタム検索

<form>タグ

<form>タグの機能と属性
機能 フォーム要素を定義
属性 HTML-4.01 コア 言語 イベント  action  method  enctype  onsubmit  onreset  accept  name  accept-charset  
XHTML-1.0 コア 言語 イベント  action  method  enctype  onsubmit  onreset  accept  accept-charset  
備考 XHTML2では廃止になっている

<form>タグは、フォームを定義し、どのようにデータを送信するかを定義します。通常、送信されるデータは何らかのプログラムに渡され、そのプログラムは、メールを送信するといった何らかの処理をします。

HTMLやXHTMLはプログラミング言語ではないため、メールを送信したりする処理はできません。ただし、ボタンやチェックボックス等のフォームを定義し、ユーザーとの接点を担うのはHTMLやXHTMLの役目となります。

<form>タグは、次のような様々なフォーム要素を定義するタグをネストし、フォームを定義します。

<form>にネストされるタグ
タグ名 機能 詳細
<input> 様々なフォーム要素を定義 詳細
<textarea> テキスト入力エリアを定義 詳細
<select> 選択リストを定義 詳細、含まれるタグ
<button> ボタン要素を定義 詳細
<label> フォーム要素にラベルを付ける 詳細
<fieldset> フォーム要素をグループ化する 詳細、含まれるタグ

action属性

action属性は、フォームのデータを処理するプログラムのパス(相対パスでも絶対パスでも構わない)を記述します。プロバイダやレンタルサーバから提供されるプログラムを使用する場合、指定されているパスを記述してください。このaction属性の指定は必須となります。

method属性

method属性は、フォームのデータを送信する際の方法を指定します。指定できる値は「post」と「get」です。このmethod属性の指定はほぼ必須でしょう。

postを指定した場合は、ブラウザはサーバとの接続を確立した上でデータを送信します。getを指定した場合は、サーバとの接続と、データの送信を1度で行います。フォームを送信した際に、アドレスバーに表示されるURLの最後の部分に「?」が追加され、「=」等と奇妙な文字の羅列が表示されているのを見かけることがあるかと思いますが、これは、URLに送信するデータを含めたもので、getで送信されていることを示しています。セキュリティについて重要視しなければならないプログラムであれば、postで送信することが多いでしょう。

下は<form>タグの記述例です。action属性の値には、実際に使用するプログラムのパスを記述します。フォームの送信にはpostを指定しています。<form>と</form>の間に<input>等の様々なフォーム要素を記述します。

form.html
<html>
    <head>
        <title>&lt;form&gt;タグの例</title>
    </head>
    <body>
        <form action="プログラムのパス" method="post">
            ここに様々なフォーム要素を定義します。
        </form>
    </body>
</html>

enctype属性

ブラウザはフォームのデータを送信する前に、データをエンコード(データを別の形に変換すること)しますが、enctype属性は、このエンコードの形式を指定します。指定できる値は、

  • application/x-www-form-urlencoded
  • multipart/formdata

があります。このenctype属性を指定しない場合は、一般的な「application/x-www-form-urlencoded」が指定されていると見なされます。「multipart/formdata」は、フォームを送信する際に、ファイルも一緒に送信する際に指定します。

onsubmit属性、onreset属性

onsubmit属性は、フォームのデータが送信されるときの動作を指定し、onreset属性は、フォームがリセットされたときの動作を指定します。ただし、これらの属性はJavaScriptに関することなのでこのサイトでは触れません。

accept属性

accept属性は、フォームで送信されるデータの形式(MIMEタイプ)を指定しますが、通常、あえて指定する必要はないでしょう。

name属性

name属性を指定すると、フォームを識別するための名前を付けることができます。リンク先の指定等に使用できます。しかし、このname属性は、id属性を使用しても同様の効果が得られるので、通常はid属性を使用するようにしてください。

accept-charset属性

accept-charset属性は、フォームで送信されたデータを処理するためにサーバ側で必要な文字セットを指定します。

この属性を指定するよりも、文字セットに関することはサーバやプログラム側に任せておいた方が無難かと思います。

CopyLeft 2018 Webデザインレッスン プライバシーポリシー サイト管理者に連絡