
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の理解が深まります。まずはシンプルなフォームから作り、徐々にカスタマイズを加えていきましょう!