Skip to content

Web/HTML/Reference/Attributes/accept 他13件を更新 #27373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions files/ja/web/html/reference/attributes/accept/index.md
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
---
title: "HTML 属性: accept"
short-title: accept
slug: Web/HTML/Reference/Attributes/accept
original_slug: Web/HTML/Attributes/accept
l10n:
sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}

**`accept`** 属性は、値としてカンマ区切りでファイル種別または[固有ファイル種別指定子](#unique_file_type_specifiers)を取り、どのファイル種別を受け入れるかを記述します。

{{InteractiveExample("HTML Demo: accept", "tabbed-shorter")}}
{{InteractiveExample("HTML デモ: accept", "tabbed-shorter")}}

```html interactive-example
<label for="movie">Choose a movie to upload:</label>
<label for="movie">アップロードする映像を選択してください:</label>

<input type="file" id="movie" name="movie" accept="video/*" />

<label for="poster">Choose a poster:</label>
<label for="poster">ポスターを選択してください:</label>

<input type="file" id="poster" name="poster" accept="image/png, image/jpeg" />
```
Expand Down Expand Up @@ -56,7 +56,7 @@ accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlele
<input type="file" id="imageFile" accept="image/*" />
```

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

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

Expand All @@ -66,15 +66,15 @@ accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlele

```html
<p>
<label for="soundFile">Select an audio file:</label>
<label for="soundFile">音声ファイルを選んでください:</label>
<input type="file" id="soundFile" accept="audio/*" />
</p>
<p>
<label for="videoFile">Select a video file:</label>
<label for="videoFile">動画ファイルを選んでください:</label>
<input type="file" id="videoFile" accept="video/*" />
</p>
<p>
<label for="imageFile">Select some images:</label>
<label for="imageFile">画像をいくつか選んでください:</label>
<input type="file" id="imageFile" accept="image/*" multiple />
</p>
```
Expand Down Expand Up @@ -106,11 +106,11 @@ accept プロパティは {{HTMLElement("input/file", "file")}} 型の {{htmlele
```html
<form method="post" enctype="multipart/form-data">
<div>
<label for="file">Choose file to upload</label>
<label for="file">アップロードするファイルを選択してください</label>
<input type="file" id="file" name="file" multiple />
</div>
<div>
<button>Submit</button>
<button>送信</button>
</div>
</form>
```
Expand All @@ -130,7 +130,7 @@ div {

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

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

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

Expand All @@ -148,15 +148,15 @@ div {
```html
<form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">Choose file to upload</label>
<label for="profile_pic">アップロードするファイルを選んでください</label>
<input
type="file"
id="profile_pic"
name="profile_pic"
accept=".jpg, .jpeg, .png" />
</div>
<div>
<button>Submit</button>
<button>送信</button>
</div>
</form>
```
Expand Down
25 changes: 12 additions & 13 deletions files/ja/web/html/reference/attributes/autocomplete/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,26 @@
title: "HTML 属性: autocomplete"
short-title: autocomplete
slug: Web/HTML/Reference/Attributes/autocomplete
original_slug: Web/HTML/Attributes/autocomplete
l10n:
sourceCommit: 0a406fde67d297e7d2771e4ba239f545eee46d07
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}

HTML の `autocomplete` 属性は、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、{{Glossary("user agent", "ユーザーエージェント")}}がフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。
HTML の `autocomplete` 属性により、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザーに示唆することができるのに加え、{{Glossary("user agent", "ユーザーエージェント")}}がフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定することができます。

入力値としてテキストまたは数値を取る {{HTMLElement("input")}} 要素、 {{HTMLElement("textarea")}} 要素、 {{HTMLElement("select")}} 要素、 {{HTMLElement("form")}} 要素で利用できます。

{{InteractiveExample("HTML Demo: autocomplete", "tabbed-shorter")}}
{{InteractiveExample("HTML デモ: autocomplete", "tabbed-shorter")}}

```html interactive-example
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

<label for="lastName">Last Name:</label>
<label for="lastName">苗字:</label>
<input name="lastName" id="lastName" type="text" autocomplete="family-name" />

<label for="email">Email:</label>
<label for="firstName">名前:</label>
<input name="firstName" id="firstName" type="text" autocomplete="given-name" />

<label for="email">メールアドレス:</label>
<input name="email" id="email" type="email" autocomplete="off" />
```

Expand All @@ -44,7 +43,7 @@ label {
<input autocomplete="section-user1 billing postal-code" />
```

{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に `autocomplete` 属性がない場合、ブラウザーは[その要素の**所有元フォーム**の `autocomplete` 属性](/ja/docs/Web/HTML/Reference/Elements/form#autocomplete)を使用します。所有元フォームとは、要素の [`form`](/ja/docs/Web/HTML/Reference/Elements/input#form) 属性で指定された `id` に一致する `<form>` (存在する場合)か、より一般的には、その要素を内部に含んでいる `<form>` です。
{{HTMLElement("input")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}} 要素に `autocomplete` 属性がない場合、ブラウザーは[その要素の**所有元フォーム**の `autocomplete` 属性](/ja/docs/Web/HTML/Reference/Elements/form#autocomplete)を使用します。所有元フォームとは、 {{HTMLElement("form")}} 要素のうち `id` が [`form`](/ja/docs/Web/HTML/Reference/Elements/input#form) 属性で指定された値に等しい要素(存在する場合)か、より一般的には、その要素を内部に含んでいる `<form>` です。

> [!NOTE]
> 自動入力を提供するために、ユーザーエージェントは `<input>`/`<select>`/`<textarea>` 要素に次のことを要求することがあります。
Expand Down Expand Up @@ -75,7 +74,7 @@ label {
- : ブラウザーはこのフィールドの値を自動的に入力または選択することが許可されていません。文書やアプリケーションが独自の自動入力機能を提供していたり、セキュリティ上の理由でフィールドの値を自動的に入力しないよう要求していたりする可能性はあります。

> [!NOTE]
> ほとんどの現行ブラウザーでは `autocomplete` 属性を `"off"` に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。[ログインフィールドの自動入力の管理](/ja/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion#autocomplete_属性とログイン欄)をご覧ください。
> ほとんどの現行ブラウザーでは `autocomplete` 属性を `"off"` に設定しても、ブラウザーのパスワードマネージャーがユーザー名やパスワードを保存したいかをユーザーに問い合わせたり、ログインフォームにそれらを自動入力したりすることを抑制できません。[ログインフィールドでの自動入力の管理](/ja/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion#ログインフィールドでの自動入力の管理)をご覧ください。

- `on`

Expand Down Expand Up @@ -253,14 +252,14 @@ label {

{{htmlelement("input")}} と {{htmlelement("textarea")}} では、 `webauthn` トークンを最後に含めることで、ユーザーがコントロールとやりとりする際に、ユーザーエージェントが公開鍵認証情報を表示する必要があることを示すことができます。

- `webauthn` {{experimental_inline}}
- `webauthn`
- : [ウェブ認証 API](/ja/docs/Web/API/Web_Authentication_API) によって、条件付きの {{domxref("CredentialsContainer.get()", "navigator.credentials.get()")}} 呼び出し(すなわち、 `mediation: 'conditional'` を含む呼び出し)によってリクエストされた、生成されたパスキー。詳しくは [Sign in with a passkey through form autofill](https://web.dev/articles/passkey-form-autofill) を参照してください。

## 例

```html
<div>
<label for="cc-number">Enter your credit card number</label>
<label for="cc-number">クレジットカード番号を入力してください</label>
<input name="cc-number" id="cc-number" autocomplete="off" />
</div>
```
Expand Down
20 changes: 10 additions & 10 deletions files/ja/web/html/reference/attributes/capture/index.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
title: "HTML 属性: capture"
short-title: capture
slug: Web/HTML/Reference/Attributes/capture
original_slug: Web/HTML/Attributes/capture
l10n:
sourceCommit: 942a529383ee7ee3996fb234187641c08935f3ff
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}

**`capture`** 属性は、オプションとして、新しいファイルをキャプチャすることと、 [`accept`](accept) 属性で定義された種類の新しいメディアをどの機器でキャプチャするかを指定します。
**`capture`** 属性は、オプションとして、新しいファイルをキャプチャすることと、 [`accept`](/ja/docs/Web/HTML/Reference/Attributes/accept) 属性で定義された種類の新しいメディアをどの機器でキャプチャするかを指定します。

値としては、 `user` と `environment` があります。 capture 属性は {{HTMLElement("input/file", "file")}} 入力型が対応しています。

`capture` 属性は、[accept](accept) 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。
`capture` 属性は、[accept](/ja/docs/Web/HTML/Reference/Attributes/accept) 属性が入力の種類を示す場合、画像やビデオデータの取り込みに使用するカメラを指定する文字列をその値として受け取ります。

| 値 | 説明 |
| ------------- | ---------------------------------------- |
Expand All @@ -22,14 +22,14 @@ l10n:
> [!NOTE]
> capture は、以前は論理属性で、存在する場合、ファイル入力を要求する代わりに、カメラやマイクなどの機器のメディアキャプチャ機器を使用するように要求していました。

{{InteractiveExample("HTML Demo: capture", "tabbed-standard")}}
{{InteractiveExample("HTML デモ: capture", "tabbed-standard")}}

```html interactive-example
<label for="selfie">Take a picture of your face:</label>
<label for="selfie">あなたの顔の写真を撮りましょう:</label>

<input type="file" id="selfie" name="selfie" accept="image/*" capture="user" />

<label for="picture">Take a picture using back facing camera:</label>
<label for="picture">背面カメラを使って写真を取りましょう:</label>

<input
type="file"
Expand All @@ -56,15 +56,15 @@ input {

```html
<p>
<label for="soundFile">What does your voice sound like?:</label>
<label for="soundFile">あなたの声はどのような音ですか?:</label>
<input type="file" id="soundFile" capture="user" accept="audio/*" />
</p>
<p>
<label for="videoFile">Upload a video:</label>
<label for="videoFile">動画をアップロード:</label>
<input type="file" id="videoFile" capture="environment" accept="video/*" />
</p>
<p>
<label for="imageFile">Upload a photo of yourself:</label>
<label for="imageFile">自分の写真をアップロードしてください:</label>
<input type="file" id="imageFile" capture="user" accept="image/*" />
</p>
```
Expand Down
11 changes: 5 additions & 6 deletions files/ja/web/html/reference/attributes/dirname/index.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: "HTML 属性: dirname"
short-title: dirname
slug: Web/HTML/Reference/Attributes/dirname
original_slug: Web/HTML/Attributes/dirname
l10n:
sourceCommit: 62b2885cf645395c39081f8ffa8f6023d7d1bc0b
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand All @@ -14,19 +14,18 @@ l10n:

## 使用法のメモ

`dirname` 属性はすべての {{htmlelement("textarea")}} 要素、および種類が {{htmlelement("input/text", "text")}}{{htmlelement("input/search", "search")}}{{htmlelement("input/tel", "tel")}}{{htmlelement("input/url", "url")}}{{htmlelement("input/email", "email")}} のいずれかであるすべての {{htmlelement("input")}} 要素で用いることができます
`dirname` 属性はすべての {{htmlelement("textarea")}} 要素、およびすべての {{htmlelement("input")}} 要素のうち、種類が {{htmlelement("input/hidden", "hidden")}}, {{htmlelement("input/text", "text")}}, {{htmlelement("input/search", "search")}}, {{htmlelement("input/tel", "tel")}}, {{htmlelement("input/url", "url")}}, {{htmlelement("input/email", "email")}}, {{htmlelement("input/password", "password")}}, {{htmlelement("input/submit", "submit")}}, {{htmlelement("input/reset", "reset")}}, {{htmlelement("input/button", "button")}} のいずれかの型であるもので用いることができます

送信されるデータの形式は `{dirname_value}={direction}` です。`{dirname_value}` は `dirname` 属性の値に、`{direction}` はテキストの方向になります。
たとえば、ユーザーが属性 `name="comment"` および `dirname="comment-direction"` を持つ要素に「Hello」を入力した場合、`GET` リクエストでフォームを送信する際の URL エンコードされたデータは `comment=Hello&comment-direction=ltr` となるでしょう。

たとえば、ユーザーが属性 `name="comment"` および `dirname="comment-direction"` を持つ要素に "Hello" を入力した場合、`GET` リクエストでフォームを送信する際の URL エンコードされたデータは `comment=Hello&comment-direction=ltr` となるでしょう。
方向は、以下のいずれかです。

- `rtl`
- : ユーザーが入力したテキストを書く方向は右から左です。
- `ltr`
- : ユーザーが入力したテキストを書く方向は左から右です。

テキストの方向が指定されていない場合は、ユーザーエージェントはフォームが入っている親要素のテキストの方向を用います。それも指定されていない場合は、ユーザーエージェントのデフォルトのテキストの方向を用います
テキストの方向が指定されていない場合は、ユーザーエージェントはフォームが入っている親要素のテキストの方向を用います。それも指定されていない場合は、ユーザーエージェントの既定のテキストの方向を用います

## 例

Expand Down
Loading