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

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

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

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

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

 

【メルマガ登録はこちら!!】
HTML・CSS・お役立ち情報をGET

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・お役立ち情報をGET

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

 

まとめ

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

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

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

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

【メルマガ登録はこちら!!】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

PICK UP みんなの仕事インタビュー

WEBST8では、サロン・整骨院・整体・農業・ピアノ・ネイル・ライター・デザイナー・ネイル・美術品・不動産・士業などなど、個人でビジネスを持ち仕事をされている方がたくさんおられます。

ユニークで面白い仕事をされている方も多いので、実際に独立・起業・仕事 Web活用について実体験をインタビューいたしました。

インタビュー一覧

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ