HTMLでフォームをつくる - koheitakahashiのブログ

はじめに

Sinatraでメモアプリをつくるプラクティスに取り組んでいますが、HTMLについて3ヶ月ほど前に学んだにも関わらず、忘れていることが多く、自分で中々書くことができませんでした💦

悔しいので、HTMLでのフォームの作り方を自分なりにまとめてみたいと思います💪

実際のコード

他のサイトを参考にお問い合わせフォームを作ってみたのが、以下になります。

<!DOCTYPE html>
  <head>
    <meta charset='utf-8'>
    <title>お問い合わせフォーム</title>
  </head>
  <body>
    <div class="form">
      <form action="/form", method="post">
        <h1 class="form__title">お問い合わせフォーム</h1>
        <div class="form-item">
          <label class="form-item__label">タイトル</label>
          <input type="text", name="title", value="タイトル" class="form-item__text-input">
        </div>
          <div class="form-item">
            <label class="form-item__label">本文</label>
            <textarea name="body" cols="30" rows="10"></textarea>
          </div>
        <div class="form-item">
          <label class="form-item__label">ボタン</label>
          <div class="form-item__action">
            <button type="submit">送信</button>
          </div>
        </div>
      </form>
    </div>
  </body>

f:id:NMP300:20191003200544p:plain — 出来上がったお問い合わせフォーム

コード解説

`form`タグ

まず、htmlにはフォームタグがあります。

<form action="/form", method="post">
</form>

actionはHTTPメソッドを投げる対象のURIに、methodには投げたいHTTPメソッドを記述します。

タイトル入力部分

タイトル入力部分は以下のコードで構成されています。

<input type="text", name="title", value="タイトル" class="form-item__text-input">

type="text"は1行のテキストボックスを作ります。

nameはその名の通り、入力されたテキストをどのような名前で扱うかです。これはアプリケーション側が入力データを受け取るときに活躍します。

valueはテキストボックスの初期値を定義します。

本文入力部分

本文入力部分はほぼタイトル入力部分と同じですが、本文は複数行にわたると考えられるため、<textarea>タグを使用します。

<textarea name="body" cols="30" rows="10"></textarea>

<input>タグと異なり、<textarea>タグは閉じタグが必要です。

ボタン部分

以下がボタン部分です。

<button type="submit">送信</button>

<button>タグでボタンを作成することができます。

typeはボタンの種類を表します。submit(フォームのデータをサーバーに送信する)、reset(入力を初期値に戻す)、button(汎用的なボタンを作成する)の3種類があります。

以上の要素から、今回のフォームは構成されています👍

最後に

HTMLはクラス名のつけ方、<div>の使い方とまだまだ奥が深そうです💦 基本となるものだと思うので、折に触れて復習していきたいです💪

参考サイト

value 属性 | HTML5 タグリファレンス | W3 Watch Reference

HTMLタグリファレンス

初めての HTML フォーム - Web 開発を学ぶ | MDN

ボタン要素 - HTML: HyperText Markup Language | MDN

FjordbootcampのCSS課題の見本