HTMLフォームの作り方

既存のHTML文書にフォームを追加するには、<form></form>タグの中に記述します。これらのタグは、テキストフィールド、リスト、ボタンなど、すべてのフォームデータのコンテナとして機能します。誰かがフォームを通して情報を送信すると、そのデータは保存、処理、送信、または内容に基づいて結果を表示するサーバーに送られます。<form> タグをどのように設定すればフォームが思い通りに動作するのか、また情報を収集するためにどのように入力を追加すればよいのかを学びましょう。

パート 1

フォームタグの作成

1. お好みのテキストエディタで HTML ドキュメントを開きます。HTMLフォームの内容は、<form>タグと</form>タグの中に入力しなければなりません。これらのタグは、<div></div>や<table></table>のような他のコンテナタグと同様に、フォームのコンテナとして機能します。

   • <form></form>タグの中や、<form></form>タグの中を使って、思い通りのフォームを作ることができます。
2. <form>要素を開いてください。フォームを開始するには、ファイル内のフォームを開始する場所までスクロールし、<form>をその行に入力します。このタグはフォームの始まりを意味します。
3. <form>タグに "action="属性を追加します。これは、<form>タグにフォームのデータをどう扱うかを指示するものです。これを定義するには、<form>タグにaction="path_to_script "を追加します。

   • 例えば、<form action="/cgi-bin/myformscript.pl">（フォームデータを解析するスクリプトが、あなたのサーバーの "cgi-bin "というディレクトリにある場合）。
   • スクリプトが別のサーバーにある場合： <form action="https://www.wikihow.com/form">
   • フォームデータを（スクリプトではなく）電子メールアドレスに送信する場合： <form action="mailto:[e-mail]" enctype="text/plain">
4. フォームデータの送信方法を決める。フォームデータの送信先を定義したところで、フォームがデータを「GET」するのか「POST」するのかを決めなければなりません。そして、<form>タグの中のmethod属性に "GET "か "POST "のどちらかを追加します。

   • リソースからデータを要求するにはmethod="get "を使います。GETを使うのはデータを取得するときだけにしてください。パスワードや社会保障番号のような機密情報には決してGETを使ってはいけません。
   • method="post "は、データを送信して処理するときに使います。パスワードやクレジットカード番号など、フォームのデータが機密性の高い場合に使用してください。
   • <form action="/cgi-bin/myformscript.pl" method="post">のようになります。

パート2

フォームオプションの追加

1. <input type="text" />を使ってテキストボックスを作成します。空白のボックスを追加して、訪問者が名前やコメントなど必要なものを入力できるようにします。これは<form>タグの後の新しい行で始めます。

   • 例えば、「First Name: <input type="text" id="name" />」とすると、「First Name:」という前置きのテキストボックスが作成されるので、ユーザーはボックスに何を入力すればよいかがわかります。
   • id="の値（例では "name"）は、データで何をするかに合わせて変更してください。データがスクリプトに送信される場合、この値はスクリプト内の何かに対応する必要があります。
2. パスワードボックスを作成します。スクリプトでユーザーにパスワードを入力させる場合は、別の<input />を追加します。

   • 新しい行にPassword: <input type="password" name="password" />と入力する。
3. オプション用のラジオボタンを追加する。訪問者に項目のリストから選んでもらいたい場合は、ラジオボタンでオプションのリストを作成します。そのためには、"type "属性を "radio "に設定した<input />タグを使用します。

   • 犬 "か "猫 "のどちらかを選択するラジオボタンを作成する：
     • <input type="radio" name="pets" value="dog" /> 犬
     • <input type="radio" name="pets" value="cat" /> 猫
   • ラジオ・ボタンのグループは、すべて同じ "name "属性を持つべきです。
4. もっと高度なフォーム・オプションを学ぶフォームに含めることのできる入力やリストの種類は非常にたくさんあります。HTMLフォームの知識を広げるには、.NET Frameworkをブラウズするのが一番です。Additionally, there are many helpful wikiHows articles to walk you through setting up items like selectable lists, , and .

パート 3

フォームを閉じる

1. 送信 <button> を作成します。訪問者がフォームに入力したら、送信ボタンをクリックして送信する必要があります。以下に例を示します：

   • <button type="submit">メッセージを送信</button>.
   • Send your message "をボタンに表示させたいテキストに置き換えてください。
2. フォームの最後に</form>と入力します。このタグはフォームが終了したことを示します。フォームの内容はすべて<form>と</form>の中に記述することを忘れないでください。
3. ドキュメントをウェブサーバーにアップロードします。HTML文書にフォームを追加したら、それをウェブ・サーバーにアップロードしてテストしてみましょう！

この記事は、CC BY-NC-SAの下で公開されている " How to Create HTML Forms " を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。