<form>タグの使い方基本+応用編~HTMLでフォームを作成する方法~

読者とサイトの運営を繋げるお問い合わせフォーム。そんな便利なお問い合わせフォームを作成できるタグがHTMLにあるのをご存じでしょうか?

HTMLでフォームを作成するには?

今回は、formタグの

・基本的な使い方
・コピペOK!実用的なフォームの作成方法

について説明します。さらにこの記事一つで完璧なフォームを作成できるように、その他の必要不可欠な要素についても解説!

formタグとは

formタグの読み方

formタグはそのまま「フォームタグ」と読みます。フォームとは英語で「形」や「書式」という意味を持っていますが、IT業界ではユーザからの入力内容を受け付ける部分を意味します。

formタグの説明

formタグは、Webサイトの読者に任意の内容を入力、送信させる際に使用する要素です。通常はこのformタグに合わせて、inputタグやselectタグ、textareaタグなど、フォームを構成する各部品と一緒に使用されます。

formタグで利用できる属性

formタグでは、HTMLの全要素で使用できるグローバル属性の他、以下の属性を使うことができます。

属性 説明
accept-charaset属性  サーバが取得する文字エンコーディングのリスト(スペース区切りで複数記述可能)
action属性  送信された情報を処理するプログラムのURL
atocomplete属性 input要素がブラウザーによる値の入力補完を受けるかを設定する
・off フォーム入力時に、ブラウザが入力補完をサポートしない
・on ブラウザはユーザの以前の入力に基づき、入力候補をサポートする
enctype属性  送信データのエンコード・タイプを指定する
 method属性  フォーム送信時にブラウザが使用するHTTPメソッド
 name属性  フォームに任意の名前を定義する
 novalidate属性  フォーム送信時の検証について設定する
 target属性 フォーム送信完了後、応答の結果を表示位置を示す

・_self 既定値
・_blank 名前を付けていないHTML5の閲覧コンテキストに読み込む
・_parent 現在のフレームの親閲覧コンテキストに読み込む
・_top 応答をもとのウィンドウ全体に読み込み、他を全てキャンセ     ルする

注意
accept属性はHTML5で使用から削除されています。代替として<input>要素のaccept属性を使用してください。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 12
Firefox  完全対応
nternet Explorer 完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

formタグの基本的な使い方

formタグの使い方

formタグは、他のフォームを構成する部品と一緒に使用されます。ここでは名前とメールアドレスを入力するために、<input>タグと<label>タグを使用しました。

CSSではテキストエリアと表示項目の間に10pxの余白を、さらに送信ボタンを中央に表示するために<div>タグを使っています。

また<ul>タグと<li>タグを使用して、<li>タグごとに項目を入れていますが、これはフォームを扱いやすくするためです。<li>タグで区切ることで、自動的に改行を促すことができるのです。

See the Pen
NWrONyq
by rabbittyu (@rabbittyu)
on CodePen.

ここでは実際によく使われるフォームの作り方をご紹介します。フォーム作りは作業自体は多いですが、作業内容は非常に単純で明快です。コピペだけでも十分作成できる内容ですので、ぜひ実際にコードを書いて、練習してみてください。

まずはformタグを設置し、次に<form></form>の間に部品を設置していきます。formタグでは、action属性とmethod属性を設定しました。action属性で送信先のサーバなどの情報を、methodで送信することを明示します。

続いて名前を入力するテキストエリアを設置します。labelタグの中でfor属性を使用し、inputタグの中でid属性を使用することで、同じ値を持つ部品動詞を関連付けられます。

簡単に言うと、”お名前”の部分をクリックしても、テキストエリアにフォーカスされるのです。性別を送信する部分でも、labelタグの関連付けを使用しました。

そして居住している地域の選択肢はセレクトボックスで行わせます。selectタグを設置し、その中にoptionタグで選択肢を設置します。ここでvalueに設定した値が、データベースに送信され、集計されます。

意見を入力する部分ではtextareaタグで、送信ボタンはbuttonタグで作成しました。CSSでは枠線と、フォームの背景色、labelタグの位置設定を行っています。なお性別を選択する部分のみ、後からlabelタグの余白を調整し上書きしています。

See the Pen
form完成版
by rabbittyu (@rabbittyu)
on CodePen.

今回はformタグについて解説しました。フォームタグはフォームを作成するうえで、必須のタグなので、ある程度理解できているほうが好ましいでしょう。

しかしformタグだけではformは完成しません。labelタグ、inputタグ、selectタグ+optionタグ、textareaタグ、buttonタグなど、フォームの部品を構成するタグも一緒に覚えておくのがおすすめです。

参考文献:
MDN web docs <form>
MDN web docs 初めてのフォーム
CODE KITCHEN

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング