formタグとは?
formタグは、入力・送信するフォームを作成する要素です。
Webサイトでは、お問い合わせフォームやECサイトの注文フォームがよく見られます。
但し、実際に送信するためにはCGIやPHPなどのプログラミング言語を使用する必要がありますので、ここでは「フォームの見た目」を作成していきます。
formタグの使い方
formタグは、<form></form>でフォームの内容(パーツ)を囲みます。
<form></form>
さらに、複数の属性を設定することができます。属性の種類を見ていきましょう。
formタグの属性
formタグの主な属性には、action属性とmethod属性があります。他にもありますが、とりあえずこの2つを覚えておけば問題ありません。
action属性は、フォームのデータ(値)を送信するURLを指定します。method属性は、データを送信するHTTP メソッド (“get”や”post”)を指定します。
ここでは、実際には送信はしませんので詳しい説明は省きますが、データを送信するためには「action属性」、「method属性」が必要であるということと使い方を覚えておきましょう。
<form action="データを送信するURL" method="get" or "post">タグの書き方を覚えよう</form>
formに関する要素の種類
フォームの部品となる主な要素を見ていきましょう。
- input(テキスト入力やラジオボタン、チェックボックス、送信ボタンなどに使われる要素)
- textarea(複数行の入力フィールドに使われる要素)
- select(プルダウンメニューなどの選択肢を表示する際に使われる要素)
それぞれの要素の使い方を見ていきましょう。
input要素
input要素は、テキスト入力やラジオボタン、チェックボックス、送信ボタンなどに使われる要素です。
閉じタグは必要ありません。input要素には、多数のtype属性があり、type属性の値によって値の種類を指定することができます。
初期値は”text”です。また、name属性で名前を付けることができます。name属性は送信された値を受け取る際に一意(ユニーク)な値にする必要があります。
実際に送信する際に必要になります。
まずは、使い方を見ていきましょう。
<input type="text" name="sample" value="test">
表示例:ブラウザ
type属性の種類
type属性の種類は多く、すべてを覚える必要はありません。type属性には、テキスト入力や電話番号、パスワードなど入力したい値によってtype属性を変えます。
主なtype属性は以下の通りです。
- text
- ・1行の入力フィールド。改行が入らないことが特徴。
- hidden
- ・非表示にすることができます。但し、フォームの値は送信されます。
- button
- 機能を持たないボタンを作成します。ボタンを押すことでイベントを設定したいときなどに指定します。
- submit
- フォームの値をサーバーに送信する際のボタンを作成します。
- checkbox
- ・値を複数選択できるチェックボックスを作成します。
- radio
- ・複数の値の中から一つを選択できるラジオボタンを作成します。
- image
- ・画像でボタンを作成します。使用する画像のパスを「src属性」で指定します。
- password
- ・パスワードを入力するためのボックスを作成します。入力されたデータをアスタリスク(*)などに変換されて表示されます。但し、実際に送信されるデータが暗号化される訳ではないので注意が必要です。
name属性
name属性は、input要素に名前を付ける為の属性です。name属性を付けることで、送信されたデータと名前がセットになり、サーバー側で判断することができます。
value属性
value属性は、入力コントロール(入力欄)の初期値を設定できる属性です。テキスト入力欄では、初めから入力されている値、ラジオボタンやチェックボックスでは、選択した値をサーバーに送信します。
size属性
テキスト入力欄の場合、文字数を指定することができます。この値によって入力欄の幅が変化します。ちなみに、設定しない場合は「20」となります。
maxlength属性
テキスト入力欄に入力できる文字数の最大値を設定できます。
checked属性
チェックボックスもしくはラジオボタンにおいて、初めからチェックを入れた状態にします。
disabled属性
desabled属性を指定すると、フォームの部品が変更・選択が不可となります。
readonly属性
readonly属性を指定すると、フォームの部品が変更が不可(選択は可)となります。
src属性
ボタンを画像にする際の画像のURLパスを指定します。
width属性
ボタンを画像にする際の画像の幅を指定します。
height属性
ボタンを画像にする際の画像の高さを指定します。
alt属性
ボタンを画像にする際、画像が表示できない場合の代替テキストを指定します。
textarea要素
textarea要素は、inputのテキスト入力欄が一行の入力欄であるのに対し、「複数行のテキスト入力欄」です。
<textarea rows="5" cols="30">複数行のテキスト入力欄</textarea>
<textarea></textarea>で囲み、内容として入れたテキストが初期状態で入力欄に入力されます。
表示例:ブラウザ
指定できる属性を見ていきましょう。
name属性
name属性は、textarea要素に名前を付ける為の属性です。name属性を付けることで、送信されたデータと名前がセットになり、サーバー側で判断することができます。
maxlength属性
テキスト入力欄に入力できる文字数の最大値を設定できます。
cols属性
テキスト入力欄の1行の文字数を指定することができます。この値によって入力欄の幅が変化します。ちなみに、設定しない場合は「20」となります。
rows属性
テキスト入力欄の1行の文字数を指定することができます。この値によって入力欄の高さが変化します。ちなみに、設定しない場合は「2」となります。
disabled
disabled属性を指定すると、フォームの部品が変更・選択が不可となります。
readonly
readonly属性を指定すると、フォームの部品が変更が不可(選択は可)となります。
select要素
select要素は、プルダウンメニューなどの選択肢を表示する際に使われる要素です。
使い方は、全体をselect要素で囲み、選択肢をoption要素で囲みます。
<select>
<option>選択肢1</option>
<option>選択肢2</option>
<option>選択肢3</option>
<option>選択肢4</option>
<option>選択肢5</option>
</select>
表示例:ブラウザ
select要素に指定できる属性を見ていきましょう。
name属性
name属性は、select要素に名前を付ける為の属性です。name属性を付けることで、送信されたデータと名前がセットになり、サーバー側で判断することができます。
size属性
size属性を指定すると、予め表示される選択肢の数を指定することができます。指定すると、メニューではなくリストボックスで表示されます。
multiple属性
通常、選択できる項目は1つですが、multiple属性を指定すると、複数選択することができます。
disabled属性
disabled属性を指定すると、フォームの部品が変更・選択が不可となります。
次に、option属性に指定できる属性を見ていきましょう。
value属性
サーバーに送信される値を指定することができます。この際、select要素のname属性とセットとなり、サーバー側で判断することができます。
selected属性
selected属性を指定すると、予め選択した状態にすることができます。
disabled属性
disabled属性を指定すると、フォームの部品が変更・選択が不可となります。
理解するポイントまとめ
- formタグは、入力・送信するフォームを作成する要素です。
- formタグの主な属性には、action属性とmethod属性があります。
- input・textarea・selectの3つの要素を覚えよう。