HTML手打ち、inputタグで部品作成

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

Webページを作成する際、フォーム入力欄やボタンなどのUI部品を作るには<input>タグが欠かせません。HTMLを手打ちで学ぶことで、基本的なフォームの仕組みや各要素の動作を理解し、柔軟にカスタマイズできるようになります。

本記事では、HTMLの<input>タグを使ってさまざまな入力フォーム部品を作成する方法を解説します。初心者向けに実例付きで説明するので、HTMLを手打ちで学びたい方はぜひ参考にしてください。

inputタグの基本構造

inputタグとは？

<input>タグは、ユーザーがデータを入力できるフォーム要素を作成するためのタグです。HTML5では、多くの入力タイプ（type属性）が追加され、より便利に使えるようになっています。

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

<input type="text" name="username">

ここで、

  • type="text" → テキスト入力フィールドを作成
  • name="username" → 送信時のデータ識別名

このように、type属性を変更することで、さまざまな入力部品を作ることができます。

inputタグを使った部品作成

基本的なテキスト入力欄

<label for="name">名前:</label>
<input type="text" id="name" name="name" placeholder="氏名を入力してください">

ポイント

  • placeholder="..."で入力例やヒントを表示
  • labelタグを使うとアクセシビリティが向上

パスワード入力欄

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

特徴

  • type="password"を指定すると入力内容が非表示（●●●）になる

ラジオボタン（単一選択）

<p>性別を選択:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>

ポイント

  • name属性を同じにすると、一つだけ選択可能なラジオボタンになる
  • value属性には、選択時に送信する値を設定する

チェックボックス（複数選択）

<p>趣味を選択:</p>
<input type="checkbox" id="music" name="hobby" value="music">
<label for="music">音楽</label>

<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">スポーツ</label>

チェックボックスの特徴

  • 複数選択が可能
  • checked属性を追加するとデフォルトでチェック済みにできる
<input type="checkbox" id="reading" name="hobby" value="reading" checked>
<label for="reading">読書</label>

HTML5の便利なinputタイプ

HTML5では、新しいinputタイプが追加され、より直感的な入力フィールドが作成可能になりました。

メールアドレス入力（type="email"）

<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
  • type="email"を指定すると、メール形式での入力を求める
  • requiredを追加すると、未入力時に警告が出る

数値入力（type="number"）

<label for="age">年齢:</label>
<input type="number" id="age" name="age" min="18" max="100" step="1">
  • min・max → 入力可能な範囲を指定
  • step → 増減の単位を設定（例: 1ずつ増減）

日付入力（type="date"）

<label for="birthday">生年月日:</label>
<input type="date" id="birthday" name="birthday">
  • カレンダーUIが表示され、直感的に日付を選択可能

ファイルアップロード（type="file"）

<label for="file">ファイルを選択:</label>
<input type="file" id="file" name="file">
  • 画像やドキュメントなどのファイルをアップロードできる

inputタグを活用したフォームの作成

すべてのinputタグを組み合わせ、シンプルなお問い合わせフォームを作ってみましょう。

<form action="submit.php" method="post">
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required><br>

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

  <label for="message">メッセージ:</label><br>
  <textarea id="message" name="message" rows="4" cols="50"></textarea><br>

  <input type="submit" value="送信">
</form>
  • <form>タグで入力データを送信
  • requiredで必須入力を設定
  • <textarea>を使い、複数行入力が可能なフィールドを追加

まとめ

<input>タグを手打ちで理解することで、フォームの仕組みや各入力タイプの違いを把握できるようになります。

今回のポイント

  • type属性を適切に設定し、さまざまな入力フォームを作成可能
  • labelタグを組み合わせることで、ユーザーにとって使いやすいフォームになる
  • HTML5の新しいinputタイプを活用し、入力をより直感的に

実際にコードを書きながら試してみることで、HTMLの理解が深まります。まずはシンプルなフォームから作り、徐々にカスタマイズを加えていきましょう！

HTML手打ちAI,PHP,ドキュメント