入力フォームをHTMLで作成する方法は？設定やフォームデザインの4つのポイントを解説

「HTMLで入力フォームを作成したいが、何から始めればいいのか分からない」
「formタグやinputタグの使い方が分からず、作業が進まない」

このようなお悩みをお持ちではありませんか？

HTMLの入力フォームは、ユーザーからの情報を受け取るための重要な機能です。お問い合わせやアンケートなど、さまざまなWebサイトで利用されています。

しかし、初めてフォームを作成する際は、構造やタグの使い分けに戸惑う方も多いのではないでしょうか。

本記事では、HTMLで入力フォームを作成する方法を解説します。基本的なタグの書き方から、入力支援やデザインの工夫まで幅広く紹介します。

また、HTMLの知識不要で入力フォームを作成できるフォーム作成ツール「formrun（フォームラン）」の活用もおすすめです。

「formrun（フォームラン）」は、以下の特徴があります。

• プログラミング不要
• 集計がリアルタイムで行えるワンクリックでreCAPTCHA設定可能
• 入力補助機能がつけられるマウス操作でデザイン設定可能
• ワンクリックでrecapcha設定可能
• お問い合わせ管理、メール対応も可能
• googleアカウントがある人は簡単に登録が可能自動メールやChatworkなどツール通知までついている
• ここまでできて、基本料金無料

ビジネス用フォーム作成ツール「formrun」では、クリック操作で手軽にフォームの作成ができ、コードは不要です回答の集計も簡単です。詳しくはこちらをご覧ください。直感的にフォームを作成するなら、「formrun」を一度お試しください。

入力フォームをHTMLで作成する際は、「<form>タグ」を使ってフォームの送信領域を定義します。「<form>タグ」は、ユーザーが入力したデータをサーバーに送信するための囲い枠です。

基本的な書式は以下の通りです。

action属性には送信先のURLを指定し、method属性では送信方法を指定します。通常は「post」方式が用いられ、ユーザーの個人情報などを安全にサーバーへ送信可能です。

フォームの入力欄を設定する部品は次の3種類です。

• テキストフィールドを「<input>タグ」で指定する
• 複数行の入力フィールドを「<textarea>タグ」で指定する
• 送信ボタンを「<input type="submit">」で指定する

各項目の詳細を説明します。

テキストフィールドは、1行の文字列を入力するための基本的な入力欄です。HTMLでは「<input>タグ」に「type="text"」を指定すると、テキスト入力欄を作成できます。

さらに「name属性」を設定すれば、サーバー側でデータの識別が可能です。メールアドレスを入力させる場合は以下の通り記述します。

「name属性」は、送信されたデータの名前を指定する役割があり、半角英数字で意味のある名前を付けることが推奨されます。テキストフィールドは、氏名やメールアドレス、会社名などで利用される入力欄です。

複数行のテキストを入力させたい場合は、「<textarea>タグ」を使用します。長文のコメントやお問い合わせ内容を入力できる欄を作成できます。

「cols属性」はテキストエリアの横幅を、「rows属性」は高さをそれぞれ指定する属性です。「cols="30" rows="5"」を設定した場合、30文字×5行分の入力欄を作成できます。

また、「name属性」を設定すると、入力内容をサーバーへ適切に送信できます。「textarea」はユーザーの意見や説明文など、1行に収まらない情報を入力させたい場合に有効です。

フォーム内に入力された情報をサーバーへ送信するには、送信ボタンの設置が必要です。送信ボタンは、「<input>タグ」に「type="submit"」を指定して作成します。

「value属性」を設定すると、ボタンに表示される文言を自由に変更可能です。「確認する」「送信する」など、ボタンの役割を明確に伝える文言にすれば、ユーザーにとってより分かりやすく表示できます。

送信ボタンをクリックすると、フォーム内のすべてのデータが「<form>タグ」の「action属性」で指定されたURLに送信されます。

HTMLのみで作成できる入力フォームのサンプルを以下に記載しました。

HTMLだけでも、十分に使用可能な入力フォームを作成可能です。フォントや余白、カラーリングを調整すれば、シンプルながらも洗練された印象を与えられます。

自動入力機能を追加してユーザーの負担を軽減する手順は次の通りです。

1. inputタグに「autocomplete属性」を設定する
2. inputタグの「name属性」を設定する

各工程の詳細を説明します。

「autocomplete属性」は、ブラウザが以前に入力された情報を記憶し、再入力時に候補として表示する仕組みです。各「<input>タグ」に対して「autocomplete属性」の明示で、自動補完を有効または無効に設定できます。

上記のとおり、「name」や「email」「tel」「postal-code」など、意味に応じたキーワードを設定すると、適切な項目に自動入力が働きます。ただし、セキュリティやプライバシーの観点から、パスワードや個人情報を扱うフォームでは自動入力機能は慎重に扱わなければなりません。

自動入力機能を適切に動作させるために、「name属性」の正確な設定が大切です。ブラウザは「name属性」を元に、どのデータがどの入力欄に対応するかを判断しています。

以下の通り「name属性」を指定しましょう。

意味のある「name属性」を設定し、「autocomplete属性」と組み合わせることで、ユーザーが一度入力した情報が次回以降もすばやく反映されます。フォームの仕様を少し工夫するだけで、ユーザビリティが大きく向上します。

HTMLで作成した入力フォームをユーザーフレンドリーにするコツは次の6つです。

• キーボード設定を入力欄に最適化する
• ページを離脱する際にアラートを表示する
• レスポンシブデザインに対応する
• シンプルで直感的なデザイン・構成にする
• 必須項目と任意項目を一目で判断できるようにする
• プルダウンを効果的に活用する

各項目の詳細を説明します。

スマートフォンから入力するユーザーの利便性を考慮すると、入力欄に応じたキーボードの表示が重要です。

「<input>タグ」の「type属性」を適切な設定で、入力内容に応じたキーボードが表示されます。たとえば電話番号なら「type="tel"」、メールアドレスなら「type="email"」を指定すると、数字や記号が入力しやすいレイアウトを実現できます。

上記の通り設定すると、スマートフォン利用時の入力ストレスを軽減できます。

フォームの入力中にうっかりページを離れてしまうと、せっかく入力した内容が失われる可能性があります。入力途中の内容の喪失を防ぐために、入力中にページ遷移する際、確認アラートを表示するJavaScriptの活用が効果的です。

以下はJavaScript活用の一例です。

ページを離脱する際にアラートを表示し、ユーザーが予期せず入力データを失うリスクを軽減しましょう。

スマートフォンやタブレットなど、さまざまな画面サイズに対応したフォーム設計も大切です。フォームをレスポンシブ対応にするには、CSSのFlexboxやGrid、メディアクエリを活用して、レイアウトを可変にする方法が一般的です。

また、各入力欄に余白や行間をしっかり設けることで、小さい画面でも操作しやすくなります。モバイルファーストの視点でフォームを整え、入力途中の離脱を防げれば、コンバージョン向上につながります。

入力項目が多すぎたり、デザインが煩雑だったりすると、ユーザーはフォーム入力を途中でやめてしまう傾向があります。入力項目は本当に必要なものだけに絞り、視線の流れや配置を意識した設計が重要です。

ボタンやラベルはわかりやすい表現を使い、装飾を最小限に留めることで、直感的に使えるフォームが実現できます。ユーザーが入力中にストレスを感じる原因をできるだけ取り除き、回答率を高める工夫が大切です。

ユーザーが「どの項目が必須か分からない」と感じるフォームは、途中離脱の大きな原因になります。回答必須項目には「※必須」とラベルを付けることや目立つマークを表示しましょう。

任意項目は「任意」と明記すると、入力の優先度をユーザーが判断しやすくなります。視覚的な情報設計の工夫で、入力完了までのストレスを減らせます。

選択肢が明確な入力項目には、プルダウンメニューの活用で入力ミスを防止できます。プルダウンはHTMLの「<select>タグ」と「<option>タグ」を用いて実装可能です。

自由入力と比べて選択肢の誤記を防げることに加え、ユーザーが回答時に感じるストレスの軽減も期待できます。プルダウンはアンケートや申込フォームなどで活躍する形式です。

HTMLの知識がない場合や、手軽にフォームを作成したい場合は、専用のフォーム作成ツールを活用する方法がおすすめです。

フォーム作成ツールを使えば、HTMLコードの知識がなくても、デザイン性の高いフォームを短時間で作成できます。フォーム作成後は、「iframeタグ」や「scriptタグ」でWebサイトに簡単に埋め込むことも可能です。

HTMLでの手動作成に比べて手間と時間を省けるため、迅速に入力フォームを作成したい場合にフォーム作成ツールの活用が適しています。

アンケートフォーム作成ならフォーム作成ツール「formrun」がおすすめです。「formrun」を利用するメリットは下記の3点です。

• フォーム作成が簡単にできる
• EFO機能（フォーム最適化）で回答者の離脱を防げるアンケート回答の集計も自動でできる
• フォーム共有や埋め込みが簡単

非エンジニアでもマウスだけの簡単な操作中心でフォームが作成できるため、フォーム利用までに準備期間が短い場合にも役立ちます。

同じフォーム作成ツールのGoogleフォームと比べてもセキュリティ条件が高く、細かい設定まで機能が豊富となっているため、ビジネス利用目的では、formrunのユーザーのうち7割がGoogleフォームから変更しています。

メールアドレスがあれば無料登録可能！無期限で無料プランが利用できるのでformrunでぜひフォームを作成してみてください。

テンプレートはこちらをご覧ください。
>> テンプレート一覧

送信する際のエラーや、項目数が表示されていない、ブラウザを間違えて閉じてしまうなど、フォームにまつわるよくある上記のようなストレスが原因でフォームから離脱するユーザーは7割を超えると言われています。

それらの離脱を防ぐため、回答者が便利にフォームを利用できる取り組みとして、残項目数表示や、ページ分割機能、入力途中保存、リアルタイムでのエラー表示機能などがあります。

そのためユーザーは、「自分の入力内容に間違いがないか」「あと何分で完了するか」などを常に把握できるため、回答負担が大幅に減ります。

EFO機能を導入するには約30,000円の費用がかかることが一般的ですが、formrunでは、わずか3,000円〜EFO機能を導入できます。
簡単に、機能も豊富なformrunの
ぜひformrunでEFO機能を導入し、フォームの通過率が上がる経験をしてみてください。

formrun（フォームラン）で作成したフォームは簡単に共有・サイトへ埋め込みできます。

フォームランではフォームを作成したあと自動でフォームのQRコードやURLを生成できますしてくれます。発行されたURLの一部は用途に合わせてお好きな文字列に書き換えることも可能です。

また、サイト内への設置も可能なのでコーポレートサイトのお問い合わせページや、ファーストビューにリード獲得用フォームなどを埋め込んでご利用いただけます。

設置方法も簡単で、フォーム作成後に発行できるHTML要素（スクリプト）をサイトにコピー＆ペーストで貼り付けるだけで埋め込みができます。詳しくはこちらをご覧ください。

HTMLを使った入力フォームの作成は、基本的なタグと属性を正しく理解すれば誰でも実装可能です。しかし、ただ構造を整えるだけでなく、ユーザーの使いやすさを意識したフォーム作成で、得られる成果は大きく変わります。

キーボード設定やラベルの明示、自動入力機能の追加など、細かな工夫により、ユーザーが入力しやすいフォームを作成しましょう。

また、フォーム作成ツールを活用すると、コーディング不要で機能的なフォームを簡単に実現できます。特に、入力フォームを簡単な操作で作成できるフォーム作成ツール「formrun（フォームラン）」がおすすめです。

「formrun（フォームラン）」は、以下の特徴があります。

• プログラミング不要
• 集計がリアルタイムで行える
• 入力補助機能がつけられる
• ワンクリックでreCAPTCHA設定可能
• マウス操作でデザイン設定可能
• お問い合わせ管理、メール対応も可能
• 自動メールやChatworkなどツール通知までついている
• Googleアカウントがある人は簡単に登録が可能
• ここまでできて、基本料金無料

ビジネス用フォーム作成ツール「formrun」では、クリック操作で手軽にフォームの作成ができ、コードは不要です。、回答の集計も簡単です。詳しくはこちらをご覧ください。ノーコードで用途に合わせたフォームを作成するなら、「formrun」をぜひ一度お試しください。