読者とサイトの運営を繋げるお問い合わせフォーム。そんな便利なお問い合わせフォームを作成できるタグが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 既定値 |
対応ブラウザ
対応ブラウザは以下の通りです。
| 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
