body要素内で使用される「form」
body要素内で使われるタグからフォームを作るための「form」要素を紹介します。
お問い合わせフォームなどを作成する際に使用します。
form
フォーム全体を囲むためのタグです。
フォームは必ず1対のtableタグで囲まれます。
開始タグ内に必ずaction属性とmethod属性を指定します。
<form action="mail.cgi" method="post"> </form>
action属性
入力した情報の送り先を指定します。通常送り先はcgiというファイルのパスとなります。
method属性
入力した情報の送信方法を指定します。値はpostまたはgetとなります。
getを指定した場合は送れる文字数に上限が発生し(約2,083 文字)、URLの末尾に情報が付加されます。
input
form要素内で入力欄やボタンを作成するためのタグです。
ここではテキスト入力欄・メールアドレス入力欄・ラジオボタン・送信ボタンを紹介します。
テキスト入力欄(type=”text”)
文字を入力するための入力欄です。文字であればどのような情報でも入力させることができます。
<p>氏名:<input type="text" name="name"></p>
メールアドレス入力欄(type=”email”)
メールアドレス専用の入力欄です。メールアドレス以外が入力された場合、エラーを返します。(エラーについてはブラウザごとに対応が異なります)
<p>メールアドレス:<input type="email" name="email"></p>
ラジオボタン(type=”radio”)
複数の選択肢から、択一的に選択をすることができるボタンです。
<p>性別:<input type="radio" name="gender" value="男性">男性 <input type="radio" name="gender" value="女性">女性</p>
送信ボタン(type=”submit”)
form要素内で入力した情報を送信するためのボタンです。
情報はform要素開始タグで指定をした、action属性の値に記述したプログラム(cgi)へ送られます。
<p><input type="submit" value="入力内容を送信する"></p>
textarea
テキストエリアを作成するためのタグです。開始タグと終了タグがありますが、特に内容を持つわけではありません。
<p>お問い合わせ内容:<textarea name="question" cols="30" rows="10"></textarea></p>
フォーム全体の記述例:
<form action="mail.cgi" method="post"> <p>氏名:<input type="text" name="name"></p> <p>メールアドレス:<input type="email" name="email"></p> <p>性別:<input type="radio" name="gender" value="男性">男性 <input type="radio" name="gender" value="女性">女性</p> <p>お問い合わせ内容:<textarea name="question" cols="30" rows="10"></textarea></p> <p><input type="submit" value="入力内容を送信する"></p> </form>