HTML手打ち、formタグで入力フォーム作成

こんばんは！IT業界で働くアライグマです！

Webサイトやアプリケーションにおいて、ユーザーとのやり取りを実現するためには、入力フォームの設計が不可欠です。たとえば、会員登録、ログイン、問い合わせ、アンケートなど、さまざまな用途で入力フォームが活用されています。

フォームを作成する方法はいくつかありますが、本記事ではHTMLを手打ちしてformタグを使い、基本的な入力フォームを作る方法を解説します。初心者の方でも理解しやすいように、フォームの基本構造から実践的なサンプルコードまで詳しく説明します。

formタグの基本構造

formタグとは？

<form>タグは、ユーザーが入力したデータをサーバーへ送信するために使用されるHTMLの基本的なタグです。

基本的な構文は以下のようになります。

<form action="送信先URL" method="送信方法">
  <!-- 入力フィールド -->
</form>

action属性にはフォームの送信先URLを指定し、method属性には送信方法（GETまたはPOST）を指定します。

  • GETメソッド：URLのパラメータとしてデータを送信（検索フォームなどに適用）
  • POSTメソッド：データをリクエストの本文に含めて送信（ログインや問い合わせフォーム向け）

formタグ内で使われる主な要素

フォーム内で使用される主なHTML要素には、以下のようなものがあります。

タグ 説明
<input> テキストやパスワードなどの入力欄を作成
<textarea> 複数行のテキスト入力欄を作成
<select> プルダウンメニューを作成
<button> 送信ボタンやリセットボタンを作成

次のセクションでは、実際にフォームを作成する手順を紹介します。

基本的な入力フォームを作る

以下は、ユーザーの情報を入力するシンプルなフォームの例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入力フォーム</title>
</head>
<body>
    <h2>ユーザー情報入力フォーム</h2>
    <form action="submit.php" method="post">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name" required>
        <br><br>

        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required>
        <br><br>

        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" required>
        <br><br>

        <label for="gender">性別:</label>
        <select id="gender" name="gender">
            <option value="male">男性</option>
            <option value="female">女性</option>
            <option value="other">その他</option>
        </select>
        <br><br>

        <label for="message">お問い合わせ内容:</label>
        <textarea id="message" name="message" rows="4" cols="50"></textarea>
        <br><br>

        <button type="submit">送信</button>
        <button type="reset">リセット</button>
    </form>
</body>
</html>

コードの解説

  1. 名前・メールアドレス・パスワードの入力欄
    • type="text"：通常のテキスト入力
    • type="email"：メールアドレス形式の入力（正しい形式かチェック）
    • type="password"：パスワード入力（入力内容が隠れる）
    • required属性を付けることで未入力時にエラーメッセージを表示
  2. 性別の選択肢（プルダウンメニュー）
    • <select>タグを使い、選択肢を提供
  3. お問い合わせ内容（テキストエリア）
    • <textarea>タグを使用し、複数行の入力を可能に
  4. 送信ボタンとリセットボタン
    • <button type="submit">送信</button>：フォームを送信
    • <button type="reset">リセット</button>：入力内容をクリア

このように、基本的なHTMLタグを組み合わせることで、ユーザーが入力しやすく、シンプルなフォームを作成できます。

より使いやすいフォームにするための工夫

プレースホルダーの追加

入力欄にプレースホルダー（入力例）を表示すると、ユーザーが入力しやすくなります。

<input type="text" id="name" name="name" placeholder="山田 太郎">
<input type="email" id="email" name="email" placeholder="example@example.com">

入力制限を設定

適切な入力を促すために、入力制限を設定することが重要です。

<input type="text" id="name" name="name" minlength="2" maxlength="50" required>
<input type="password" id="password" name="password" minlength="8" required>
  • minlength / maxlength：最小・最大の文字数制限
  • required：必須入力

ラジオボタンの活用

性別の選択をラジオボタンで表現することも可能です。

<input type="radio" id="male" name="gender" value="male" checked> 男性
<input type="radio" id="female" name="gender" value="female"> 女性
<input type="radio" id="other" name="gender" value="other"> その他

まとめ

入力フォームは、ユーザーとの重要な接点です。適切な設計を行うことで、入力しやすさや正確性を向上させることができます。

本記事では、以下のポイントを解説しました。

  • formタグの基本構造とmethod属性の違い
  • inputやtextarea、selectなどの基本的なフォーム要素
  • 実際にHTMLを手打ちして、基本的な入力フォームを作成
  • 使いやすさを向上させるための工夫（プレースホルダーや入力制限など）

実践を通して、シンプルで使いやすい入力フォームを作成できるようにしましょう。

HTML手打ちAI,PHP,エラー,設計