Web Form 初歩

ウェブページのフォームとは

ウェブページのフォームにより、
クライアントは、
データをウェブサーバーに送り、
ウェブサーバーを操作し、
ログインすることが出来るようになります。
また、データの保存、データの更新、
データの削除などの処理をします。
初歩的なフォームのコードは
次の様に書きます。
form.html


<form action="/mypage" method="post">
    <ul>
      <li>
        <label for="name">名前:</label>
        <input type="text" id="name" name="name">
      </li>
      <li>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" name="email">
      </li>
      <li>
        <label for="msg">メッセージを入力:</label>
        <textarea id="msg" name="message"></textarea>
      </li>
     </ul>
     <li class="button">
      <button type="submit">メッセージ送信</button>
    </li> 
  </form> 

下がその画像になります。

form は中央に、 label は左に配置、 input、textareaは右に配置、 メッセージ送信のボタンを下に配置するためには、 cssファイルにコードを書きます。 form.cssは、 簡単に書くと次の様になります。

form {
    margin: 0 auto;
    width: 500px;
  }
  
  label {
    display: inline-block;
    width: 90px;
    text-align: left;
  }
  
  input, textarea {
    font: 1em sans-serif;
    width: 200px;
    box-sizing: border-box;
    border: 1px solid #999;
  }