HTMLのformタグの使ってフォームを作る方法

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

この記事の目次

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つの要素を覚えよう。
よかったらシェアしてね!
  • URLをコピーしました!
この記事の目次