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

HTML

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

投稿日:2018年1月7日 更新日:

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

HTML フォームタグ

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

 

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

 


 


 
 

フォームタグ 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フォームタグ「FORM」の使い方、およびFORMタグおよびフォームの部品となるINPUTタグ、SELECTタグ、TEXTAREAタグ、LABELタグなどについて説明しました。
 

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


弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

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

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【2019年度】WordPressブログアフィリエイトにおすすめのテーマ5選

ブログアフィリエイトを本格的に始めるなら、広告の埋め込み機能をはじめ記事装飾・デザイン機能が圧倒的に豊富なブログに特化した有料テーマがおすすめです。 当ブログで利用している「AFFINGER5」や関連サイトで利用している「賢威」をはじめ、アフィリエイトでおすすめ・実績のあるテーマを5選ご紹介していきます。

【初心者向け】WordPressを使ったアフィリエイトの始め方を徹底解説

これから初めてWordPressでアフィリエイトを始めようと思った時に、まず何から手をつけたら良いかわからないという方が多いのではないでしょうか。 本記事では、WordPressでアフィリエイトを始めたい初心者を対象にアフィリエイトの始め方をご紹介していきます。

【2019年版WordPress(ワードプレス)の使い方総まとめ】

本記事ではWordPress(ワードプレス)を使ってホームページまたはブログサイトを作りたい初心者の方向けに、WordPressの導入から使い方まで、総まとめ編として説明していきます。 WordPressの使い方をしっかり勉強したい方はぜひご覧ください。 (※)WordPress5.0から実装された最新のブロックエディター(グーテンベルグエディター)にも対応しています。

-HTML

Copyright© WEBST8 , 2019 All Rights Reserved Powered by AFFINGER5.