HTMLでアンケートを作成する方法

アンケートは、データを収集し、ウェブサイトの訪問者からフィードバックを得るための素晴らしい方法です。テンプレートやソフトウェア、オンラインアンケート作成ツールを使用する必要はありません。HTMLコードで作成し、現在のウェブサイトデザインに合わせてCSSでスタイルを設定するだけです。この記事では、アンケートを作成する際に非常に柔軟性がある、最も一般的な質問タイプを紹介します。

1

メモ帳で基本的なHTMLファイルを作成します。メモ帳を開いて新しいWebページを作成し、次のコードを記述します：

2

HTMLファイルとして保存し、ブラウザで開きます。今のところファイルは空白ですが、タイトルが「アンケート」であることがわかります。

3

<form>タグを挿入します。HTMLのフォームタグは、データをサーバーに送信するために使用されます。すべての質問は<form>タグの中に記述します。

4

<form>タグのプロパティを挿入します。

• フォームタグに使用する主な属性は3つあります：
  • Action - フォームの送信先を指定します（通常は、送信されたフォームデータを読み込んで処理するスクリプトのファイル名です）。
  • Name - フォームに名前をつけるのは良いアイデアです。
  • メソッド - この値は POST であるべきです。これは、送信されたデータの送信方法をフォームに伝えます。

5

テキストフィールドを作成します。この例では、First Name Last Name ボックスとします。以下のコードを追加します：

• ここでは<input>要素を使用しています。これはユーザー情報を収集するために使用します。<input>要素には、テキスト・フィールド、チェック・ボックス、パスワード、ラジオ・ボタン、送信ボタンなどの種類があります。
• br'タグは、HTMLが空白を認識しないため、ウェブページ上に改行を作成します。
• このコードでは

6

ラジオボタンを作成します。ラジオボタンは、ユーザーが1つの選択肢だけを選択できるようにします。

• このコードは次のようになります：

7

チェックボックスを作成します。ラジオボタンとは異なり、複数の選択肢を選択することができます。

• このコードは次のようになります：

8

ドロップダウンリストを作成します。このタイプでは、訪問者がリストから選択肢を選ぶことができます。

• ドロップダウンリストのすべての位置に<select>タグと<option>タグを追加して使用します。
• このコードは次のようになります：

9

コメントボックスを作成します。

• <Textarea>タグを追加して使用します。<Textarea>タグは複数行のテキストボックスで、大きなテキストブロックを入力するのに適しています。
• このコードは次のようになります：

10

フォームを送信するための送信ボタンを作成します。

• 送信ボタンのvalue属性には、表示されるボタンのテキストが含まれます。
• このコードは次のようになります：

11

HTMLファイルを保存し、任意のブラウザで表示します。あなたの簡単なアンケートは以下のフォームで表示されるはずです：

この記事は、CC BY-NC-SAの下で公開されている「 HTMLでアンケートを作成する方法 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。