Summary  
This chapter covers customizing HTML input elements using attributes like value, autofocus, required, and placeholder to control default content, focus behavior, validation requirements, and helper text.

General domain of usage  
Web form design

HTMLの`<input>`要素は、動作を変更する属性でカスタマイズ可能。
以下はよく使われる主な属性。

## value
入力要素の初期値を設定。
- ボタンの場合：ボタンのテキストを定義；
- テキスト／パスワードフィールドの場合：デフォルトのテキストを設定；
- チェックボックス／ラジオボタンの場合：選択時に送信される値を設定。

`value`は`type="file"`と併用不可。

注意

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGlucHV0IHR5cGU9ImJ1dHRvbiIgdmFsdWU9IkNsaWNrIE1lIiAvPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiB2YWx1ZT0iRGVmYXVsdCBUZXh0IiAvPgogIDxpbnB1dCB0eXBlPSJjaGVja2JveCIgdmFsdWU9Im5ld3NsZXR0ZXIiIC8+CjwvZm9ybT4=

## autofocus
ページの読み込み時に自動的に入力欄へフォーカス

下記の例では、コードを実行してもページがリロードされないため、この機能は動作しません。

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0icXVlc3Rpb24iPllvdXIgcXVlc3Rpb248L2xhYmVsPgogIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0icXVlc3Rpb24iIGF1dG9mb2N1cyAvPgogIAogIDxsYWJlbCBmb3I9Im5hbWUiPllvdXIgTmFtZTwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJuYW1lIiAvPgo8L2Zvcm0+

## required
入力必須属性。フィールドが入力されるまでフォームの送信ができない。

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0iZW1haWwiPkVtYWlsPC9sYWJlbD4KICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImVtYWlsIiByZXF1aXJlZCAvPgogIAogIDxsYWJlbCBmb3I9InBhc3N3b3JkIj5QYXNzd29yZDwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InBhc3N3b3JkIiBpZD0icGFzc3dvcmQiIHJlcXVpcmVkIC8+CiAgCiAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlJlZ2lzdGVyPC9idXR0b24+CjwvZm9ybT4=

## placeholder
ユーザーが入力するまで、入力欄内に補助テキストを表示。電話番号やカード情報などのフォーマットに便利。

PGZvcm0gb25zdWJtaXQ9InJldHVybiBmYWxzZSI+CiAgPGxhYmVsIGZvcj0icGhvbmUiPlBob25lIE51bWJlcjwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRlbCIgaWQ9InBob25lIiBwbGFjZWhvbGRlcj0iKzEtKFhYWClYWFgtWFhYIiAvPgogIAogIDxsYWJlbCBmb3I9ImNhcmQiPkNhcmQgZGV0YWlsczwvbGFiZWw+CiAgPGlucHV0IHR5cGU9InRleHQiIGlkPSJjYXJkIiBwbGFjZWhvbGRlcj0iWFhYWC1YWFhYLVhYWFgtWFhYWCIgLz4KICAKICA8YnV0dG9uIHR5cGU9InN1Ym1pdCI+TWFrZSBQYXltZW50PC9idXR0b24+CjwvZm9ybT4=

各例では異なる `type` 属性を使用しており、入力欄の動作に影響します。入力タイプについては次の章で解説。

Note

input 要素のデフォルト値を設定するために使用される属性はどれか。

`input` 要素に期待される値のヒントや例を設定するために使用される属性はどれか。

フォーム送信前に入力フィールドが必ず入力されている必要があることを指定するために使用される属性はどれか。

HTMLの基本を学びましょう。HTMLはすべてのウェブサイトの基盤です。タグや属性を使ってコンテンツを構造化し、明確なドキュメントレイアウトを構築し、画像、リンク、テーブルを追加します。入力やインタラクションを取得するためのアクセシブルでユーザーフレンドリーなフォームを作成します。ベストプラクティスに従いながら、構造化され機能的なウェブページの作成を実践します。HTMLを習得してウェブ開発の第一歩を踏み出しましょう。

ウェブの仕組みを探求します。データがネットワークを通じてどのように移動するかを学び、プロトコルの役割を発見し、IPアドレスやドメイン名の謎を解き明かします。ウェブブラウザとサーバーがどのように通信してウェブコンテンツを配信するかについて、高度な理解を得ることができます。

見出しや段落からリストやテーブルまで、タグを使ってコンテンツを構造化する方法を学びます。属性を用いて要素を強化する方法についても理解します。

HTMLドキュメント構造の核心部分。DOCTYPE宣言、head、bodyを含むHTMLドキュメントの構成要素について学びます。各要素の目的と、それらがウェブページ全体の構造にどのように寄与するかを理解します。

画像、音声、動画などのメディアを活用してウェブページをより魅力的にします。表形式の構造化データをテーブルとして扱います。

HTMLフォームの多様性を探求します。主要な概念と技術を活用して、直感的でユーザーフレンドリーなフォームの設計方法を学びます。フォームがウェブサイト上でユーザーの操作やデータ送信を可能にする仕組みを理解します。

入力属性によるフォームの強化

value

autofocus

required

placeholder

1. input 要素のデフォルト値を設定するために使用される属性はどれか。

2. `input` 要素に期待される値のヒントや例を設定するために使用される属性はどれか。

3. フォーム送信前に入力フィールドが必ず入力されている必要があることを指定するために使用される属性はどれか。