HTMLフォームタグ「FORM」の使い方

本記事は広告が含まれる場合があります HTML

HTMLの基本 フォームタグ FORM の使い方

ここでは、HTMLフォームタグ「FORM」の使い方、およびフォームの部品となるINPUTタグ、SELECTタグ、TEXTAREAタグなどについて説明していきます。
 

HTML フォームタグ

あ、よく見かけますね。こういったフォームはformタグで作れるのですね。

 

はい!ただ、フォームタグは他のタグと違ってphpなどのプログラムと連携してデータの受け渡しをするのに利用します。
そのため、他のタグよりも少し難しいのでここではHTML範囲内での書き方を簡単に紹介しますね。

 

 

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト


 

フォームタグ form

HTML formタグ
 

「お問い合わせはこちら」などでよく見かけるフォームは<form>タグを利用します。
 

フォームタグの中には、フォーム部品(例. テキスト入力欄、ラジオボタンやドロップダウンメニュー、送信ボタンなど)を追加していきます。
 

■表示例
HTML フォームタグ
 

■上記のソースコード

 

フォームタグの書き方

まず、formタグで大きく括ります。

HTML formタグ
 

formタグの中に、フォームの部品となるインプットタグ<input>やセレクトタグ<select>、(複数行の)テキストエリアタグ<textarea>等のタグを利用して、テキストボックスやラジオボタン、チェックボックスなどの項目を追加することができます。
 

FORMタグ inputタグ
 

(補足) formタグの送信先(action)と通信方式(method)

formタグ内にあるactionとmethod属性は送信先となるプログラムの連携方法を指定する方式です。

項目 内容
action フォームの入力内容をどこに送るか、送信先のページを指定します。
HTML formタグ action属性
 
method フォーム送信の通信方式(get/post)を指定します。
HTML methodタグ  action属性
 

 

actionとかmethodとかさっそく意味がよくわかりません。。

 

確かにちょっと難しいですね。実はformタグはHTML単体で動作するのではなくPHPなどのプログラムと連携して動作します。

 

プログラムと連携する??

 


たとえば、「ログインする」「会員登録する」「メール通知する」など、フォームに入力された内容を元になにかの処理があるはずです。

フォームに入力された内容をもとに、actionでどのプログラムと連携するか、methodでどういう通信方式で連携するかを決めている形にまります。最初から理解するのはなかなか難しいので、はじめはそういう設定があるのか、というレベルで良いと思います。


 
 

フォームの部品タグ INPUTタグ

 

INPUTタグの書き方

formタグの中に入れるよく使うタグで、inputタグがあります。
 

form inputタグの例
 

inputタグでよく使う属性として下記のようなものがあります。
 

項目 内容
type="〇〇" 入力方式(必須)です。テキスト入力欄やラジオボタンなどタイプを選択します
inputタグ type テキスト・ラジオボタンなど入力タイプを設定する
name="〇〇" 入力項目(必須)です。フォーム送信で受け渡す項目名です。
inputタグ name 部品の名前を任意の名称で命名する
value="〇〇" 入力値(任意)です。実際に入力した値が入る属性です。初期値を入れる場合に設定できます。
inputタグ value 入力項目に入る値。
placeholder="〇〇" プレースホルダー(任意)です。薄い字で記入例などを設定できます。
inputタグ placeholder 凡例を薄いテキストで表示します

 

また、入力方式に合わせてtypeには以下のようなものが設定できます。

項目 内容
type="text" テキスト入力欄
type="password" パスワード入力欄
type="radio" ラジオボタン
type="checkbox" チェックボックス
type="hidden" 隠し入力欄
type="submit" 送信ボタン

 

意味がわかりません!

とりあえず一つずつ説明していきますね!

 

 

テキスト入力 input type="text"

名前やログインIDなどの短文のテキストデータを入力項目とする場合はtype="text"を使用します。
 

■表示例

ログインID:

 

■上記のソースコード

 

上記の初期状態では、入力項目(name="loginId")の入力値(value)は空ですが、値を入力するとvalue属性の中に値が入ります。
 

その下のtype="submit"は送信ボタンです。form内の入力値をaction="送信先"に送信します。
 

inputタグをpタグでくくっているのはなんでなんでしょうか??

 

pタグで括らないといけないわけではないんですが、inputタグは改行を持たないタグなのでここでは見やすさを重視して一例としてpタグでくくっています。フォームタグと直接関係はないのでここではあまり気にしなくて大丈夫です。

 
 

パスワード入力 input type="password"

ログインパスワードなどの見られたくないデータを入力項目とする場合はtype="password"を使用します。
 

■表示例

パスワード:

 

■上記のソースコード

 

(表示上は見えないだけで内部間の通信ではパスワードは平文(暗号化されていない状態)になっています。盗聴などを防ぐためにはSSL通信などで暗号化する必要があります。)
 
 

ラジオボタン input type="radio"

ラジオボタン形式で入力項目を作る場合はtype="radio"を使用します。
 

■表示例

好きな動物:

:犬
:猫
:鳥
:ライオン

 

■上記のソースコード

 
 

チェックボックス input type="checkbox"

チェックボックス形式で入力項目を作る場合はtype="checkbox"を使用します。
 

■表示例

好きな動物(複数選択可):

:犬
:猫
:鳥
:ライオン

 

■上記のソースコード

 
 

ラジオボタンとチェックボックスは何が違うんでしょうか?

 

ラジオボタンは一つのみ選択できる項目で使います。
チェックボックスは複数選択可能な項目で利用します。

 
 

ほかにも、ユーザーに入力させない(非表示)けれども、埋め込みたい値などはtype="hidden"を利用できます。
 

また、現在主流のHTML5では、下記のような項目も新たに使えるようになりました。

type="number" 数字入力用
type="tel" 電話番号入力用
type="email" メール入力用
type="date" 日付入力用

 
 

フォーム部品 ドロップダウンメニューSELECTタグ

SELECTタグの使い方

form selectの例

ドロップダウンメニューを利用したい場合はselectタグを利用します。selectタグの中に、選択肢としてoptionタグを利用します。
 

■表示例

好きな動物:

 

■上記のソースコード

 
 

フォームの部品 長文メッセージ用TEXTAREAタグ

TEXTAREAタグの使い方

form textareaタグ
 

長文のメッセージを入力項目にしたい場合は、textareaタグを利用します。
 

■記入例

 
行数はrows属性、横幅はcols属性で指定できます。
 

■表示例

メッセージ記入欄

 

とりあえず、難しいということがわかりました。

他のタグに比べるとちょっと難易度が高いかもしれませんね。

 

フォームタグ自体を自分で記述する機会は少ないかもしれないので、CSSでレイアウト修正できるようにするためにまずは概要だけ抑えておくとよいかもしれません。

 

ここでは割愛しますが、formタグはpタグの代わりにlabelタグを使って記述したり、ほかにも色々な使い方があります。
 

必要になったときに随時調べて使えるようにしてみましょう。
 
 

【HTML・CSSを個別指導】
Webスクール<「WEBST8」

HTML・CSS 自分でHP・Web制作したい個人事業主様向けWebスクール ウェブストエイト


 

まとめ

今回は、HTMLフォームタグ「FORM」の使い方、およびFORMタグおよびフォームの部品となるINPUTタグ、SELECTタグ、TEXTAREAタグ、LABELタグなどについて説明しました。

フォームはHTML単体で利用するものではなく、プログラムと連携して動作するものですが、フォームの見た目をカスタマイズするために、HTMLを理解していることは必要ですので、ぜひ覚えておいてください。

今回は以上になります。最後までご覧頂き、ありがとうございました。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。

教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。

検索して記事を見つける

探したいキーワードを入力・検索して記事を見つけたい方はこちら

-HTML