フォームの作成について(お問い合せフォーム)

初めに!

  • 学習した内容をアウトプットするために記事を書きます。

  • 少しでも参考になるようにわかりやすく書いていきます。

フォームとは?

  • クライアント側が情報を入力してサーバーに情報を送信する仕組み。

完成図

コード

<body>
  <h1>ログインフォーム</h1>
  <form action="#" method="post">
    <input type="text" name="username" placeholder="ユーザーネーム">
    <input type="password" name="password" placeholder="パスワード">
    <input type="submit" value="ログイン">

  </form>
</body>

解説

  • formタグを記述してformの範囲を明確にする。

  • action属性にはパスを入力するが今回はダミーのパスである#を挿入。

  • method属性にはデータを送信する役割を持たせるのでpostメソッドを利用する。

  • 今回はユーザーネーム、パスワード、ログインと3つの入力フォームがあるのでそれぞれ準備する。

  • inputタグの中にはtype属性、name属性、、placeholder属性、value属性がある。

  • type属性には必要なタイプのフォームに応じて入力する。例えば textであれば短い文字(1行)を入力することができる

  • name属性はサーバー側プログラムがフォーム側から送られたデータを判別する。 

  • placeholder属性は記入欄に文字を表示させる。

  • value属性は今回は送信ボタンに付属するので送信ボタンの"送信"を記述するために利用する。

  • inputタグをformタグないに挿入することでフォームが完成する。

まとめ

  • 入力フォームを作成する基本としてはformタグ中にinputタグを入れることで作成する。

  • formタグの属性としてはaction属性、method属性がある。

  • inputタグの属性としてtype属性、name属性、value属性、placeholder属性がある。