input

機能

input 要素は、ユーザーがデータを入力するためのインターフェースを提供します。フォーム内で使用され、テキスト入力、パスワード入力、チェックボックス、ラジオボタン、ファイル選択など、さまざまな種類の入力を受け付けることができます。

よく設定する属性（attribute）と値

fieldset の属性は下記です。legend にはありません。

type:

入力フィールドの種類を指定します。代表的な値は以下の通りです。

• text: テキスト入力フィールド。例: type=“text”

• password: パスワード入力フィールド。例: type=“password”

• checkbox: チェックボックス。例: type=“checkbox”

• radio: ラジオボタン。例: type=“radio”

• file: ファイル選択フィールド。例: type=“file”

name:

入力フィールドの名前を指定します。フォームデータとして送信されます。
例: name=“username”

value:

入力フィールドの初期値を指定します。
例: value=“defaultValue”:

placeholder:

入力フィールドに表示されるプレースホルダーを指定します。
例: placeholder=“Enter your name”

required:

入力フィールドが必須であることを指定します。
例: required

disabled:

入力フィールドを無効にします。 例: disabled

readonly:

入力フィールドを読み取り専用にします。 例: readonly

使い方

この例では、テキスト入力、パスワード入力、チェックボックス、ラジオボタン、ファイル選択などを input タグで実装しています。シンプルな button も作れます。 button タグには小要素が含められ、複雑なデザインが実装できます。

<form action="/submit-form" method="post">
  <fieldset>
    <legend>ユーザー情報</legend>
    <label for="username">ユーザー名:</label>
    <input
      type="text"
      id="username"
      name="username"
      placeholder="Enter your username"
    /><br /><br />
    <label for="password">パスワード:</label>
    <input
      type="password"
      id="password"
      name="password"
      placeholder="Enter your password"
    /><br /><br />
    <label for="newsletter">ニュースレターを受け取る:</label>
    <input type="checkbox" id="newsletter" name="newsletter" /><br /><br />
    <label for="gender">性別:</label>
    <input type="radio" id="male" name="gender" value="male" /> 男性
    <input type="radio" id="female" name="gender" value="female" />
    女性<br /><br />
    <label for="profile-pic">プロフィール写真:</label>
    <input type="file" id="profile-pic" name="profile-pic" /><br /><br />
  </fieldset>
  <input type="submit" value="送信" />
  <input type="reset" value="リセット" />
</form>