LINKSTORY LIBRARY(リンクストーリーライブラリー)

LINKSTORY LIBRARY(リンクストーリーライブラリー)

CATEGORY is 新人ブログ

入力フォームの基礎について調べてみました

フォームの作り方

こんにちは、後藤です。

今回は、ホームページを運用していく上で必須と言っても過言ではない、お問い合わせフォームなどを作成するときに使用する、フォームについて解説していきます。

 

<form>タグ

まず、フォームを作成するには、後述するフォームコントロールをグループ化するために<form>タグで囲う必要があります。

また、<form>タグを使用する際には、action属性とmethod属性を記述しましょう。

action属性では、入力データの送信先を指定します。

method属性では、送信方法を指定します。

このように記述します。

(例)

 

フォームコントロール

フォームコントロールは、次のタグを利用して作成します。

<input>:各種入力フィールドやボタン

<select>:選択肢

<textarea>:複数行のテキストフィールド

<button>:ボタン

name属性

フォームコントロールはname属性でコントロール名を指定する必要があります。

分かりやすい名前を付けておきましょう。

例えば、メールアドレスを入力するコントロールには、「name=”mail”」と指定します。

コントロール名を省略した場合、データが送信されないので注意しましょう。

ラベルの指定

項目名と入力フィールドに関連性を持たせるために、<label>タグを使用します。

二通りの方法があります。

 

一つ目は、<label>タグで項目名と入力フィールドを囲う方法。

(例)

 

二つ目は、フォームコントロールにIDを指定し、<label>にfor属性を指定する方法。

IDとfor属性には、同じ名前を指定します。

(例)

 

<input>タグ

<input>タグでは、type属性を指定することによって、様々な入力フィールドやボタンを作成することができます。

type属性を省略した場合、「text」で処理されます。

このように記述します。閉じタグは必要ありません。

(例)

以下に一覧を記述します。

テキストフィールド

テキスト:text

検索:search

URL:url

電話番号:tel

メールアドレス:email

パスワード:password

日付

年月日:date

年月:month

週:week

時刻:time

日時:datetime-local

数値・色

数値:number

大まかな数値:range

カラーピッカー:color

選択肢

チェックボックス:checkbox

ラジオボタン:radio

チェックボックスでは複数の選択が、ラジオボタンでは一つのみの選択が可能です。

value属性で送信する値を指定します。

選択肢をグループ化するためには、同じname属性を指定します。

(例)

特殊なコントロール

ファイルアップロード:file

隠しフィールド:hidden

ボタン

送信ボタン:submit

画像ボタン:image

リセットボタン:reset

ボタン:button

 

<select>タグ

<select>タグでは選択肢をプルダウン形式で表示できます。

選択肢は<option>タグで指定します。

value属性で送信する値を指定します。

このように記述します。

(例)

 

<textarea>タグ

<textarea>タグでは、複数行のテキストフィールドを作成できます。

横幅はcols属性で文字数、高さはrows属性で行数を指定することも可能です。

このように記述します。

閉じタグが必要なことに注意してください。

(例)

 

<button>タグ

<button>タグを利用すると、囲ったコンテンツをボタンとして機能させることができます。

例えば、画像などです。

ボタンの機能はtype属性で指定します。

submit:送信ボタン

reset:リセットボタン

button:汎用ボタン

(例)

 

終わりに

今回は、お問い合わせフォームなどに利用されるフォームについて解説しました。

簡単な部分だけを解説しましたが、まだまだフォームにはいろいろな機能があります。

name属性の記述を忘れてしまうとデータが送信されないので、name属性の記述は忘れないようにしましょう。

この記事を書いた人

後藤
2017年入社の新人です。 コーディングと、メディアサイトの企画・運営、SNS運用を担当しています。 コーディングに関してはまだまだ実力不足なので、早く会社の戦力になれるように日々精進しています。