フォームを作成するための「form要素」

Webサイトの中には、情報を紹介するだけでなく、ユーザーが情報を提供するタイプのものがあります。たとえば、問い合わせフォームやアンケートなどがそうですね。企業サイトなら問い合わせフォームは当り前ですし、個人サイトでもフォームを用意しているサイトが増えてきました。

ユーザーから貴重な情報を提供してもらえる可能性がありますから、問い合わせフォームやアンケートページを作成してみましょう。HTMLには、フォームを作成するための「form要素」があります。なので、使い方を知っておくといいですね。

ここでは、「form要素」について解説をします。

 

フォームの仕組みについて

フォームを機能させるには、CGIやPHPなどのプログラムが必要です。フォーム自体はHTMLで作られていますが、情報の送信に関してはプログラムが無いと機能しません。無料で提供されているプログラムも多いので、探してみてください。有名なものだと、「POST-MAIL」などがあります。

 

フォームを作成する「form要素」

フォームの作成には「form要素」を使いますが、それ単体では無くて「input要素」「textarea要素」「select要素」などとセットにして使用します。まず、form要素に付加するものとして、「action属性」と「method属性」とがあります。

「action属性」は、データを送るプログラムを指定するものです。なので、自分の使用するプログラムを値として記述しましょう。そして、「method属性」によって、データの送信方法を指定します。「get」と「post」がありますが、一般的に「post」が使用されます。

なので、form要素の記述方法としては、以下のようになります。

<form action=”プログラム名” method=”post”>~</form>

 

フォームの構成要素について

先述したように、form要素に入るものとして、「input要素」「textarea要素」「select要素」があります。これらを使用することで、必要な項目を追加してフォームを完成させるわけです。なので、それぞれの意味を理解しておいてください。

 

入力項目のベースとなる「input要素」

input要素は、テキストボックスやチェックボックス、ラジオボタンなどを作成するベースとなる要素です。type属性で該当する値を付けることで、それぞれのボックスやボタンを作ることが出来ます。

text 1行のテキストボックスを作る
<input type=”text”>
chectbox チェックボックスを作る
<input type=”chectbox”>
radio ラジオボタンを作る
<input type=”radio”>
submit 送信ボタンを作る
<input type=”submit”>
reset リセットボタンを作る
<input type=”submit”>

そして、input要素には「name属性」と「value属性」を付けることが出来ます。「name属性」は、その入力項目に名前を付けます。さらに、「value属性」では、入力項目にあらかじめ値を付けることが可能です。チェックボックスやラジオボタンなど、最初から値を用意する場合に使います。

 

複数行の入力エリアを作る「textarea要素」

問い合わせフォームの本文など、複数行の入力項目を作るには「textarea要素」を使用します。テキストエリアの大きさは、「cols属性」と「rows属性」で指定します。「cols属性」は横幅を指定し、「rows属性」は高さの指定です。

なので、<textarea cols=”30″ rows=”10″>~</textarea>とした場合、横幅30文字・高さ10行の大きさとなります。自由に大きさを指定できますから、ページに合わせて作成してください。

ブラウザ上に表示すると、以下のようになります。

 

プルダウンのセレクトボックスを作る「select要素」

都道府県の選択など、プルダウン式のセレクトボックスには「select要素」を使います。select要素の中に「option要素」を入れて、項目を作ります。さらに、value属性で値を指定することが可能です。

記述方法としては、以下のようになります。

<select>
<option value=”北海道”>北海道</option>
<option value=”青森県”>青森県</option>
<option value=”秋田県”>秋田県</option>
<option value=”岩手県”>岩手県</option>
</select>

これで、下のようなプルダウンが作成できます。

 

以上、フォームの作成方法を紹介しました。要素が多くて複雑に感じるかもしれませんが、構造としてはシンプルなものです。自分が使用する入力項目を選んで、フォームを作成するようにしてください。

サブコンテンツ

このページの先頭へ