From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/attributes/accept/index.html | 171 +++++ .../ja/web/html/attributes/autocomplete/index.html | 272 ++++++++ .../ja/web/html/attributes/crossorigin/index.html | 104 +++ files/ja/web/html/attributes/index.html | 769 +++++++++++++++++++++ files/ja/web/html/attributes/max/index.html | 166 +++++ files/ja/web/html/attributes/maxlength/index.html | 59 ++ files/ja/web/html/attributes/min/index.html | 158 +++++ files/ja/web/html/attributes/minlength/index.html | 72 ++ files/ja/web/html/attributes/multiple/index.html | 185 +++++ files/ja/web/html/attributes/pattern/index.html | 163 +++++ files/ja/web/html/attributes/required/index.html | 109 +++ files/ja/web/html/attributes/size/index.html | 76 ++ files/ja/web/html/attributes/step/index.html | 132 ++++ 13 files changed, 2436 insertions(+) create mode 100644 files/ja/web/html/attributes/accept/index.html create mode 100644 files/ja/web/html/attributes/autocomplete/index.html create mode 100644 files/ja/web/html/attributes/crossorigin/index.html create mode 100644 files/ja/web/html/attributes/index.html create mode 100644 files/ja/web/html/attributes/max/index.html create mode 100644 files/ja/web/html/attributes/maxlength/index.html create mode 100644 files/ja/web/html/attributes/min/index.html create mode 100644 files/ja/web/html/attributes/minlength/index.html create mode 100644 files/ja/web/html/attributes/multiple/index.html create mode 100644 files/ja/web/html/attributes/pattern/index.html create mode 100644 files/ja/web/html/attributes/required/index.html create mode 100644 files/ja/web/html/attributes/size/index.html create mode 100644 files/ja/web/html/attributes/step/index.html (limited to 'files/ja/web/html/attributes') diff --git a/files/ja/web/html/attributes/accept/index.html b/files/ja/web/html/attributes/accept/index.html new file mode 100644 index 0000000000..13a18b8313 --- /dev/null +++ b/files/ja/web/html/attributes/accept/index.html @@ -0,0 +1,171 @@ +--- +title: 'HTML 属性: accept' +slug: Web/HTML/Attributes/accept +tags: + - Accept + - Attribute + - File + - HTML + - Input + - Reference +translation_of: Web/HTML/Attributes/accept +--- +

{{HTMLSidebar}}

+ +

accept 属性は、値としてカンマ区切りでファイル種別または{{anch("Unique file type specifiers", "固有ファイル種別指定子")}}を取り、どのファイル種別を受け入れるかを記述します。 accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlelement("input")}} 要素のプロパティです。もとは {{htmlelement("form")}} 要素で対応していましたが、 HTML5 で削除され、 {{HTMLElement("input/file", "file")}} に変更されました。

+ +

与えられたファイル種別は複数の方法で識別される可能性があるため、特定の種別のファイルが必要な場合には、型指定子の完全なセットを提供したり、ワイルドカードを使用して任意の形式の型が許容されることを示したりすると便利です。

+ +

例えば、 Microsoft Word ファイルを識別できる方法は何通りもありますので、 Word ファイルを受け付けるサイトは <input> を次のように使用するかもしれません。

+ +
<input type="file" id="docpicker"
+  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
+ +

一方、メディアファイルを受け入れる場合は、そのメディア種別の任意の形式を含めるようにしたいかもしれません。

+ +
<input type="file" id="soundFile" accept="audio/*">
+<input type="file" id="videoFile" accept="video/*">
+<input type="file" id="imageFile" accept="image/*">
+ +

accept 属性は、選択されたファイルの種別を検証するものではありません。これはブラウザーがユーザーに対して正しいファイル種別を選択できるようにするためのガイドをするためのヒントを提供するだけです。ユーザーがファイルセレクターのオプションを切り替え、これを上書きして任意のファイルを選択し、不正なファイル種別を選択することは (ほとんどの場合) 可能です。

+ +

このため、期待される要件をサーバー側で検証するようにしてください。

+ +

例

+ +

ファイル入力型に設定された場合、ネイティブファイルピッカーが開いたときに、正しいファイル種別のファイルのみを選択できるようにする必要があります。ほとんどのオペレーティングシステムでは、条件に合わず選択できないファイルが薄く表示されます。

+ +
+
<p>
+	<label for="soundFile">Select an audio file:</label>
+	<input type="file" id="soundFile" accept="audio/*">
+	</p>
+	<p>
+	<label for="videoFile">Select a video file:</label>
+	<input type="file" id="videoFile" accept="video/*">
+	</p>
+	<p>
+	<label for="imageFile">Select some images:</label>
+	<input type="file" id="imageFile" accept="image/*" multiple>
+	</p>
+ +

{{EmbedLiveSample('simple_example', '100%', 200)}}

+ +

なお、最後の例では複数の画像を選択することができます。詳しくは multiple 属性を参照してください。

+
+ +

固有ファイル種別指定子

+ +

固有ファイル種別指定子は文字列で、ユーザーが {{HTMLElement("input")}} 要素の file 型で選択することができるファイルの種類を記述します。それぞれの固有ファイル種別記述子は、以下の形のうちの一つを取ります。

+ + + +

accept 属性は、カンマ区切りの1つ以上の固有ファイル種別指定子を含む文字列を値として取ります。例えば、標準的な画像形式と PDF ファイルの両方を含む、画像として表示できるコンテンツを必要とするファイルピッカーは、次のようになります。

+ +
<input type="file" accept="image/*,.pdf">
+ +

file 入力の使用

+ +

基本的な例

+ +
<form method="post" enctype="multipart/form-data">
+ <div>
+   <label for="file">Choose file to upload</label>
+   <input type="file" id="file" name="file" multiple>
+ </div>
+ <div>
+   <button>Submit</button>
+ </div>
+</form>
+ + + +

これは次のような出力を生成します。

+ +

{{EmbedLiveSample('A_basic_example', 650, 60)}}

+ +
+

メモ: この例は GitHub でも見ることができます。 — ソースコードとライブ実行を確認してください。

+
+ +

ユーザーの端末やオペレーティングシステムが何であろうと、ファイル入力には、ユーザーがファイルを選択するためのファイルピッカーダイアログを開くボタンが用意されす。

+ +

上記のように multiple 属性を含めることで、複数のファイルを一度に選択できるようになります。ユーザーは、選択したプラットフォームが許す任意の方法でファイルピッカーから複数のファイルを選択することができます (例えば、Shift キーまたは Control キーを押しながらクリックするなど)。 <input> ごとに1つのファイルのみを選択させたい場合は、 multiple 属性を省略してください。

+ +

受け付けるファイル種別の制限

+ +

多くの場合は、ユーザーが任意の種別のファイルを選択できるようにするのではなく、特定の種別のファイルを選択できるようにしたいものです。例えば、ファイル入力でユーザーがプロフィール画像をアップロードできる場合、 {{Glossary("JPEG")}} や {{Glossary("PNG")}} などのウェブ互換の画像形式を選択させたいと思うでしょう。/p> + +

許容されるファイル種別は、 {{htmlattrxref("accept","input/file")}} 属性で許容されるファイル拡張子や MIME タイプのカンマ区切りのリストを取ることで指定することができます。いくつかの例を示します。

+ + + +

もっと完全な例を見てみましょう。

+ +
<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="profile_pic">Choose file to upload</label>
+    <input type="file" id="profile_pic" name="profile_pic"
+          accept=".jpg, .jpeg, .png">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + +

{{EmbedLiveSample('Limiting_accepted_file_types', 650, 60)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'accept attribute')}}{{Spec2('HTML5.1')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attribute.accept")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/autocomplete/index.html b/files/ja/web/html/attributes/autocomplete/index.html new file mode 100644 index 0000000000..bddf9ffcdf --- /dev/null +++ b/files/ja/web/html/attributes/autocomplete/index.html @@ -0,0 +1,272 @@ +--- +title: HTML の autocomplete 属性 +slug: Web/HTML/Attributes/autocomplete +tags: + - Addresses + - Attribute + - Email addresses + - Forms + - HTML + - Input + - Phone Numbers + - Reference + - Select + - Text + - Usernames + - autocomplete + - form + - passwords + - textarea + - パスワード + - メールアドレス + - ユーザー名 + - 住所 + - 電話番号 +translation_of: Web/HTML/Attributes/autocomplete +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

HTML の autocomplete 属性は、入力値としてテキストまたは数値を取る {{HTMLElement("input")}} 要素、 {{HTMLElement("textarea")}} 要素、 {{HTMLElement("select")}} 要素、 {{HTMLElement("form")}} 要素で利用できます。 autocomplete を使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆するのと同様に、{{Glossary("user agent", "ユーザーエージェント")}}がフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します。

+ +

提案値の情報源は、一般にブラウザーに依存します。ふつうは、ユーザーが入力した過去の値からとりますが、あらかじめ構成された値から取得することもあります。例えば、ブラウザーはユーザーに名前、住所、電話番号、メールアドレスを自動補完するために保存させることができます。おそらく、ブラウザーは以降の認証手続で自動補完を行うために、クレジットカード情報を暗号化して保存する機能を提供しているでしょう。

+ +

{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に autocomplete 属性がない場合、ブラウザーはその要素のフォームオーナー、つまりその要素を子孫に持つ {{HTMLElement("form")}} 要素、または <form> 要素で id がその要素の {{htmlattrxref("form", "input")}} 属性で指定されているものの autocomplete 属性の値を使用します。

+ +

詳しくは、 {{HTMLElement("form")}} 要素の {{htmlattrxref("autocomplete", "form")}} 属性をご覧ください。

+ +
+

自動補完を提供するために、ユーザーエージェントは <input>/<select>/<textarea> 要素に次のことを要求することがあります。

+ +
    +
  1. name や id 属性を持つこと
    2. +
  2. <form> 要素の子孫であること
    3. +
  3. フォームが {{HTMLElement("input/submit", "submit")}} ボタンを持つこと
    4. +
+
+ +

値

+ +
+
"off"
+
ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動補完機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。 +
メモ: ほとんどの現行ブラウザーでは autocomplete 属性を "off" に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。 autocomplete 属性とログインフィールドをご覧ください。
+
+
"on"
+
ブラウザーが自動的に入力を補完することが許可されています。フィールドに求められているデータ型としてのガイダンスが提供されていないので、ブラウザーは独自の判断を行うかもしれません。
+
"name"
+
このフィールドは人の氏名の値が期待されています。一般的には、氏名を各部分に分割すると、多様な人の氏名を扱ったり構成したりしにくくなるため、 "name" を使用したほうが推奨されます。しかし、氏名をそれぞれの部分に分割する必要があるのであれば、以下の autocomplete の値を使用することができます。 +
+
"honorific-prefix"
+
接頭辞や敬称 (例: "Mr.", "Ms.", "Dr.", "Mlle")
+
"given-name"
+
名 (ファーストネーム)
+
"additional-name"
+
ミドルネーム
+
"family-name"
+
苗字 (ファミリーネーム、「ラスト」ネーム)
+
"honorific-suffix"
+
接尾辞や敬称 (例: "Jr.", "B.Sc.", "MBASW", "II")
+
"nickname"
+
ペンネームやハンドルネーム
+
+
+
"email"
+
メールアドレス。
+
"username"
+
ユーザー名またはアカウント名。
+
"new-password"
+
新しいパスワード。新しいアカウントを作成したりパスワードを変更したりした場合は、一般的な「現在のパスワードを入力してください」ではなく、「新しいパスワードを入力してください」または「パスワードの確認」欄で使用してください。これは意図せずに既存のパスワードが意図せずに入力されるのを防いだり、安全なパスワードを生成するための助けになったりします (autocomplete="new-password" による自動補完の防止も参照してください)。
+
"current-password"
+
ユーザーの現在のパスワードです。
+
"one-time-code"
+
ユーザー自身を確認するために使われるワンタイムコードです
+
"organization-title"
+
職名や組織内の肩書です (例: "上級技術ライター", "社長", "副部隊長")
+
"organization"
+
企業または団体の名前です。 "Acme Widget Company" や "Girl Scouts of America" など。
+
"street-address"
+
住所。複数行のテキストが使用でき、第2行政レベル (普通は市町村) の中で完全に住所を識別できるものですが、市町村名、郵便番号、国名は含めるべきではありません。
+
"address-line1", "address-line2", "address-line3"
+
住所のそれぞれの行です。これらは "street-address" が存在しない場合のみ置くことができます。
+
"address-level4"
+
住所が4段階まである場合のもっとも細かい{{anch("Administrative levels in addresses", "行政レベル")}}です。
+
"address-level3"
+
少なくとも3段階の行政レベルがある住所において、3番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。
+
"address-level2"
+
少なくとも2段階の行政レベルがある住所において、2番目の{{anch("Administrative levels in addresses", "行政レベル")}}です。2つの行政レベルがある国では、これはふつう市町村や、住所のあるその他の地域を表します。
+
"address-level1"
+
住所の一番上{{anch("Administrative levels in addresses", "行政レベル")}}です。これはふつう、住所がある都道府県です。合衆国では州になります。スイスでは、カートンになります。イギリスでは、ポストタウンになります。
+
"country"
+
国コードです。
+
"country-name"
+
国名です。
+
"postal-code"
+
郵便番号です (アメリカでは ZIP コードです)。
+
"cc-name"
+
クレジットカードなどの支払手段に表示、または関連付けられた氏名です。一般に、氏名の各部分に分割するよりも氏名のフィールドを使う方が推奨されます。
+
"cc-given-name"
+
クレジットカードなどの支払手段に指定された下の名前 (ファーストネーム) です。
+
"cc-additional-name"
+
クレジットカードなどの支払手段に指定された中間名 (ミドルネーム) です。
+
"cc-family-name"
+
クレジットカードなどの支払手段に指定された姓です。
+
"cc-number"
+
クレジットカードや番号や、口座番号などの支払手段を識別するその他の番号です。
+
"cc-exp"
+
支払手段の有効期限で、ふつうは "MM/YY" または "MM/YYYY" の形です。
+
"cc-exp-month"
+
支払手段の有効期限の月です。
+
"cc-exp-year"
+
支払手段の有効期限の年です。
+
"cc-csc"
+
支払手段のセキュリティコードです。クレジットカードでは、カードの裏に書かれた3桁の認証番号です。
+
"cc-type"
+
支払手段の種類です。 (例: "Visa" や "Master Card").
+
"transaction-currency"
+
この取引で決済が行われる通貨です。
+
"transaction-amount"
+
支払を行う金額の "transaction-currency" の単位による量です。
+
"language"
+
優先言語で、有効な BCP 47 言語タグ で指定されたものです。
+
"bday"
+
生年月日の全体です。
+
"bday-day"
+
生年月日の日の部分です。
+
"bday-month"
+
生年月日の月の部分です。
+
"bday-year"
+
生年月日の年の部分です。
+
"sex"
+
性別で ("Female", "Fa'afafine", "Male" など)、改行のない自由な形式のテキストです。
+
"tel"
+
国番号を含む、完全な電話番号です。電話番号を書く部分に分割する必要がある場合は、各フィールドに以下の値を使用することができます。 +
+
"tel-country-code"
+
国コードで、例えば "1" はアメリカ、カナダ、その他の北アメリカとカリブ海の一部です。
+
"tel-national"
+
国番号以外の部分の電話番号全体で、市外局番の接頭辞 (日本では 0) を含みます。 "1-855-555-6502" という電話番号については、このフィールドの値は "855-555-6502" となります。
+
"tel-area-code"
+
市外局番で、必要に応じて市外局番の接頭辞 (日本では 0) を含みます。
+
"tel-local"
+
国番号や市外局番を含まない電話番号です。これはさらに、市内局番と加入者番号の2つに分割することができます。 "555-6502" という電話番号では、 "tel-local-prefix" は "555"、 "tel-local-suffix" は "6502" となります。
+
+
+
"tel-extension"
+
電話番号の下の内線番号です。ホテルの部屋番号や企業オフィスの内線番号などです。
+
"impp"
+
インスタントメッセージングプロトコルの端点、たとえば "xmpp:username@example.net" などです。
+
"url"
+
URL です。このフォームの他のフィールドの文脈から見て適切な、ホームページのや企業ウェブサイトのアドレスです。
+
"photo"
+
このフォームの他のフィールドの文脈における人物、企業、連絡先情報を表す画像の URL です。
+
+ +

詳しくは WHATWG 仕様書 をご覧ください。

+ +
+

注: Firefox は他のブラウザーとは異なり、 autocomplete 属性で、ページを再読み込みしても <input> を 動的に無効化した状態や (該当する場合は) 動的に変更したチェック状態を維持するか を制御します。この維持機能は、既定で有効です。 autocomplete 属性の値に off を設定すると、この機能を無効化できます。またこの設定は、type 属性が通常 autocomplete を適用しない値である <input> 要素でも有効です。 {{bug(654072)}} をご覧ください。

+
+ +

例

+ +
<div>
+  <label for="cc-number">Enter your credit card number</label>
+  <input name="cc-number" id="cc-number" autocomplete="off">
+</div>
+ +

住所における行政レベル

+ +

行政レベルの4つの欄 (address-level1 ～ address-level4) は、住所が存在する国の中で、詳細さのレベルを高めるためのものです。行政レベルの体系は国によって異なり、住所を表記する際に様々な順序でレベルを並べ替えられることがあります。

+ +

address-level1 は常に最も広い行政単位を表します。これは住所のもっとも広い部分であり、国名に近い部分です。

+ +

フォームのレイアウトの自由度

+ +

国が異なれば住所の書き方も異なり、住所内でそれぞれの欄の位置も異なっており、フィールドの組み合わせや数も完全に異なることを考慮すると、可能であれば、サイトが住所入力フォームを表示する際に、住所がある国の指定に応じて、ユーザーが期待するレイアウトに切り替えることができると便利です。

+ +

変化形

+ +

それぞれの行政レベルの使用方法は国によって異なります。以下にいくつかの例を示しますが、これは網羅的なリストではありません。

+ +

アメリカ

+ +

アメリカ国内の一般的な住所は次のようになります。

+ +

432 Anywhere St
+ Exampleville CA 95555

+ +

アメリカでは、住所の中で最も大きな括りの部分は州であり、この場合は "CA" (米国郵政公社の公式な略号で "California" の意味) となります。したがって address-level1 は州、この場合は "CA" となります。

+ +

住所で2番目に大きな括りの部分は市区町村名なので、 address-level2 はこの例の住所では "Exampleville" となります。

+ +

アメリカの住所では、3以上の行政単位は使用されません。

+ +

イギリス

+ +

イギリスの住所入力フォームでは、住所のレベルは1つで、住所に応じて1～3行の住所が含まれることがあります。完全な住所は次のようになります。

+ +

103 Frogmarch Street
+ Upper-Wapping
+ Winchelsea
+ TN99 8ZZ

+ +

住所レベルは次のようになります。

+ + + +

郵便番号は別な行です。イギリスで郵便物をうまく配達するためには、実際には郵便番号と address-line1 だけでよいので、必須項目はこれらのみですが、通常はもっと詳細な情報を提供することが多いので注意してください。

+ +

中国

+ +

中国では、省、市、区の3つの行政レベルを使用することができます。

+ +

日本

+ +

日本の住所は一般的に1行で、広域的な部分から詳細な部分の順に (アメリカとは逆順に) 書かれます。住所には2～3の行政レベルが含まれます。建物名や部屋番号を表すために、もう1行が追加されることもあります。例を示します。

+ +

〒381-0000
+ 長野県長野市某町123

+ +

「〒」と続く7桁の番号は郵便番号です。

+ +

address-level1 は都道府県に使用されます。この場合は「長野県」です。 address-level2 は普通、市区町村や郡に使われます。この場合は「長野市」です。「某町123」は address-line1 で、町名と地番からなります。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', "#autofill")}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.global_attributes.autocomplete")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/crossorigin/index.html b/files/ja/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..9a6d938414 --- /dev/null +++ b/files/ja/web/html/attributes/crossorigin/index.html @@ -0,0 +1,104 @@ +--- +title: HTML crossorigin 属性 +slug: Web/HTML/Attributes/crossorigin +tags: + - Advanced + - CORS + - HTML + - Reference + - Security + - セキュリティ + - 上級者 +translation_of: Web/HTML/Attributes/crossorigin +--- +
{{draft}}
+ +

crossorigin 属性は、 {{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }} の各要素で有効であり、 CORS への対応を提供し、したがって要素が読み取るデータのために CORS リクエストの構成を有効にします。要素によっては、属性は CORS 設定属性になります。

+ +

メディア要素の crossorigin コンテンツ属性は CORS 設定属性です。

+ +

これらの属性は列挙型で、以下の値を取ることができます。

+ + + + + + + + + + + + + + + + + + + + +
キーワード説明
anonymousこの要素のための CORS リクエストで資格情報フラグを 'same-origin' に設定する。
use-credentialsこの要素のための CORS リクエストで資格情報フラグを 'include' に設定する。
""crossorigin または crossorigin="" のように属性に空の値を設定すると、 anonymous と同じになります。
+ +

既定では (つまり、属性が指定されていない場合)、 CORS は使用されません。 "anonymous" キーワードが指定された場合は、同じオリジンでない限り、リクエストにはクッキーやクライアント側の SSL 証明書、 HTTP 認証などの CORS 仕様書の用語の節で記述されているユーザー資格情報 (user credentials) は使用されません。

+ +

不正なキーワードや空文字列は、 anonymous が指定されたものと同じように扱われます。

+ +

例: script 要素の crossorigin

+ +

以下の {{HTMLElement("script")}} 要素を使用すると、ユーザー資格情報を送信せずに https://example.com/example-framework.js スクリプトを実行します。

+ +
<script src="https://example.com/example-framework.js" crossorigin="anonymous"></script>
+ +

例: 資格情報付きの Webmanifest

+ +

資格情報を必要とするマニフェストを読み取るときは、同じオリジンからのファイル読み取りであっても use-credentials の値を使用する必要があります。

+ +
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials">
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ +

<script crossorigin>

+ + + +

{{Compat("html.elements.script.crossorigin")}}

+ +

<video crossorigin>

+ + + +

{{Compat("html.elements.video.crossorigin")}}

+ +

関連情報

+ + + +
{{QuickLinksWithSubpages("/ja/docs/Web/HTML/")}}
diff --git a/files/ja/web/html/attributes/index.html b/files/ja/web/html/attributes/index.html new file mode 100644 index 0000000000..b0c79d849d --- /dev/null +++ b/files/ja/web/html/attributes/index.html @@ -0,0 +1,769 @@ +--- +title: HTML 属性リファレンス +slug: Web/HTML/Attributes +tags: + - Attribute + - Attributes + - Beginner + - Configuring + - Element Attributes + - Elements + - HTML + - Reference + - Settings + - Web + - 初心者 + - 属性 + - 要素 + - 要素の属性 + - 設定 +translation_of: Web/HTML/Attributes +--- +
{{HTMLSidebar}}
+ +

HTML の要素は属性を持ちます。ユーザーが望む基準を満たすために、さまざまな方法で要素を構成したり、動作を調整したりする追加の値です。

+ +

属性一覧

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性名要素説明
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}サーバーの受容する型のリストです。ファイル形式など。
accept-charset{{ HTMLElement("form") }}対応している文字集合の一覧です。
accesskeyグローバル属性要素をアクティブ化したり、フォーカスを与えたりするためのショートカットキーです。
action{{ HTMLElement("form") }}フォーム経由で送信される情報を処理するプログラムの URI です。
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}要素の水平方向の配置を指定します。
allow{{ HTMLElement("iframe") }}iframe の機能ポリシーを指定します。
alt{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}画像が表示できない場合の代替テキストです。
async{{ HTMLElement("script") }}スクリプトを非同期で実行します。
autocapitalizeグローバル属性ユーザーによる入力が入力欄で自動的に大文字化されるかどうかを設定します。
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}このフォーム内のコントロールが、ブラウザーによる値の自動補完を既定で許容するかを示します。
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}ページ読込後に、対象要素に自動的にフォーカスを当てるようにします。
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}オーディオやビデオが再生可能になった時点で自動再生を開始します。
background{{ HTMLElement("body") }}, {{ HTMLElement("table") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}画像ファイルの URL を指定します。 +
注: ブラウザーや電子メールクライアントはまだこの属性に対応していますが、廃止済みです。代わりに CSS の {{ Cssxref("background-image") }} を使用してください。
+
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

要素の背景色です。

+ +
+

注: これは古い属性です。代わりに CSS の {{ Cssxref("background-color") }} プロパティを使用してください。

+
+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

境界線の幅です。

+ +
+

注: これは古い属性です。代わりに CSS の {{ Cssxref("border") }} プロパティを使用してください。

+
+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}すでにバッファリングされたメディアの時間の範囲を示します。
capture{{ HTMLElement("input") }}{{SpecName('HTML Media Capture', '#the-capture-attribute','media capture')}} 仕様書から、キャプチャできる新しいファイルを指定します。
challenge{{ HTMLElement("keygen") }}公開鍵とともに送信するチャレンジ文字列
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}ページまたはスクリプトの文字エンコーディングを宣言します。
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}ページ読み込み時に要素にチェックを入れておくかどうかを指定します。
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}引用元または変更点の情報源を指す URI を格納します。
classグローバル属性よく使われるプロパティで要素にスタイルを適用するために CSS と共によく用いられます。
code{{ HTMLElement("applet") }}読み込んで実行するアプレットのクラスファイルの URL を指定します。
codebase{{ HTMLElement("applet") }}code 属性で参照するアプレットの .class ファイルを配置しているディレクトリの絶対 URL または相対 URL を指定します。
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

この属性は色名または16進数の #RRGGBB 形式を用いて文字色を設定します。

+ +
+

注: これは古い属性です。代わりに CSS の {{Cssxref("color")}} プロパティを使用して下さい。

+
+
cols{{ HTMLElement("textarea") }}テキストエリアの桁数 (水平方向の文字数) を定義します。
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}colspan 属性はテーブルのセルを結合する列数を定義します。
content{{ HTMLElement("meta") }}状況に応じて、 http-equiv または name に関連した値です。
contenteditableグローバル属性要素の内容が編集可能であるかどうかを示します。
contextmenuグローバル属性要素のコンテキストメニューとして機能する {{HTMLElement("menu")}} 要素の ID を定義します。
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}再生コントロールをユーザーに表示すべきかどうかを示します。
coords{{ HTMLElement("area") }}ホットスポット領域の座標を指定する為の値のセット
crossorigin{{ HTMLElement("audio") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}, {{ HTMLElement("video") }}要素がオリジン間リクエストをどう扱うか
csp {{experimental_inline}}{{ HTMLElement("iframe") }}埋め込まれた文書が管理されるためのコンテンツセキュリティポリシーを指定します。
data{{ HTMLElement("object") }}リソースの URL を指定します。
data-*グローバル属性HTML 要素にカスタム属性が添付できるようにします。
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}要素に関連付けられた日時を示します。
decoding{{ HTMLElement("img") }}画像をデコードする推奨の方法をIndicates the preferred method to decode the image.
default{{ HTMLElement("track") }}ユーザ設定で別の項目を指定していない場合に、有効にするトラックを指定する
defer{{ HTMLElement("script") }}ページのパースが完了した後に実行するスクリプトであることを示す
dirグローバル属性テキストの書字方向を定義する。使用できる値は ltr (Left-To-Right) または rtl (Right-To-Left)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}閲覧者によるによるコントロールの操作を無効にするかどうかを示します。
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }}リソースをダウンロードするためのハイパーリンクであるかどうかを示します。
draggableグローバル属性要素がドラッグ可能であるかどうかを示します。
dropzoneグローバル属性要素がその上でコンテンツのドロップ操作を受け付けるかどうかを示します。
enctype{{ HTMLElement("form") }}method 属性が POST である場合に、フォームデータのコンテンツタイプを定義します。
enterkeyhint {{experimental_inline}}{{ HTMLElement("textarea") }}, contenteditableenterkeyhint は、仮想キーボードの Enter キーにあるアクションラベル (またはアイコン) が何であるかを指定します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}この要素が属する要素を指定します。
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}その要素が所属するフォームを示します。
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}その要素のアクションを示します。 {{ HTMLElement("form") }} で定義されたアクションを上書きします。
formenctype{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この属性はフォーム送信で使用するエンコーディング型を設定します。この属性が指定された場合、ボタンを所有するフォームの enctype 属性より優先されます。
formmethod{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この属性はフォーム送信で使用する送信メソッド (GET, POST, など) を設定します。この属性が指定された場合、ボタンを所有するフォームの method 属性より優先されます。
formnovalidate{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この論理属性はフォームが送信時に検証されないことを指定します。この属性が指定された場合、ボタンを所有するフォームの novalidate 属性より優先されます。
formtarget{{ HTMLElement("button") }}, {{ HTMLElement("input") }}button や input が送信ボタンである場合 (type="submit")、この属性はフォームを送信した後で受け取るレスポンスを表示する閲覧コンテキスト (例えば、タブ、ウィンドウ、インラインフレーム) を指定します。この属性が指定された場合、ボタンを所有するフォームの target 属性より優先されます。
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}この要素に適用する <th> 要素の ID。
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

ここに挙げた要素の高さを指定します。他の要素では、 {{cssxref("height")}} プロパティを使用してください。

+ +
+

注: {{HTMLElement("div")}} など一部の要素では、これは古い属性であり、代わりに CSS の {{Cssxref("height")}} プロパティを使用してください。

+
+
hiddenグローバル属性この要素のレンダリングを抑制しますが、 script 要素などの子要素は有効なままにします。
high{{ HTMLElement("meter") }}最大値の下限を示します。
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}リンクされたリソースの URL です。
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}リンクされたリソースの言語を指定します。
http-equiv{{ HTMLElement("meta") }}プラグマディレクティブを定義します。
icon{{ HTMLElement("command") }}コマンドを表す画像を指定します。
idグローバル属性特定の要素へスタイルを設定するために CSS と共によく使われます。この属性の値は一位でなければなりません。
importance {{experimental_inline}}{{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}リソースの相対的なフェッチ優先順位を示します。
integrity{{ HTMLElement("link") }}, {{ HTMLElement("script") }} +

ブラウザーが読み込むものを検証できるようにするためのサブリソース完全性の値を指定します。

+
intrinsicsize {{deprecated_inline}}{{ HTMLElement("img") }}この属性は、ブラウザーに画像に交友の実際の寸法を無視して、属性で指定された寸法を割り当てるように指示します。
inputmode{{ HTMLElement("textarea") }}, contenteditable要素やその内容を編集する際に、ユーザーが入力する可能性のあるデータの種類のヒントを提供します。この属性はフォームコントロール (textarea 要素の値など) と共に、または編集対象となっている要素 (例えば contenteditable 属性の使用など) の中で使用することができます。
ismap{{ HTMLElement("img") }}画像がサーバーサイドイメージマップの一部であることを示します。
itempropグローバル属性
keytype{{ HTMLElement("keygen") }}生成する鍵の種類を指定します。
kind{{ HTMLElement("track") }}テキストトラックの種類を指定します。
label{{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("track") }}ユーザーが読める形の要素のタイトルを指定します。
langグローバル属性要素内で用いられている言語を定義する。
language{{ HTMLElement("script") }}要素で使用しているスクリプト言語を定義する。
loading {{experimental_inline}}{{ HTMLElement("img") }}, {{ HTMLElement("iframe") }}要素を遅延読み込みさせたいこと (loading="lazy") または直ちに読み込ませたいこと (loading="eager") を示します。 +
WIP: WHATWG PR #3752
+
list{{ HTMLElement("input") }}ユーザに提案するため、事前に定義した選択肢のリストを示す。
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}メディアの再生が完了した後、始めから再生を開始するかを示します。
low{{ HTMLElement("meter") }}最小値の上限を示します。
manifest{{ HTMLElement("html") }}ドキュメントのキャッシュマニフェストの URL を指定します。 +
注: この属性は廃止されており、代わりに <link rel="manifest"> を使用してください。
+
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}許容される最大の値を示す。
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}要素が許容する最大文字数を定義します。
minlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}要素が許容する最小文字数を定義する。
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}リンクされたリソースがどのメディアに対して設計されたかを指定する。ンｎ
method{{ HTMLElement("form") }}フォームを送信する際に使用する HTTP メソッドを定義する。 GET (既定値) または POST を指定可能。
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}許容される最小の値を示す。
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}type が email または file の input では、複数の値を入力可能かを示す。
muted{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}ページ読み込み時に音声を無音にするかどうかを示します。
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }}要素の名前。例えば、送信されたフォームでサーバーがフィールドを識別するために使用する。
novalidate{{ HTMLElement("form") }}送信時にフォームが検証されないようにする。
open{{ HTMLElement("details") }}ページ読み込み時に詳細情報を表示するかを示す。
optimum{{ HTMLElement("meter") }}最適な値を示す。
pattern{{ HTMLElement("input") }}要素の値を検証する正規表現を定義する。
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}ping 属性は、ユーザーがハイパーリンクをたどる場合に通知される URL のリストを空白区切りで指定します。
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}フィールドが何を入力するものであるかのヒントを閲覧者に対し提供する。
poster{{ HTMLElement("video") }}ユーザが再生やシークを行うまでの間に表示するポスターフレームの URL。
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}リソースの全体または一部のプリロードを行う、あるいはプリロードを行わないことを示す。
radiogroup{{ HTMLElement("command") }}
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}要素が編集できるかどうかを示す。
referrerpolicy{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("link") }}, {{ HTMLElement("script") }}リソースにアクセスする際にどのリファラーが送信されるかを指定する。
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}リンク先オブジェクトとリンク元オブジェクトとの関係を指定する。
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}入力が必須の要素であるかを示す。
reversed{{ HTMLElement("ol") }}リストを昇順ではなく降順に表示することを示す。
rows{{ HTMLElement("textarea") }}textarea の行数を定義する。
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}テーブルセルがまたがる行数を定義する。
sandbox{{ HTMLElement("iframe") }}iframe に読み込まれた文書で特定の機能を使用することを止める (フォームの投稿や新しいウィンドウを開くなど)。
scope{{ HTMLElement("th") }}(th 要素で定義される) ヘッダーテストが関連するセルを定義します。
scoped{{ HTMLElement("style") }}
selected{{ HTMLElement("option") }}ページ読込時に、対象要素を選択状態にする。
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}要素の幅を定義する (ピクセル値)。要素の type 属性が text または password である場合は文字数になる。
sizes{{ HTMLElement("link") }}, {{ HTMLElement("img") }}, {{ HTMLElement("source") }}
slotグローバル属性要素にシャドウ DOM のシャドウツリーのスロットを割り当てます。
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}
spellcheckグローバル属性要素のスペルチェックを有効にするかどうかを示します。
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}埋め込みコンテンツの URL。
srcdoc{{ HTMLElement("iframe") }}
srclang{{ HTMLElement("track") }}
srcset{{ HTMLElement("img") }}, {{ HTMLElement("source") }}一つ以上のレスポンシブ画像の候補です。
start{{ HTMLElement("ol") }}1以外から始まる場合の最初の値を定義します。
step{{ HTMLElement("input") }}
styleグローバル属性外部スタイルシートや style 要素内に記述されたものより優先度の高いスタイル情報を記述する。
summary{{ HTMLElement("table") }}
tabindexグローバル属性ブラウザーによる既定のタブオーダーを無効化して、指定した順序に従うようにします。
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}
titleグローバル属性要素の示す範囲のタイトル。PC ブラウザーでは、マウスオーバー時にツールチップとしてその属性値が表示される。
translateグローバル属性ページが翻訳版である場合、要素の属性値と子の Text ノードが翻訳されているか、変更せずにそのままであるかを指定します。
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}要素の型を定義する。
usemap{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("data") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("option") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}ページ読み込み時に要素で表示するデフォルト値を定義する。
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

ここに挙げられた要素に対して、要素の幅を指定します。

+ +
+

注: {{ HTMLElement("div") }} など他の要素については、これは古い属性であり、代わりに CSS の {{ Cssxref("width") }} プロパティを使用してください。

+
+
wrap{{ HTMLElement("textarea") }}テキストを折り返すかどうかを示します。
+ +

content 属性と IDL 属性

+ +

HTML では、ほとんどの属性に content 属性 と IDL (Interface Definition Language) 属性 の 2 つの側面があります。

+ +

content 属性は content (HTML コード) から設定する属性であり、 {{domxref("element.setAttribute()")}} や {{domxref("element.getAttribute()")}} を使用して設定あるいは取得できます。 content 属性は値として数値を想定するものであっても、常に文字列です。例えば content 属性を使用して {{HTMLElement("input")}} 要素の maxlength 属性に 42 を設定するには、その要素で setAttribute("maxlength", "42") を呼び出さなければなりません。

+ +

IDL 属性は JavaScript プロパティとしても知られています。これらは element.foo といった JavaScript プロパティを使用して読み書きします。IDL 属性は読み取り時に値を返すため基になる content 属性を使用 (ただし、変換するでしょう) したり、書き込み時に content 属性へ何らかの値を保存したりします。言い換えると、IDL 属性は content 属性を映し出します。

+ +

ほとんどの場合、IDL 属性は実際に使用する値として自身の値を返します。例えば {{HTMLElement("input")}} 要素の type 属性のデフォルト値は "text" であるので、input.type="foobar" を設定すると <input> 要素は (外見と動作が) text タイプになりますが、"type" content 属性の値は "foobar" になります。しかし、type IDL 属性は文字列 "text" を返します。

+ +

IDL 属性は常に文字列とは限りません。例えば input.maxlength は数値 (符号付き long) です。IDL 属性を使用するときは望ましい型の値を読み書きするので、input.maxlength は常に数値を返し、また input.maxlength を設定するときは数値を要求します。他の型で渡すと、標準的な JavaScript の型変換規則に従って自動的に数値へ変換されます。

+ +

IDL 属性は符号なし long、URL、論理値など他の型を反映することが可能です。残念ながら、属性に応じて IDL 属性が対応する content 属性と一体化して動作するための明確な規則や方法はありません。ほとんどの場合は仕様にある規則に従いますが、そうでない場合もあります。 HTML 仕様では可能な限り開発者にやさしいものにしようとしていますが、さまざまな理由 (たいていは歴史的な理由) により奇妙な動作になる属性 (例えば select.size) があり、実際どのように動作するかを理解するために仕様書を読むようにしましょう。

+ +

論理属性

+ +

一部のコンテンツ属性 (例えば required, readonly, disabled) は論理属性 (boolean attributes) と呼ばれています。論理属性は存在すれば、その値は true となり、存在しなければ、その値は false となります。

+ +

HTML5 では、論理属性に許されている値の制約を定義しています。属性が存在する場合は、値は空文字列 (属性の値が割り当てられないことがあります) または属性の正式名に ASCII で大文字・小文字まで一致する値のどちらかで、前後にホワイトスペースを含んではいけません。以下の例は論理属性をマークアップする正しい方法です。

+ +
<div itemscope> This is valid HTML but invalid XML. </div>
+<div itemscope=itemscope> This is also valid HTML but invalid XML. </div>
+<div itemscope=""> This is valid HTML and also valid XML. </div>
+<div itemscope="itemscope"> This is also valid HTML and XML, but perhaps a bit verbose. </div>
+ +

明確にするために、 "true" および "false" という値は論理属性では許可されていません。偽の値を表すには、属性ごと省略する必要があります。この制約により、いくつかのよくある誤解が明確になります。例えば checked="false" は、属性が存在するため、その要素の checked 属性が true であると解釈されます。

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/max/index.html b/files/ja/web/html/attributes/max/index.html new file mode 100644 index 0000000000..7fcc1d64d4 --- /dev/null +++ b/files/ja/web/html/attributes/max/index.html @@ -0,0 +1,166 @@ +--- +title: 'HTML 属性: max' +slug: Web/HTML/Attributes/max +tags: + - Attribute + - Attributes + - Constraint validation + - HTML + - Reference +translation_of: Web/HTML/Attributes/max +--- +

{{HTMLSidebar}}

+ +

max 属性は、その属性を含む入力に対して許容可能で有効な最大値を定義します。要素の値がこれより大きい場合、その要素は制約検証に失敗します。この値は、 min 属性の値以上でなければなりません。 max 属性が指定されていないか無効であった場合、 max 値は適用されません。 max 属性が有効で、値が空でなく、 max 属性によって許容される最大値よりも大きい場合、制約検証によってフォームの送信が阻止されます。

+ +

これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('progress')}} および {{htmlelement('meter')}} 要素で有効であり、 max 属性はフォームコントロールで妥当と見なされる最も大きな値をして逸する数値です。

+ +

値が許容される最大値を超えた場合、 {{domxref('validityState.rangeOverflow')}} が true となり、そのコントロールは {{cssxref(':out-of-range')}} および {{cssxref(':invalid')}} 擬似クラスと一致するようになります。

+ +

構文

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
max の構文 (入力 type 別)
入力型構文例
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" max="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" max="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" max="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" max="17:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T23:59">
{{HTMLElement("input/number", "number")}}<number><input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}<number><input type="range" min="60" step="5" max="100">
+ +
+

注: ユーザーが入力したデータが設定された最大値を満たしていない場合、製薬検証では無効とみなされ、 {{cssxref(':invalid')}} と {{cssxref(':out-of-range')}} の擬似クラスに一致するようになります。

+
+ +

詳しくは クライアント側検証と {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}} を参照してください。

+ +

{{htmlelement('progress')}} 要素における max 属性は、 progress 要素で示されたタスクがどれだけの作業を必要とするかを記述します。存在する場合、ゼロより大きい値を持ち、有効な浮動小数点数でなければなりません。 {{htmlelement('meter')}} 要素における max 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最小値 (min 属性) よりも大きくなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

+ + + + + + + + + + + + + + + + + + + + + + +
その他の要素における max 値の構文
入力型構文例
{{HTMLElement("progress")}}<number><progress id="file" max="100" value="70"> 70% </progress>
{{HTMLElement("meter")}}<number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
+ +

アクセシビリティの考慮

+ +

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 max 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'max attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-progress-element', 'progress element')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML WHATWG', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-meter-element', 'meter element')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attributes.max")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/maxlength/index.html b/files/ja/web/html/attributes/maxlength/index.html new file mode 100644 index 0000000000..002bfcb7ee --- /dev/null +++ b/files/ja/web/html/attributes/maxlength/index.html @@ -0,0 +1,59 @@ +--- +title: 'HTML 属性: maxlength' +slug: Web/HTML/Attributes/maxlength +tags: + - Attribute + - Attributes + - Constraint validation +translation_of: Web/HTML/Attributes/maxlength +--- +

{{HTMLSidebar}}{{draft}}

+ +

maxlength 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最大文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 maxlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最大長が設定されません。

+ +

maxlength の値はすべて、 minlength が存在して有効である場合は、その値以上である必要があります。フィールドのテキスト値の長さが maxlength の UTF-16 コード単位の長さを超える場合、入力欄は制約検証に失敗します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。

+ +

制約検証

+ +

ブラウザーは一般的に、 maxlength 属性が許可する以上のテキストをユーザーが入力することを防止しますが、長さが maxlength が許可しているよりも長くなった場合、 {{domxref("ValidityState")}} オブジェクトの読み取り専用の {{domxref("ValidityState.tooLong", "tooLong")}} プロパティが true になります。

+ +

例

+ +
<input type="password" maxlength="4"/>
+
+ +

{{EmbedLiveSample('Examples', '100%', 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', 'input.html#attr-input-maxlength', 'maxlength attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-maxlength-accept', 'maxlength attribute')}}{{Spec2('HTML5.1')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attribute.maxlength")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/min/index.html b/files/ja/web/html/attributes/min/index.html new file mode 100644 index 0000000000..5c549a352a --- /dev/null +++ b/files/ja/web/html/attributes/min/index.html @@ -0,0 +1,158 @@ +--- +title: 'HTML 属性: min' +slug: Web/HTML/Attributes/min +tags: + - Attribute + - Attributes + - Constraint validation + - min +translation_of: Web/HTML/Attributes/min +--- +

{{HTMLSidebar}}

+ +

min 属性は、その属性を含む入力欄に対して許容できる有効な最小値を定義します。要素の値がこれより大きい場合、その要素は制約検証に失敗します。この値は、 max 属性の値以下でなければなりません。 min 属性が指定されていないか無効であった場合、最小値は適用されません。

+ +

これは数値入力型、例えば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型や {{htmlelement('meter')}} 要素で有効であり、 min 属性はフォームコントロールで妥当と見なされる最も小さな値を指定する数値です。

+ +

構文

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
min の構文 (入力 type 別)
入力型構文例
{{HTMLElement("input/date", "date")}}yyyy-mm-dd<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}yyyy-mm<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}yyyy-W##<input type="week" min="2019-W23" step="">
{{HTMLElement("input/time", "time")}}hh:mm<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}yyyy-mm-ddThh:mm<input type="datetime-local" min="2019-12-25T19:30">
{{HTMLElement("input/number", "number")}}<number><input type="number" min="0" step="5" max="100">
{{HTMLElement("input/range", "range")}}<number><input type="range" min="60" step="5" max="100">
+ +
+

注: ユーザーが入力したデータが設定された最大値を満たしていない場合、制約検証では無効とみなされ、 {{cssxref(':invalid')}} の擬似クラスに一致するようになります。

+
+ +

詳しくは クライアント側検証と {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}} を参照してください。

+ +

{{htmlelement('meter')}} 要素における min 属性は、測定範囲の上限の数値を定義します。これは、指定されている場合、最大値 (max 属性) よりもチイサクなければなりません。どちらの場合も、省略された場合、値は既定で 1 となります。

+ + + + + + + + + + + + + + + + + +
その他の要素における min 値の構文
入力型構文例
{{HTMLElement("meter")}}<number><meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>
+ +

step への影響

+ +

min と step の値は、 step 属性がない場合も含め、どの値が有効であるかを定義します。 step の既定値は 0 です。

+ +

無効な入力の周囲に太く赤い境界を追加します。

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。

+ +
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8">
+ +

step の既定値は 1 なので、有効な値は 7.2, 8.2, 9.2, などになります。 8 の値は有効ではありません。無効な値が入っているので、対応しているブラウザーは値が無効であることを表示します。

+ +

{{EmbedLiveSample("Impact_on_step",200,55)}}

+ +

明示的に含まれていない限り、 number、 range では step は既定値の 1 となり、 date/time 入力型では 1 単位 (秒, 週, 月, 日) となります。

+ +

アクセシビリティの考慮

+ +

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 max 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attributes.min")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/minlength/index.html b/files/ja/web/html/attributes/minlength/index.html new file mode 100644 index 0000000000..6b62f1918c --- /dev/null +++ b/files/ja/web/html/attributes/minlength/index.html @@ -0,0 +1,72 @@ +--- +title: 'HTML 属性: minlength' +slug: Web/HTML/Attributes/minlength +tags: + - Attribute + - Input + - Reference + - minlength + - textarea +translation_of: Web/HTML/Attributes/minlength +--- +

{{HTMLSidebar}}

+ +

minlength 属性は、ユーザーが {{htmlelement('input')}} または {{htmlelement('textarea')}} に入力できる最小文字数を (UTF-16 コード単位で) 定義します。 0 以上の整数値である必要があります。 minlength が指定されなかった場合、または無効な値が指定された場合は、 input や textarea には最小文字数が設定されません。この値は maxlength の値以下である必要があります。そうでなければどちらの条件にも合わせることができないので、この値が有効になることはありません。

+ +

フィールドのテキスト値の長さが minlength を UTF-16 コード単位の長さで下回った場合、入力欄は制約検証に失敗し、 {{domxref('validityState.tooShort')}} が true を返します。制約検証は、ユーザーが値を変更した場合にのみ適用されます。送信に失敗すると、ブラウザーによっては必要な最小文字列と現在の長さを示してエラーメッセージを表示します。

+ +

例

+ +

minlength="5" を追加すると、値は空か5文字以上でないと有効にはならなくなります。

+ +
<label for="fruit">Enter a fruit name that is at least 5 letters long</label> <input type="text" minlength="5" id="fruit">
+ +

擬似クラスを使用すると、要素を値が有効かどうかによってスタイル付けすることができます。この値は null (空欄) または5文字以上であれば有効になります。ライム色は無効であり、レモン色は有効です。

+ +
input {
+  border: 2px solid currentcolor;
+}
+input:invalid {
+  border: 2px dashed red;
+}
+input:invalid:focus {
+  background-image: linear-gradient(pink, lightgreen);
+}
+ +

{{EmbedLiveSample('Examples', '100%', 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', 'input.html#attr-input-minlength', 'minlength attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-minlength-accept', 'minlength attribute')}}{{Spec2('HTML5.1')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attribute.minlength")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/multiple/index.html b/files/ja/web/html/attributes/multiple/index.html new file mode 100644 index 0000000000..da54459d50 --- /dev/null +++ b/files/ja/web/html/attributes/multiple/index.html @@ -0,0 +1,185 @@ +--- +title: 'HTML 属性: multiple' +slug: Web/HTML/Attributes/multiple +tags: + - Attribute + - Attributes + - Constraint validation + - HTML +translation_of: Web/HTML/Attributes/multiple +--- +

{{HTMLSidebar}}

+ +

論理属性の multiple 属性は、設定されている場合、フォームコントロールが1つ以上の値を受け入れることを意味します。 {{HTMLElement("input/email", "email")}} と {{HTMLElement("input/file", "file")}} の入力型と {{HTMLElement("select")}} に対して有効で、ユーザーが複数の値を選択する方法はフォームコントロールに依存します。

+ +

型によっては、multiple 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、 {{HTMLElement("select")}} コントロールに multiple 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 {{HTMLElement("input/email", "email")}} 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると {{cssxref(':invalid')}} 擬似クラスに一致します。

+ +

multiple が {{HTMLElement("input/email", "email")}} 入力型に設定されている場合、ユーザーは0個 (required がない場合)、1個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。

+ +
<input type="email" multiple name="emails" id="emails">
+ +

multiple 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭の空白はすべて削除されます。

+ +

multiple が {{HTMLElement("input/file", "file")}} 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法 (Shift か Control を押したまま、それからクリックするなど) で選択することができます。

+ +
<input type="file" multiple name="uploads" id="uploads">
+ +

この属性を省略した場合は、 <input> あたりに1つのファイルしか選択することができません。

+ +

multiple 属性を {{HTMLElement("select")}} 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 {{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するためのコントロールを表します。

+ +
<select multiple name="drawfs" id="drawfs">
+  <option>Grumpy</option>
+  <option>Happy</option>
+  <option>Sleepy</option>
+  <option>Bashful</option>
+  <option>Sneezy</option>
+  <option>Dopey</option>
+  <option>Doc</option>
+</select>
+ +

multiple を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。

+ +

アクセシビリティの考慮

+ +

ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 multiple 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。

+ +

複数選択で size="1" を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。

+ +

例

+ +

email 入力型

+ +
<label for="emails">誰にメールしますか？</label>
+<input type="email" multiple name="emails" id="emails" list="drawfemails" required size="64">
+
+<datalist id="drawfemails">
+  <option value="grumpy@woodworkers.com">Grumpy</option>
+  <option value="happy@woodworkers.com">Happy</option>
+  <option value="sleepy@woodworkers.com">Sleepy</option>
+  <option value="bashful@woodworkers.com">Bashful</option>
+  <option value="sneezy@woodworkers.com">Sneezy</option>
+  <option value="dopey@woodworkers.com">Dopey</option>
+  <option value="doc@woodworkers.com">Doc</option>
+</datalist>
+ + + +

multiple 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 required 属性が存在する場合、少なくとも1つのメールアドレスが必要です。

+ +

ブラウザーによっては、 multiple が存在する場合に関連付けられた {{htmlelement('datalist')}} から配下のメール会アドレスのためにオプションの list を表示することがあります。他のブラウザーは対応していません。

+ +

{{EmbedLiveSample("email_input", 600, 80) }}

+ +

file 入力型

+ +

multiple が {{HTMLElement("input/file", "file")}} 入力型に設定されている場合、1つ以上のファイルを選択することができます。

+ +
<form method="post" enctype="multipart/form-data">
+  <p>
+    <label for="uploads">
+       アップロードする画像を選択してください:
+    </label>
+    <input type="file" id="uploads" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple>
+  </p>
+  <p>
+    <label for="text">アップロードするテキストファイルを選択してください: </label>
+    <input type="file" id="text" name="text" accept=".txt">
+ </p>
+  <p>
+    <input type="submit" value="Submit">
+  </p>
+</form>
+ +

{{EmbedLiveSample("file_input", 600, 80) }}

+ +

multiple が設定された file 入力欄と、設定されていない入力欄との外見の違いに注意してください。

+ +

フォームが送信されたとき、 method="get" を使用していれば、選択された各ファイルの名前が URL パラメータに?uploads=img1.jpg&uploads=img2.svg のように追加されていたはずです。しかし、マルチパートのフォームデータを送信しているので、post を多用しています。詳しくは {{htmlelement('form')}} 要素とフォームデータの送信を参照してください。

+ +

select

+ +

{{HTMLElement("select")}} 要素の multiple 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、{{HTMLElement("select")}} 要素は、選択肢のリストから単一の {{HTMLElement("option")}} を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザは、一行のドロップダウンではなくスクロールするリストボックスを表示します。

+ +
<form method="get" action="#">
+<p>
+ <label for="dwarfs">好きな木こりを選ぶ:</label>
+  <select multiple name="drawfs" id="drawfs">
+    <option>grumpy@woodworkers.com</option>
+    <option>happy@woodworkers.com</option>
+    <option>sleepy@woodworkers.com</option>
+    <option>bashful@woodworkers.com</option>
+    <option>sneezy@woodworkers.com</option>
+    <option>dopey@woodworkers.com</option>
+    <option>doc@woodworkers.com</option>
+  </select>
+</p>
+<p>
+ <label for="favoriteOnly">好きなものを選ぶ:</label>
+  <select name="favoriteOnly" id="favoriteOnly">
+    <option>grumpy@woodworkers.com</option>
+    <option>happy@woodworkers.com</option>
+    <option>sleepy@woodworkers.com</option>
+    <option>bashful@woodworkers.com</option>
+    <option>sneezy@woodworkers.com</option>
+    <option>dopey@woodworkers.com</option>
+    <option>doc@woodworkers.com</option>
+  </select>
+</p>
+<p>
+  <input type="submit" value="Submit">
+</p>
+</form>
+ +

{{EmbedLiveSample("select", 600, 120) }}

+ +

2つのフォームコントロール間の外観の違いに注意してください。

+ +
/* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */
+
+/*
+select[multiple] {
+  height: 1.5em;
+  vertical-align: top;
+}
+select[multiple]:focus,
+select[multiple]:active {
+  height: auto;
+}
+*/
+ +

複数の属性を持つ <select> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は Ctrl、Command、または Shift キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザは <select> 要素に焦点を当てて、カーソルキーの Up と Down を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: Space キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザによって異なります。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#attr-input-multiple', 'multiple attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#attr-input-multiple', 'multiple attribute')}}{{Spec2('HTML5 W3C')}}
+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/pattern/index.html b/files/ja/web/html/attributes/pattern/index.html new file mode 100644 index 0000000000..da31c8a2b4 --- /dev/null +++ b/files/ja/web/html/attributes/pattern/index.html @@ -0,0 +1,163 @@ +--- +title: 'HTML attribute: pattern' +slug: Web/HTML/Attributes/pattern +tags: + - Attribute + - Attributes + - Constraint Validation API + - HTML + - Reference +translation_of: Web/HTML/Attributes/pattern +--- +

{{HTMLSidebar}}

+ +

pattern 属性は、フォームコントロールの値が一致すべき正規表現を指定します。 null 以外の値が pattern 値によって設定された制約に適合しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.patternMismatch','patternMismatch')}} プロパティが真になります。

+ +

pattern属性は {{HTMLElement("input/text", "text")}}, {{HTMLElement("input/tel", "tel")}}, {{HTMLElement("input/email", "email")}}, {{HTMLElement("input/url", "url")}}, {{HTMLElement("input/password", "password")}}, {{HTMLElement("input/search", "search")}} の入力型の属性です。

+ +
+

pattern属性は、制約検証を通過させるために、入力の {{htmlattrxref("value")}} が一致するべき正規表現です。これは有効な JavaScript の正規表現でなければならず、 {{jsxref("RegExp")}} 型で使用されたり、 正規表現ガイドで説明されているものと同じものです。通り正規表現をコンパイルする際に 'u' フラグを指定することで、パターンが ASCII ではなく Unicode コードポイントの並びとして扱われるようになります。パターンテキストの周りには、スラッシュを指定してはいけません。

+ +

パターンが指定されていないか無効な場合、正規表現は適用されず、この属性は無視されます。

+ +
+

ヒント: {{htmlattrxref("title", "input")}} 属性を使用すると、ほとんどのブラウザーがパターンに一致するための要件を説明するためにツールチップとして表示するテキストを指定することができます。説明をツールチップだけに頼ってはいけません。ユーザービリティについての詳細は以下を参照してください。

+
+
+ +

pattern 属性に対応している入力型の中には、特に {{HTMLElement("input/email", "email")}} および {{HTMLElement("input/url", "url")}} 入力型のように、一致しなければならない期待値の構文を持っているものがあります。 pattern 属性が存在せず、値がその値型の期待される構文と一致しない場合、 {{domxref('ValidityState')}} オブジェクトの読み取り専用の {{domxref('ValidityState.typeMismatch','typeMismatch')}} プロパティが真になります。

+ +

ユーザービリティ

+ +

pattern を含める場合は、コントロールの近くの可視テキストでパターンについて説明してください。さらに、パターンを説明する title 属性を含めてください。ユーザーエージェントは、制約検証中に title の内容を使用して、パターンが一致しないことをユーザーに伝えることができます。ブラウザーによっては、タイトルの内容を持つツールチップを表示し、視覚障碍者のユーザーの使い勝手を向上させます。さらに、支援技術は、コントロールにフォーカスを合わせるとタイトルを声に出して読むことができる場合がありますが、アクセシビリティのためにはこれに頼るべきではありません。

+ +

制約検証

+ +

入力欄の値が空文字列ではなく、正規表現全体と一致しない場合は、 {{domxref('ValidityState.patternMismatch','patternMismatch')}} が真になります。
+ pattern の正規表現は、値に一致したときに、先頭が文字列の先頭に該当し、末尾が文字列の末尾に該当するため、これは JavaScript の正規表現とは少し異なります。 pattern 属性の場合、パターンの先頭に ^(?: が、末尾に )$ が指定されているかのように、値の部分ではなく全体に一致します。

+ +

例

+ +

以下ののものを考えてみてください。

+ +
+
<p>
+ <label>Enter your phone number in the format (123)456-7890
+  (<input name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)-
+   <input name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> -
+   <input name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/>
+ </label>
+</p>
+ +

ここでは北米の電話番号を示す3つの部分があり、電話番号の3つの構成要素すべてを含む暗黙のラベルがありますが、それぞれ3桁、3桁、4桁で pattern 属性によってそれぞれ設定されています。

+ +

値が長すぎたり短すぎたり、数字ではない文字が含まれていたりすると、 patternMismatch が true になります。 true の場合、要素は CSS の {{cssxref(":invalid")}} 擬似クラスに一致します。

+ +
input:invalid {
+  border: red solid 3px;
+}
+ +

{{EmbedLiveSample("example1", 300, 40)}}

+
+ +

代わりに minlength と maxlength 属性を用いた場合、 {{domxref('validityState.tooLong')}} または {{domxref('validityState.tooShort')}} が true になります。

+ +

パターンの指定

+ +

{{htmlattrxref("pattern", "input")}} 属性を使用すると、入力された値が有効とみなされるために一致しなければならない正規表現を指定することができます (正規表現を使用して入力を検証する簡単な集中講座は、正規表現に対する検証を参照してください)。

+ +

以下の例では、値を 4-8 文字に制限し、小文字のみを含むことを要求しています。

+ +
<form>
+  <div>
+    <label for="uname">Choose a username: </label>
+    <input type="text" id="uname" name="name" required size="45"
+           pattern="[a-z]{4,8}" title="4 to 8 lowercase letters">
+    <span class="validity"></span>
+    <p>Usernames must be lowercase and 4-8 characters in length.</p>
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + +

This renders like so:

+ +

{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}

+ +

アクセシビリティの考慮

+ +

コントロールに pattern 属性がある場合、 title 属性が使われていれば、そのパターンを説明しなければなりません。テキストコンテンツを視覚的な表示するために title 属性に頼ることは、多くのユーザーエージェントがアクセス可能な方法で属性を公開しないので、一般的には推奨されません。ブラウザーによっては、タイトルを持つ要素の上にポインターを置いたときにツールチップを表示しますが、キーボードのみのユーザーやタッチのみのユーザーは除外されてしまいます。これが、どのようにコントロールに記入すれば要件に合うかをユーザーに知らせる情報を含める必要がある理由の一つです。

+ +

一部のブラウザーでは title を使用してエラーメッセージを表示していますが、ブラウザーはポインターを置いたときにもタイトルをテキストとして表示することがあり、エラーが発生していない状況でも表示されることがあるので、エラーが発生したかのような言葉を使用しないように注意してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{ SpecName('HTML WHATWG', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML WHATWG')}}
{{ SpecName('HTML5.1', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML5.1')}}
{{ SpecName('HTML5 W3C', 'forms.html#attr-input-pattern', 'pattern') }}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attributes.pattern")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/required/index.html b/files/ja/web/html/attributes/required/index.html new file mode 100644 index 0000000000..aaac1d96bb --- /dev/null +++ b/files/ja/web/html/attributes/required/index.html @@ -0,0 +1,109 @@ +--- +title: 'HTML 属性: required' +slug: Web/HTML/Attributes/required +tags: + - Attribute + - Attributes + - Constraint validation + - Forms + - required +translation_of: Web/HTML/Attributes/required +--- +

{{HTMLSidebar}}

+ +

論理属性の required 属性は、存在する場合、所有するフォームを送信する前にユーザーが入力に値を指定しなければならないことを示します。 required 属性は {{HTMLElement("input/text","text")}}, {{HTMLElement("input/search","search")}}, {{HTMLElement("input/url","url")}}, {{HTMLElement("input/tel","tel")}}, {{HTMLElement("input/email","email")}}, {{HTMLElement("input/password","password")}}, {{HTMLElement("input/date","date")}}, {{HTMLElement("input/month","month")}}, {{HTMLElement("input/week","week")}}, {{HTMLElement("input/time","time")}}, {{HTMLElement("input/datetime-local","datetime-local")}}, {{HTMLElement("input/number","number")}}, {{HTMLElement("input/checkbox","checkbox")}}, {{HTMLElement("input/radio","radio")}}, {{HTMLElement("input/file","file")}} の {{HTMLElement("input")}} 型と {{HTMLElement("select")}} および {{HTMLElement("textarea")}} のフォームコントロール要素で対応しています。これらの入力型や要素の何れかに設定された場合、 {{cssxref(':required')}} 擬似クラスが一致します。属性が設定されていない場合は {{cssxref(':optional')}} 擬似クラスが一致します。

+ +

この属性は {{HTMLElement("input/range","range")}} と {{HTMLElement("input/color","color")}} は対応していませんし、どちらも既定値を持っているので関係がありません。 {{HTMLElement("input/hidden","hidden")}} は、非表示のフォームにユーザーが記入することを期待できないため、対応していません。また、 image を含むボタンの種類もいずれも対応していません。

+ +

なお、 color と range は required に対応していませんが、 color 型は既定値が #000000 であり、 range は、 min と max の中間点が既定値です。 -- 宣言されていない場合、ほとんどのブラウザーでは min と max の既定値はそれぞれ 0 と 100 です。 -- 従って、常に値があります。

+ +

入力欄に required 属性がある場合、 {{cssxref(":required")}} 擬似クラスも適用されます。逆に、 required 属性に対応していて、この属性が設定されていない入力欄は、 {{cssxref(":optional")}} 擬似クラスに一致します。

+ +

同じ名前が付けられた {{HTMLElement("input/radio","radio")}} ボタンのグループのでは、グループ内の一つのラジオボタンに required 属性が設定されていた場合、この属性が設定されているものでなくても構わないのですが、グループ内のラジオボタンの一つをチェックする必要があります。そのため、コードの保守性を向上させるために、グループ内の同じ名前のラジオボタンすべてに required 属性を設定するか、またはどれにも設定しないようにすることをお勧めします。

+ +

同じ名前が付けられた {{HTMLElement("input/checkbox","checkbox")}} 入力型のグループでは、 required 属性がついたチェックボックスのみが必須になります。

+ +
+

注: aria-required="true" を設定すると、ある要素 (任意の要素) が必須であることを読み上げソフトに伝えますが、その要素が任意であるかどうかには関係ありません。

+
+ +

属性の相互作用

+ +

読み取り専用フィールドは値を持つことができないので、 required は readonly 属性が指定されている入力欄には影響を与えません。

+ +

ユーザビリティ

+ +

required属性を設定する、その {{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} が必須であることをユーザーに知らせるために、コントロールの近くに目に見える表示を提供してください。さらに、必須フォームコントロールを {{cssxref(':required')}} 擬似クラスでターゲットにし、必須であることを示すようにスタイル付けしてください。これにより、視覚障碍者のユーザーのユーザービリティが向上します。しかし、 aria-required="true" を追加しても、ブラウザーと読み上げソフトの組み合わせがまだ required に対応していない場合には問題ありません。

+ +

制約検証

+ +

要素が必須で、かつ要素の値が空文字列の場合、その要素は {{domxref('ValidityState.valueMissing','valueMissing')}} に悩まされ、その要素が {{cssxref(':invalid')}} 擬似クラスに一致してします。

+ +

アクセシビリティの考慮

+ +

ユーザーにフォームコントロールが必須であることを知らせる表示を提供してください。色盲、認知機能の違い、スクリーンリーダーを使用しているかどうかにかかわらず、すべてのユーザーが要件を理解できるように、メッセージを伝えるものがテキスト、色、マーキング、属性などの多面的なものであることを確認してください。

+ +

例

+ +

HTML

+ +
<form>
+  <div class="group">
+    <input type="text">
+    <label>Normal</label>
+  </div>
+  <div class="group">
+    <input type="text" required="required">
+    <label>Required</label>
+  </div>
+  <input type="submit">
+</form>
+
+ +

結果

+ +

{{EmbedLiveSample('Examples')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'forms.html#attr-input-required', 'required attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#attr-input-required', 'required attribute')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML5.1', 'sec-forms.html#the-required-attribute', 'required attribute')}}{{Spec2('HTML5.1')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attributes.required")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/size/index.html b/files/ja/web/html/attributes/size/index.html new file mode 100644 index 0000000000..3722ecb051 --- /dev/null +++ b/files/ja/web/html/attributes/size/index.html @@ -0,0 +1,76 @@ +--- +title: 'HTML 属性: size' +slug: Web/HTML/Attributes/size +tags: + - Attribute + - HTML + - Input + - Reference + - Select +translation_of: Web/HTML/Attributes/size +--- +

{{HTMLSidebar}}

+ +

size 属性は、 {{htmlelement('input')}} 要素の幅と {{htmlelement('select')}} 要素の高さを定義します。 input については、 type 属性が {{HTMLElement("input/text", "text")}} または {{HTMLElement("input/password", "password")}} の場合は文字数です。これは 0 以上の整数でなければなりません。 size が指定されていないか、無効な値が指定された場合、入力欄にサイズが宣言されず、そのフォームコントロールはユーザーエージェントに基づいた既定の幅になります。 CSS が幅に影響を与えるプロパティで要素を対象としている場合は、 CSS が優先されます。

+ +

size 属性は制約検証には影響しません。

+ +

例

+ +

一部の入力型で size を指定すると、入力欄の幅を制御することができます。 select に size を追加すると、閉じた状態のときにいくつの選択肢が見えるかを定義します。

+ +
<label for="fruit">Enter a fruit</label> <input type="text" size="15" id="fruit">
+<label for="vegetable">Enter a vegetable</label> <input type="text" id="vegetable">
+
+<select name="fruits" size="5">
+  <option>banana</option>
+  <option>cherry</option>
+  <option>strawberry</option>
+  <option>durian</option>
+  <option>blueberry</option>
+</select>
+
+<select name="vegetables" size="5">
+<option>carrot</option>
+<option>cucumber</option>
+<option>cauliflower</option>
+<option>celery</option>
+<option>collard greens</option>
+</select>
+ +

{{EmbedLiveSample('Examples', '100%', 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('HTML WHATWG', 'input.html#attr-input-size', 'size attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5.1', 'input.html#attr-size-accept', 'size attribute')}}{{Spec2('HTML5.1')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.attribute.size")}}

+ +

関連情報

+ + diff --git a/files/ja/web/html/attributes/step/index.html b/files/ja/web/html/attributes/step/index.html new file mode 100644 index 0000000000..aa0e2c89a8 --- /dev/null +++ b/files/ja/web/html/attributes/step/index.html @@ -0,0 +1,132 @@ +--- +title: 'HTML attribute: step' +slug: Web/HTML/Attributes/step +tags: + - Attribute + - Attributes + - constrain validation + - step +translation_of: Web/HTML/Attributes/step +--- +

{{HTMLSidebar}}{{draft}}

+ +

step 属性は、が従わなければならない刻み値を指定する数値、またはキーワード any です。数値の入力型、たとえば {{HTMLElement("input/date", "date")}}, {{HTMLElement("input/month", "month")}}, {{HTMLElement("input/week", "week")}}, {{HTMLElement("input/time", "time")}}, {{HTMLElement("input/datetime-local", "datetime-local")}}, {{HTMLElement("input/number", "number")}}, {{HTMLElement("input/range", "range")}} 型に有効です。

+ +

step は、スピナーボタンを上下にクリックしたり、範囲上でスライダーを左右に動かしたり、異なる日付タイプを検証したりする際の刻み間隔を設定します。明示的に指定されていない場合、 step の既定値は、 number と range の場合は 1、日付/時刻入力型の場合は1単位 (分、週、月、日) になります。値は正の整数または浮動小数点数、または刻みが指定されておらず、 (min や max のような他の制約を除いて) すべての値が可能であることを意味する特別な値 any のいずれかでなければなりません。

+ +

number 入力型の既定の刻み値は 1 で、刻みの基底値が整数でない場合を除き、整数のみを入力することができます。 time の既定の刻み値は 1 秒で、 900 は15分と等しくなります。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
step の既定値
入力型構文例
{{HTMLElement("input/date", "date")}}1 (日)<input type="date" min="2019-12-25" step="1">
{{HTMLElement("input/month", "month")}}1 (月)<input type="month" min="2019-12" step="12">
{{HTMLElement("input/week", "week")}}1 (週)<input type="week" min="2019-W23" step="2">
{{HTMLElement("input/time", "time")}}60 (分)<input type="time" min="09:00" step="900">
{{HTMLElement("input/datetime-local", "datetime-local")}}1 (日) +

<input type="datetime-local" min="019-12-25T19:30" step="7">

+
{{HTMLElement("input/number", "number")}}1<input type="number" min="0" step="0.1" max="10">
{{HTMLElement("input/range", "range")}}1<input type="range" min="0" step="2" max="10">
+ +

any が明示的に設定されていない場合、 number, 日付/時刻入力型, range の入力型で有効な値は、刻みの基底値と等しくなります。 - min の値と、それに step の値を max の値 (指定されている場合) まで加えていった値です。例えば、 <input type="number" min="10" step="2"> は10以上の偶数が有効です。省略された場合、 <input type="number"> は任意の整数が有効ですが、 4.2 のような小数は無効になります。これは step の既定値が 1 だからです。 4.2 を有効にするには、 step を any、 0.1, 0.2 などに設定するか、 min の値の小数点以下を .2 に、たとえば <input type="number" min="-5.2"> のようにする必要があります。

+ +

min の step への影響

+ +

min と step の値は、 step 属性がない場合も含め、どの値が有効であるかを定義します。 step の既定値は 0 です。

+ +

無効な入力の周囲に太く赤い境界を追加します。

+ +
input:invalid {
+  border: solid red 3px;
+}
+ +

それから入力欄の最小値を 7.2 と定義し、 step 属性は省略しているので、既定値が 1 になります。

+ +
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2">
+ +

有効な値は、 1.2, 3.2, 5.2, 7.2, 9.2, 11.2 などになります。整数や .2 が付く偶数は無効です。無効な値である場合、対応しているブラウザーは値が無効であることを表示します。数値スピナーがある場合は、 1.2 以上の有効な浮動小数点以下の値のみ表示されます。

+ +

{{EmbedLiveSample("min_impact_on_step",200,55)}}

+ +
+

注: ユーザーが入力したデータが刻みの設定に従っていない場合、制約検証では無効とみなされ、 {{cssxref(":invalid")}} と {{cssxref(":out-of-range")}} の擬似クラスにマッチします。

+
+ +

詳しくはクライアント側制約検証と {{domxref("ValidityState.stepMismatch", "stepMismatch")}} を参照してください。

+ +

アクセシビリティの考慮

+ +

ユーザーがフォームに記入したり、個々のフォームコントロールを使用するのに役立つ説明を提供してください。必須の入力、任意の入力、データの書式、その他の関連する情報を示してください。 max 属性を使用する場合は、この最大値の要件がユーザーに理解されていることを確認してください。 {{htmlelement('label')}} 内で指示を提供すれば十分かもしれません。ラベルの外に指示を提供すれば、より柔軟な配置やデザインが可能になるので、 aria-labelledby または aria-describedby を使用することを検討してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'input.html#the-min-and-max-attributes', 'min attribute')}}{{Spec2('HTML5 W3C')}}
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf