html カラム

HTMLのinput要素でユーザー入力を受け付ける方法

この包括的なガイドでは、HTMLの<input>要素を使用して、ウェブサイトやウェブアプリケーションにインタラクティブなフォームを作成する方法を学びます。<input>要素のさまざまな種類、属性、使用方法を詳しく解説し、ユーザーフレンドリーで機能的なフォームを構築するためのベストプラクティスを紹介します。

<input>要素とは？

  • フォームの基本的な構成要素であり、ユーザーからのデータ入力を可能にします。
  • 単一行のテキスト入力から、パスワード、日付、ファイルのアップロードまで、さまざまな種類の入力を処理できます。
  • type属性を使用して、入力の種類を指定します。

<input>要素の種類

<input>要素は、type属性の値を変更することで、さまざまな種類の入力フィールドを作成できます。以下は、よく使用される入力の種類と、その用途の例です。

入力の種類 説明 例
text ユーザー名、メールアドレスなどの短いテキスト入力に使用します。 
<input type="text" name="username" placeholder="ユーザー名">
password 入力された文字を隠してパスワードの入力を安全にします。 
<input type="password" name="password" placeholder="パスワード">
number 数値のみの入力を制限します。 
<input type="number" name="age" min="18" max="100">
email 有効なメールアドレス形式の入力を検証します。 
<input type="email" name="email" placeholder="メールアドレス">
date カレンダーから日付を選択できるようにします。 
<input type="date" name="birthday">
checkbox はい/いいえ、オン/オフなどの二者択一の選択肢を提供します。 
<input type="checkbox" name="agreement" value="agree"> 同意します
radio 複数の選択肢から1つだけを選択できるようにします。 
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性
file ユーザーがデバイスからファイルを選択してアップロードできるようにします。 
<input type="file" name="upload">
submit フォームのデータを送信します。 
<input type="submit" value="送信">
reset フォームの入力値をリセットします。 
<input type="reset" value="リセット">
button JavaScript関数の実行など、カスタムアクションをトリガーします。 
<input type="button" value="クリック" onclick="myFunction()">

<input>要素の属性

<input>要素には、入力フィールドの動作や外観を制御するためのさまざまな属性があります。以下は、よく使用される属性の一部です。

属性 説明
type 入力の種類を指定します。
name フォームデータを送信する際に使用する、入力フィールドの名前を定義します。
value 入力フィールドの初期値を設定します。
placeholder 入力フィールドにヒントを表示します。
required 入力を必須項目にします。
disabled 入力フィールドを無効化します。
readonly 入力フィールドを読み取り専用にします。
maxlength 入力可能な最大文字数を制限します。
pattern 正規表現を使用して入力値を検証します。

<input>要素の使用例

以下は、<input>要素を使ったフォームの例です。

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" required>

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

  <input type="submit" value="送信">
</form>

<input>要素のアクセシビリティ

フォームを作成する際には、アクセシビリティにも配慮することが重要です。アクセシビリティとは、すべての人がウェブサイトを等しく利用できるようにすることです。<input>要素のアクセシビリティを向上させるには、以下の点に注意しましょう。

  • フォームのラベルを適切に使用して、スクリーンリーダーを使用するユーザーにもわかりやすくします。
  • ARIA属性を使用して、入力フィールドの目的や状態を明確にします。
  • キーボード操作をサポートして、マウスを使用できないユーザーでもフォームを使用できるようにします。

まとめ

HTMLの<input>要素は、ウェブサイトにインタラクティブなフォームを作成するための重要な要素です。さまざまな種類の入力、属性、アクセシビリティ機能を理解することで、ユーザーフレンドリーで機能的なフォームを構築することができます。

参考資料

関連QA

  1. Q: <input type="number">で小数点以下の入力を受け付けるにはどうすればよいですか？

    A: step属性を使用します。step="0.1"とすると、0.1刻みで入力できます。例: <input type="number" name="price" step="0.1">

  2. Q: <input type="date">で特定の日付フォーマットを指定するにはどうすればよいですか？

    A: <input type="date">は、ブラウザのデフォルトのフォーマットで日付を表示します。特定のフォーマットで日付を表示するには、JavaScriptを使用する必要があります。

  3. Q: <input>要素に入力された値を取得するにはどうすればよいですか？

    A: JavaScriptを使用します。document.getElementById("input-id").valueのように、document.getElementById()で要素を取得し、valueプロパティを参照することで値を取得できます。