HTMLフォームを作ってみよう | HTML / CSS基礎

前のページでは、

背景画像
グラデーション
overlay
ヒーローセクション

などを作りました。

今回は、

ユーザーが入力するUI

である、

form

を学んでいきます。

Webサイトでは、

お問い合わせ
ログイン
会員登録
検索
コメント投稿

など、フォームは非常に重要です。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

form とは？

form は、

入力内容を送信するためのHTML

です。

例えば、

名前
メールアドレス
パスワード

などを入力できます。

最初の form

<form>

  <input type="text">

  <button>
    送信
  </button>

</form>

input

<input>

は、

入力欄

です。

かなり大量に使います。

type 属性

input は、

type=""

によって種類が変わります。

text

<input type="text">

普通の文字入力です。

password

<input type="password">

入力内容が隠れます。

ログイン画面などで使います。

email

<input type="email">

メールアドレス向けです。

ブラウザが、

メール形式っぽいか

をチェックしてくれます。

placeholder

<input
  type="text"
  placeholder="名前を入力"
>

これは、

入力例

を表示します。

button

<button>
  送信
</button>

はボタンです。

かなり頻出です。

button の type

実は button は、

form の中だと送信扱い

になります。

つまり、

<button>

だけでも、

type="submit"

とほぼ同じです。

submit

<button type="submit">

は、

フォーム送信

を行います。

label

かなり重要です。

<label>
  名前
</label>

これは、

入力欄の説明

です。

label と input を組み合わせる

<label>
  名前
</label>

<input type="text">

実務では label が重要

初心者は省略しがちですが、

実務ではかなり重要

です。

理由は、

何を入力するかわかる
アクセシビリティ向上
スマホ操作しやすい

など。

よくある form UI

<form class="contact-form">

  <label>
    名前
  </label>

  <input
    type="text"
    placeholder="山田 太郎"
  >

  <label>
    メールアドレス
  </label>

  <input
    type="email"
    placeholder="sample@example.com"
  >

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

</form>

CSS を追加する

.contact-form {
  max-width: 500px;

  margin: 0 auto;

  display: flex;
  flex-direction: column;

  gap: 16px;
}

input のデザイン

input {
  padding: 12px;

  border: 1px solid #ccc;
  border-radius: 8px;

  font-size: 16px;
}

なぜ font-size: 16px が重要？

スマホでは、

input の文字が小さい

と、

自動ズーム

されることがあります。

実務ではかなり重要な知識です。

focus を使う

input:focus {
  outline: none;

  border-color: #2563eb;

  box-shadow: 0 0 0 4px rgba(37,99,235,0.2);
}

なぜ outline を消す？

ブラウザ標準の focus は、

デザインが古め

なことがあります。

そのため、

独自デザイン

へ変えることがあります。

textarea

長文入力には、

<textarea></textarea>

を使います。

お問い合わせでよく使う

<textarea
  placeholder="お問い合わせ内容"
></textarea>

textarea はサイズ変更できる

ブラウザによっては、

右下をドラッグ

してサイズ変更できます。

resize

これを制御できます。

textarea {
  resize: vertical;
}

select

選択肢を出したい場合です。

<select>

  <option>
    東京
  </option>

  <option>
    大阪
  </option>

</select>

checkbox

<input type="checkbox">

チェックボックスです。

radio

<input type="radio">

ラジオボタンです。

form は超重要

今後、

PHP
Laravel
データベース

へ進むと、

form が中心

になります。

例えば、

ログイン
登録
編集
検索

など、ほぼ全部フォームです。

まとめ

今回は、

form

を学びました。

input
textarea
select
checkbox
radio
button
label

など。

このあたりを理解すると、

「ユーザーが操作する画面」

を作れるようになります。