formタグで入力フォームを作ってみよう

formタグで入力フォームを作ってみよう

 

LINEで送る
Pocket

formタグで入力フォームを作ってみよう

1.formタグとは?

formタグは、入力・送信するフォームを作成する要素です。Webサイトでは、お問い合わせフォームやECサイトの注文フォームがよく見られます。但し、実際に送信するためにはCGIやPHPなどのプログラミング言語を使用する必要がありますので、ここでは「フォームの見た目」を作成していきます。

2.formタグの使い方

formタグは、<form></form>でフォームの内容(パーツ)を囲みます。

<form></form>

さらに、複数の属性を設定することができます。属性の種類を見ていきましょう。

2-1.formタグの属性

formタグの主な属性には、action属性とmethod属性があります。他にもありますが、とりあえずこの2つを覚えておけば問題ありません。

action属性は、フォームのデータ(値)を送信するURLを指定します。method属性は、データを送信するHTTP メソッド (“get”や”post”)を指定します。ここでは、実際には送信はしませんので詳しい説明は省きますが、データを送信するためには「action属性」、「method属性」が必要であるということと使い方を覚えておきましょう。

<form action="データを送信するURL" method="get" or "post">タグの書き方を覚えよう</form>

2-2.formに関する要素の種類

フォームの部品となる主な要素を見ていきましょう。

・input(テキスト入力やラジオボタン、チェックボックス、送信ボタンなどに使われる要素)
・textarea(複数行の入力フィールドに使われる要素)
・select(プルダウンメニューなどの選択肢を表示する際に使われる要素)

それぞれの要素の使い方を見ていきましょう。

3.input要素

input要素は、テキスト入力やラジオボタン、チェックボックス、送信ボタンなどに使われる要素です。閉じタグは必要ありません。input要素には、多数のtype属性があり、type属性の値によって値の種類を指定することができます。初期値は”text”です。また、name属性で名前を付けることができます。name属性は送信された値を受け取る際に一意(ユニーク)な値にする必要があります。実際に送信する際に必要になります。

まずは、使い方を見ていきましょう。

<input type="text" name="sample" value="test">

表示例:ブラウザ

3-1.type属性の種類

type属性の種類は多く、すべてを覚える必要はありません。type属性には、テキスト入力や電話番号、パスワードなど入力したい値によってtype属性を変えます。
主なtype属性は以下の通りです。

text
・1行の入力フィールド。改行が入らないことが特徴。
hidden
・非表示にすることができます。但し、フォームの値は送信されます。
button
機能を持たないボタンを作成します。ボタンを押すことでイベントを設定したいときなどに指定します。
submit
フォームの値をサーバーに送信する際のボタンを作成します。
checkbox
・値を複数選択できるチェックボックスを作成します。
radio
・複数の値の中から一つを選択できるラジオボタンを作成します。
image
・画像でボタンを作成します。使用する画像のパスを「src属性」で指定します。
password
・パスワードを入力するためのボックスを作成します。入力されたデータをアスタリスク(*)などに変換されて表示されます。但し、実際に送信されるデータが暗号化される訳ではないので注意が必要です。

 

3-2.name属性

name属性は、input要素に名前を付ける為の属性です。name属性を付けることで、送信されたデータと名前がセットになり、サーバー側で判断することができます。

3-2.value属性

value属性は、入力コントロール(入力欄)の初期値を設定できる属性です。テキスト入力欄では、初めから入力されている値、ラジオボタンやチェックボックスでは、選択した値をサーバーに送信します。

3-3.size属性

テキスト入力欄の場合、文字数を指定することができます。この値によって入力欄の幅が変化します。ちなみに、設定しない場合は「20」となります。

3-4.maxlength属性

テキスト入力欄に入力できる文字数の最大値を設定できます。

3-5.checked属性

チェックボックスもしくはラジオボタンにおいて、初めからチェックを入れた状態にします。

3-6.disabled属性

desabled属性を指定すると、フォームの部品が変更・選択が不可となります。

3-7.readonly属性

readonly属性を指定すると、フォームの部品が変更が不可(選択は可)となります。

3-8.src属性

ボタンを画像にする際の画像のURLパスを指定します。

3-9.width属性

ボタンを画像にする際の画像の幅を指定します。

3-10.height属性

ボタンを画像にする際の画像の高さを指定します。

3-11.alt属性

ボタンを画像にする際、画像が表示できない場合の代替テキストを指定します。

4.textarea要素

textarea要素は、inputのテキスト入力欄が一行の入力欄であるのに対し、「複数行のテキスト入力欄」です。

<textarea rows="5" cols="30">複数行のテキスト入力欄</textarea>

<textarea></textarea>で囲み、内容として入れたテキストが初期状態で入力欄に入力されます。

表示例:ブラウザ

指定できる属性を見ていきましょう。

4-1.name属性

name属性は、textarea要素に名前を付ける為の属性です。name属性を付けることで、送信されたデータと名前がセットになり、サーバー側で判断することができます。

4-2.maxlength属性

テキスト入力欄に入力できる文字数の最大値を設定できます。

4-3.cols属性

テキスト入力欄の1行の文字数を指定することができます。この値によって入力欄の幅が変化します。ちなみに、設定しない場合は「20」となります。

4-4.rows属性

テキスト入力欄の1行の文字数を指定することができます。この値によって入力欄の高さが変化します。ちなみに、設定しない場合は「2」となります。

4-5.disabled

disabled属性を指定すると、フォームの部品が変更・選択が不可となります。

4-6.readonly

readonly属性を指定すると、フォームの部品が変更が不可(選択は可)となります。

5.select要素

select要素は、プルダウンメニューなどの選択肢を表示する際に使われる要素です。
使い方は、全体をselect要素で囲み、選択肢をoption要素で囲みます。

<select>
  <option>選択肢1</option>
  <option>選択肢2</option>
  <option>選択肢3</option>
  <option>選択肢4</option>
  <option>選択肢5</option>
</select>

表示例:ブラウザ

select要素に指定できる属性を見ていきましょう。

5-1.name属性

name属性は、select要素に名前を付ける為の属性です。name属性を付けることで、送信されたデータと名前がセットになり、サーバー側で判断することができます。

5-2.size属性

size属性を指定すると、予め表示される選択肢の数を指定することができます。指定すると、メニューではなくリストボックスで表示されます。

5-3.multiple属性

通常、選択できる項目は1つですが、multiple属性を指定すると、複数選択することができます。

5-4.disabled属性

disabled属性を指定すると、フォームの部品が変更・選択が不可となります。

次に、option属性に指定できる属性を見ていきましょう。

5-5.value属性

サーバーに送信される値を指定することができます。この際、select要素のname属性とセットとなり、サーバー側で判断することができます。

5-6.selected属性

selected属性を指定すると、予め選択した状態にすることができます。

5-7.disabled属性

disabled属性を指定すると、フォームの部品が変更・選択が不可となります。

理解するポイントまとめ

  • formタグは、入力・送信するフォームを作成する要素です。
  • formタグの主な属性には、action属性とmethod属性があります。
  • input・textarea・selectの3つの要素を覚えよう。
LINEで送る
Pocket