Summary  
This chapter explains how to use various HTML input attributes—such as placeholder, name, value, required, disabled, readonly, and min/max—to improve input field functionality and enforce user input constraints.

General domain of usage  
Web form interfaces

すでに入力フィールドとラベルの使い方はご存知でしょう。ここでは、入力フィールドをより便利で使いやすくするための、最も有用な属性について説明します。

#### プレースホルダー
フィールド内にヒントテキストを表示。
```html
<input type="text" placeholder="Enter your email" />
```

#### Name
フォーム送信時にフィールドを識別。
```html
<input type="text" name="username" />
```

#### Value 
フィールドにデフォルト値を設定。
```html
<input type="tel" value="+1 (484) 298-9732" />
```

#### Required
フィールドが空の場合、フォーム送信を防止。
```hml
<input type="password" required />
```

#### 無効化（Disabled）
フィールドを編集不可かつ非対話型に設定。
```html
<input type="text" value="New York" disabled />
```


#### 読み取り専用（Readonly）
ユーザーが値をコピーできるが、変更はできない状態を表示。
```html
<input type="text" value="USA" readonly />
```

#### 最小値と最大値（Min and Max）
数値入力に制限を設定。
```html
<input type="number" min="21" max="99" />
```


PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkF0dHJpYnV0ZXMgZm9yIElucHV0IEVsZW1lbnRzPC90aXRsZT4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxmb3JtIG9uc3VibWl0PSJyZXR1cm4gZmFsc2UiPgogICAgICA8bGFiZWwgZm9yPSJtYWlsIj5FbWFpbDo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0iZW1haWwiIGlkPSJtYWlsIiBuYW1lPSJtYWlsIiBwbGFjZWhvbGRlcj0iRW50ZXIgeW91ciBlbWFpbCIgcmVxdWlyZWQ+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0idXNlcm5hbWUiPlVzZXJuYW1lOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJ0ZXh0IiBpZD0idXNlcm5hbWUiIG5hbWU9InVzZXJuYW1lIj48YnI+CiAgICAgIAogICAgICA8bGFiZWwgZm9yPSJwaG9uZS1udW1iZXIiPlBob25lIG51bWJlcjo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGVsIiBpZD0icGhvbmUtbnVtYmVyIiBuYW1lPSJwaG9uZS1udW1iZXIiIHZhbHVlPSIrMSAoNDg0KSAyOTgtOTczMiI+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0icGFzc3dvcmQiPlBhc3N3b3JkOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJwYXNzd29yZCIgaWQ9InBhc3N3b3JkIiBuYW1lPSJwYXNzd29yZCIgcmVxdWlyZWQ+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0iY2l0eSI+Q2l0eTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImNpdHkiIG5hbWU9ImNpdHkiIHZhbHVlPSJOZXcgWW9yayIgZGlzYWJsZWQ+PGJyPgogICAgICAKICAgICAgPGxhYmVsIGZvcj0iY291bnRyeSI+Q291bnRyeTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9ImNvdW50cnkiIG5hbWU9ImNvdW50cnkiIHZhbHVlPSJVU0EiIHJlYWRvbmx5Pjxicj4KICAgICAgCiAgICAgIDxsYWJlbCBmb3I9ImFnZSI+QWdlOjwvbGFiZWw+CiAgICAgIDxpbnB1dCB0eXBlPSJudW1iZXIiIGlkPSJhZ2UiIG5hbWU9ImFnZSIgbWluPSIyMSIgbWF4PSI5OSI+PGJyPgogICAgICAKICAgICAgPGJ1dHRvbiB0eXBlPSJzdWJtaXQiPlNlbmQgRm9ybTwvYnV0dG9uPgogICAgPC9mb3JtPgogIDwvYm9keT4KPC9odG1sPg==

入力フィールド内にヒントや例となるテキストを表示し、どのような入力が期待されているかをユーザーに案内する属性はどれですか？

フォーム送信時に入力データを識別するために使用される、入力フィールドの名前を指定する属性はどれですか？

必須フィールドが空の場合にフォームの送信を防ぐ属性はどれですか？

HTMLの基本を習得し、構造化され、アクセシブルなウェブコンテンツを作成します。タグ、要素、属性を使用してドキュメントを構造化する方法を学びます。テキスト、リスト、画像、音声、動画を自在に扱い、ウェブページを充実させます。整理されたデータのためのテーブルや、ユーザー入力・インタラクションのためのフォームを作成します。アクセシビリティを高めるセマンティックHTMLを理解し、基礎から完全で機能的なウェブサイト構造を構築します。

ウェブとHTMLの概要、タグ、要素、属性の重要性について紹介します。HTMLドキュメントの基本構造やウェブの簡単な歴史について学びます。

HTMLマークアップの基本を習得し、特別なテキストのフォーマットやリストに焦点を当て、HTMLドキュメント内でのコンテンツ構造化における重要性を理解します。HTMLドキュメント構造の詳細に踏み込み、テキストマークアップ技術を洗練させます。

ウェブ開発における視覚および聴覚コンテンツの力を引き出し、画像、動画、音声要素をHTMLドキュメントにシームレスに統合する方法を学びます。さまざまなメディア形式を取り入れる際の細かな違いについて探求します。

HTMLにおけるテーブルとフォームの包括的な解説を通じて、データの提示方法やユーザーインタラクションの複雑さを理解します。テーブル構造、フォーム作成、入力要素を網羅しています。フォーム入力要素の実装や、機能性を高める属性の活用に習熟します。

セマンティックHTML要素を深く学ぶことで、HTMLスキルを次のレベルへ引き上げ、構造化されアクセシブルなウェブコンテンツの作成が可能になります。新たに得た知識を活用し、初めてのウェブサイト構築に挑戦し、アイデアを形にしましょう。

機能強化のためのHTML入力属性

よく使われる入力属性

プレースホルダー

Name

Value

Required

無効化（Disabled）

読み取り専用（Readonly）

最小値と最大値（Min and Max）

1. 入力フィールド内にヒントや例となるテキストを表示し、どのような入力が期待されているかをユーザーに案内する属性はどれですか？

2. フォーム送信時に入力データを識別するために使用される、入力フィールドの名前を指定する属性はどれですか？

3. 必須フィールドが空の場合にフォームの送信を防ぐ属性はどれですか？