HTML Living Standard/一般的な属性

一般的な属性

HTML要素には、多くの要素で共通して使用される「一般的な属性」が存在します。これらの属性を適切に利用することで、入力の制御、ユーザー体験の向上、外部リソースの管理などを実現できます。本章では、代表的な一般属性について説明します。

accept

accept属性は、ファイル選択時に許可されるファイル形式を指定するために使用されます。主に<input>要素のtype="file"で利用されます。

<input type="file" accept=".png, .jpg, .jpeg">

autocomplete

autocomplete属性は、フォームの入力補完をブラウザに指示します。値はonまたはoffを指定します。

<input type="text" autocomplete="on">

capture

capture属性は、デバイスのカメラやマイクを利用してデータを直接取得するために使用します。<input type="file">で特に有効です。

<input type="file" accept="image/*" capture="environment">

crossorigin

crossorigin属性は、クロスオリジンリソースの取得に関する設定を指定します。anonymousまたはuse-credentialsを指定できます。

<img src="example.png" crossorigin="anonymous">

dirname

dirname属性は、入力フィールドのテキスト方向（左から右、または右から左）を送信時に含めるために使用されます。

<input type="text" name="username" dirname="username.dir">

disabled

disabled属性は、要素を無効化し、ユーザーが操作できないようにします。<button>, <input>, <select>などに使用されます。

<button disabled>送信</button>

elementtiming

elementtiming属性は、パフォーマンス計測やタイミング情報を外部ツールと共有するために使用されます。

<img src="example.jpg" elementtiming="image-load">

for

for属性は、<label>要素が関連付けられるフォーム要素のidを指定します。

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

max

max属性は、入力可能な最大値を指定します。数値や日付入力に使用されます。

<input type="number" max="10">

maxlength

maxlength属性は、入力可能な最大文字数を制限します。

<input type="text" maxlength="20">

min

min属性は、入力可能な最小値を指定します。

<input type="number" min="1">

minlength

minlength属性は、入力フィールドに必要な最小文字数を指定します。

<input type="text" minlength="5">

multiple

multiple属性は、複数の値を選択可能にします。主にファイル選択やメールアドレスの入力で使用されます。

<input type="file" multiple>

pattern

pattern属性は、正規表現を使用して入力値の形式を制約します。

<input type="text" pattern="[A-Za-z0-9]{5,10}">

placeholder

placeholder属性は、入力フィールドに表示されるヒントテキストを指定します。

<input type="text" placeholder="名前を入力してください">

readonly

readonly属性は、フィールドを読み取り専用に設定します。

<input type="text" value="固定値" readonly>

rel

rel属性は、リンクの関係性やリンク先の動作を指定します。

<a href="example.html" rel="noopener">例のページ</a>

required

required属性は、フォーム送信時に入力が必須であることを指定します。

<input type="text" required>

size

size属性は、入力フィールドの表示幅を指定します。

<input type="text" size="30">

step

step属性は、入力可能な値の間隔を指定します。主に数値や日付入力に使用されます。

<input type="number" step="5">

まとめ

これらの一般的な属性を適切に使用することで、フォームの入力制御やユーザー体験の向上が可能です。属性を正しく理解し、仕様に基づいた利用を心掛けましょう。