フォームを作る - Output Diary

f:id:kina_kq:20210504075901j:plain

フォームに必要な要素

フォームに必要な要素は、

<form>、<label>、<input>、<textarea>、<button>の５つです。

<form>要素

<form>要素は、フォーム関連の集まりを表す要素です。

すべてのフォームは<form>要素から始まります。

<form action="/my-handling-form-page" method="post">

</form>

action 属性は、フォームで収集したデータを送信すべき場所 (URL) を定義し、
method 属性は、データを送信するために使用する HTTP メソッド ( get または post ) を定義します。

<label>、<input>および<textarea>要素でウェジェットを追加する

連絡フォームはシンプルで 3 つのテキストフィールドを持っており、それぞれに対応した <label> がついています。

label要素で関連付けを行うと、ラベル部分のクリックでその部分を選択できるようになります。ラジオボタンやチェックボックス選択のときに役立ちます。

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
 </ul>

<li> 要素はコードを扱いやすく構造化するとともに、スタイル設定を容易にするために用いられます。

<input> 要素でもっとも重要な属性は、type 属性です。この属性は <input> 要素の見た目や動作を定義するため、とても重要になっていきます。

<button>を追加する


<li class="button"> <button type="submit">メッセージを送信</button> </li>

<button> 要素は type 属性を受け付けます。

submit、reset、buttonの3 種類の値を受け付けます。

submit ボタンをクリックするとフォームのデータを<form>要素の action 属性で定義したウェブページへ送信します。
reset ボタンをクリックすると、直ちにすべてのフォームウィジェットを既定値にリセットされます。UX の観点ではこのボタンはバッドプラクティスであると考えられており、どうしても必要な理由がない限りこのボタンの使用は避けるようにしなければならないといわれています。
button ボタンをクリックすると...何も起きません。おかしなことのように見えますが、JavaScript を使用してカスタムボタンを作成するために驚くほど役立ちます。

見栄えを良くする

<style>

</style>

# <style>タグの中に、以下を入れると見栄えがよくなる

form {
  /* フォームをページの中央に置く */
  margin: 0 auto;
  width: 500px;
  /* フォームの範囲がわかるようにする */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  /* すべてのラベルを同じサイズにして、きちんと揃える */
  display: inline-block;
  width: 90px;
  text-align: right;
}

input, textarea {
  /* すべてのテキストフィールドのフォント設定を一致させる
     デフォルトで、textarea は等幅フォントが設定されている */
  font: 1em sans-serif;

  /* すべてのテキストフィールドを同じサイズにする */
  width: 300px;
  box-sizing: border-box;

  /* テキストフィールドのボーダーの外見を同一にする */
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  /* アクティブな要素を少し強調する */
  border-color: #000;
}

textarea {
  /* 複数行のテキストフィールドをラベルにきちんと揃える */
  vertical-align: top;

  /* テキスト入力に十分な領域を与える */
  height: 5em;
}

.button {
  /* ボタンを他のテキストフィールドと同じ場所に置く */
  padding-left: 90px; /* label 要素と同じサイズ */
}

button {
  /* このマージンは、ラベルとテキストフィールドの間のスペースと
     おおよそ同じスペースを表す */
  margin-left: .5em;
}

保存して再読み込みすればOKです。

データをウェブサーバーに送信する

<form>要素はaction属性とmethod属性により、どこへどのようにデータを送信するかを定義します。

フォームコントロールにnameをつけます。

これらの名前はクライアント側とサーバー側の両側で重要になります。ブラウザー側ではそれぞれのデータにどのような名前をつけるかを示すものであり、サーバー側では名前によってそれぞれのデータを扱うことができます。フォームデータは名前/値のペアとしてサーバーに送信されます。

データに名前をつけるために、各々のデータを集めるフォームウィジェットの name 属性を使用しなければなりません。

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>

  ...

この例では、フォームはそれぞれれ"user_name"、"user_email"、"user_message" と名付けられた 3 つのデータを送信します。これらのデータは URL "/my-handling-form-page" へ、HTTP POST メソッドで送信します。

サーバー側では URL "/my-handling-form-page" のスクリプトが、HTTP リクエストに埋め込まれた 3 つのキーおよび値のアイテムリストとしてデータを受け取ります。