<input type="text" name="first_name" placeholder="e.g. Alex">New! 私の44ページ電子書籍「CSS in 44 minutes」がリリースされました！ 😃
# input
ウェブフォーム内でインタラクティブなコントロールを定義します。
例: コピー
type
フォーム入力の種類を定義します。
必須。
"text"
あらゆる種類の文字を受け付けるシンプルな単一行テキスト入力
"email"
テキスト入力と同様ですが、ブラウザは有効なメールアドレスのみを許可しようとします。
モバイルデバイスでは、メールキーボードが表示されます。
"number"
テキスト入力と同様ですが、ブラウザは有効な数値のみを許可しようとします。
モバイルデバイスでは、数値キーボードが表示されます。
"checkbox"
チェック済みまたは未チェックの2つの状態のいずれかのみ可能なトグルチェックボックス。値は、チェックボックスがチェックされている場合にのみフォームによって送信されます。
クリック領域を増やすために、チェックボックスをラベルで囲むことができます。
<label>
<input type="checkbox">
I accept the terms and conditions
</label>テキストをクリックするとチェックボックスが切り替わることに注意してください。
"radio"
相互排他的になるように、他のラジオボタンと組み合わせて使用する必要があります。
同様のname値を使用してラジオボタンをリンクします
<label>
<input type="radio" name="newsletter" value="yes">
Yes
</label>
<label>
<input type="radio" name="newsletter" value="no">
No
</label>1つをクリックすると、他方が選択解除されることに注意してください。
"submit"
クリック時またはEnterキーを押したときにトリガーされる送信ボタン。
name
フォーム内でのその入力の一意の識別子を定義します。これにより、サーバーは送信時に各入力の値にアクセスできます。
必須。
"first_name"
名前の値は、<form>コンテナのコンテキスト内で一意である必要があります。
英数字a-z A-Z 0-9と、- _などの一部の特殊文字のみを含めることができますが、スペースは含めることができません。
placeholder
入力が空の場合にのみ表示される、選択不可能なプレースホルダーテキストを定義します。
"例: [email protected]"
入力に期待される形式をヒントとして示すことができます。
ベストプラクティスとして、入力を説明するラベルを用意し、プレースホルダーを使用して例を示すことをお勧めします
<form>
<label>Email</label><br>
<input type="email" name="email" placeholder="e.g. [email protected]">
</form>フォーカスするとプレースホルダーが消えるため、別のラベルを保持する必要があることに注意してください。
required
この入力が必須であることをブラウザに伝えます。空のままにすると警告が表示されます。
値は不要です。値を指定せずに、required属性を追加するだけで済みます
<form>
<input type="text" required>
</form>空のテキスト入力でフォームを送信しようとすると、ブラウザに警告が表示されます。
disabled
入力を無効にします。
値は不要です。