Skip to content

Web/HTML/Reference/Elements/input 以下の記事を更新 #26835

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.

Sign up for GitHub

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
mfuji09 merged 1 commit into from
Apr 20, 2025
Merged

Web/HTML/Reference/Elements/input 以下の記事を更新 #26835

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
13 changes: 6 additions & 7 deletions files/ja/web/html/reference/elements/input/button/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
---
title: <input type="button">
slug: Web/HTML/Reference/Elements/input/button
original_slug: Web/HTML/Element/input/button
l10n:
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}

{{HTMLElement("input")}} 要素の **`button`** 型は、単純なプッシュボタンとして描画され、イベントハンドラー関数 (ふつうは {{domxref("Element/click_event", "click")}} イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。
{{HTMLElement("input")}} 要素の **`button`** 型は、プッシュボタンとして描画され、イベントハンドラー関数 (ふつうは {{domxref("Element/click_event", "click")}} イベント) を割り当てることで、ウェブページのあらゆる場所でカスタム機能を制御するようにプログラムすることができます。

{{InteractiveExample("HTML Demo: &lt;input type=&quot;button&quot;&gt;", "tabbed-shorter")}}

Expand Down Expand Up @@ -217,7 +216,7 @@ function disableButton() {

## 例

以下の例では、 {{htmlelement("canvas")}} 要素といくらかの CSS と JavaScript を使用して作成した、とても簡単なお絵かきアプリを紹介します。 (簡略化のため CSS を省略します)。上部の 2 つのコントロールで、色と描画するペンの大きさを選択できます。ボタンは、クリックすると、キャンバスを消去する関数を呼び出します。
以下の例では、 {{htmlelement("canvas")}} 要素といくらかの CSS と JavaScript を使用して作成した、とても基本的なお絵かきアプリを紹介します。 (簡略化のため CSS を省略します)。上部の 2 つのコントロールで、色と描画するペンの大きさを選択できます。ボタンは、クリックすると、キャンバスを消去する関数を呼び出します。

```html
<div class="toolbar">
Expand Down Expand Up @@ -354,8 +353,8 @@ draw();
<tr>
<td><strong>対応している共通属性</strong></td>
<td>
<a href="/ja/docs/Web/HTML/Element/input#type"><code>type</code></a> および
<a href="/ja/docs/Web/HTML/Element/input#value"><code>value</code></a>
<a href="/ja/docs/Web/HTML/Reference/Elements/input#type"><code>type</code></a> および
<a href="/ja/docs/Web/HTML/Reference/Elements/input#value"><code>value</code></a>
</td>
</tr>
<tr>
Expand All @@ -372,7 +371,7 @@ draw();
</tr>
<tr>
<td><strong>暗黙の ARIA ロール</strong></td>
<td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/button_role"><code>button</code></a></td>
<td><a href="/ja/docs/Web/Accessibility/ARIA/Reference/Roles/button_role"><code>button</code></a></td>
</tr>
</tbody>
</table>
Expand Down
5 changes: 2 additions & 3 deletions files/ja/web/html/reference/elements/input/checkbox/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: <input type="checkbox">
slug: Web/HTML/Reference/Elements/input/checkbox
original_slug: Web/HTML/Element/input/checkbox
l10n:
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -342,7 +341,7 @@ otherCheckbox.addEventListener("change", () => {
</tr>
<tr>
<td><strong>暗黙の ARIA ロール</strong></td>
<td><a href="/ja/docs/Web/Accessibility/ARIA/Roles/checkbox_role"><code>checkbox</code></a></td>
<td><a href="/ja/docs/Web/Accessibility/ARIA/Reference/Roles/checkbox_role"><code>checkbox</code></a></td>
</tr>
</tbody>
</table>
Expand Down
7 changes: 3 additions & 4 deletions files/ja/web/html/reference/elements/input/color/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: <input type="color">
slug: Web/HTML/Reference/Elements/input/color
original_slug: Web/HTML/Element/input/color
l10n:
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -200,8 +199,8 @@ function updateAll(event) {
<tr>
<td><strong>対応する共通属性</strong></td>
<td>
<a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a> および
<a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a>
<a href="/ja/docs/Web/HTML/Reference/Elements/input#autocomplete"><code>autocomplete</code></a> および
<a href="/ja/docs/Web/HTML/Reference/Elements/input#list"><code>list</code></a>
</td>
</tr>
<tr>
Expand Down
13 changes: 6 additions & 7 deletions files/ja/web/html/reference/elements/input/date/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: <input type="date">
slug: Web/HTML/Reference/Elements/input/date
original_slug: Web/HTML/Element/input/date
l10n:
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -255,16 +254,16 @@ input:valid + span::after {
<tr>
<td><strong>対応している共通属性</strong></td>
<td>
<a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#readonly"><code>readonly</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#step"><code>step</code></a>
<a href="/ja/docs/Web/HTML/Reference/Elements/input#autocomplete"><code>autocomplete</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#readonly"><code>readonly</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#step"><code>step</code></a>
</td>
</tr>
<tr>
<td><strong>IDL 属性</strong></td>
<td>
<a href="/ja/docs/Web/HTML/Element/input#value"><code>value</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#value"><code>value</code></a>,
<code>valueAsDate</code>,
<code>valueAsNumber</code>
</td>
Expand Down
15 changes: 7 additions & 8 deletions files/ja/web/html/reference/elements/input/datetime-local/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: <input type="datetime-local">
slug: Web/HTML/Reference/Elements/input/datetime-local
original_slug: Web/HTML/Element/input/datetime-local
l10n:
sourceCommit: 1977c6e57be71ba31aaadec114ccdaca41c2019c
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -254,17 +253,17 @@ input:valid + span::after {
<tr>
<td><strong>対応している共通属性</strong></td>
<td>
<a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#readonly"><code>readonly</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#step"><code>step</code></a>
<a href="/ja/docs/Web/HTML/Reference/Elements/input#autocomplete"><code>autocomplete</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#readonly"><code>readonly</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#step"><code>step</code></a>
</td>
</tr>
<tr>
<td><strong>IDL 属性</strong></td>
<td>
<a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#value"><code>value</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#value"><code>value</code></a>,
<code>valueAsDate</code>,
<code>valueAsNumber</code>
</td>
Expand Down
33 changes: 16 additions & 17 deletions files/ja/web/html/reference/elements/input/email/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: <input type="email">
slug: Web/HTML/Reference/Elements/input/email
original_slug: Web/HTML/Element/input/email
l10n:
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -39,7 +38,7 @@ label {
{{HTMLElement("input")}} 要素の [`value`](/ja/docs/Web/HTML/Reference/Elements/input#value) 属性には文字列が入り、メールアドレスの構文に合うかどうかが自動的に検証されます。具体的には、検証に通ることができる値の書式には 3 種類があります。

1. 空文字列 ("")。ユーザーが値を入力しないか、または値が削除されたことを表します。
2. 単一の正しい形式のメールアドレス。メールアドレスが実在する必要はありませんが、少なくとも正しい書式です。簡単に言えば、 `username@domain` または `[email protected]` の形です。もちろんそれ以上のものもあります。[検証](#検証)の節で、メールアドレスの検証アルゴリズムで一致する{{Glossary("Regular expression", "正規表現")}}について参照してください。
2. 単一の正しい形式のメールアドレス。メールアドレスが実在する必要はありませんが、少なくとも正しい書式です。これは、 `username@domain` または `[email protected]` の形です。もちろんそれ以上のものもあります。[検証](#検証)の節で、メールアドレスの検証アルゴリズムで一致する{{Glossary("Regular expression", "正規表現")}}について参照してください。
3. [`multiple`](/ja/docs/Web/HTML/Reference/Elements/input#multiple) 属性が指定されたとき（のみ）、値はカンマ区切りで複数の正しい形式のメールアドレスを入れることができます。それぞれのメールアドレスの前後にある空白は除去されます。

[検証](#検証)の節で、どのようなメールアドレスが正しい形式であると検証されるかの詳細を参照してください。
Expand Down Expand Up @@ -375,18 +374,18 @@ label::after {
<tr>
<td><strong>対応している共通属性</strong></td>
<td>
<a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#maxlength"><code>maxlength</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#minlength"><code>minlength</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#multiple"><code>multiple</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#name"><code>name</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#pattern"><code>pattern</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#placeholder"><code>placeholder</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#readonly"><code>readonly</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#required"><code>required</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#size"><code>size</code></a>,
<a href="/ja/docs/Web/HTML/Element/input#type"><code>type</code></a>
<a href="/ja/docs/Web/HTML/Reference/Elements/input#autocomplete"><code>autocomplete</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#list"><code>list</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#maxlength"><code>maxlength</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#minlength"><code>minlength</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#multiple"><code>multiple</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#name"><code>name</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#pattern"><code>pattern</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#placeholder"><code>placeholder</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#readonly"><code>readonly</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#required"><code>required</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#size"><code>size</code></a>,
<a href="/ja/docs/Web/HTML/Reference/Elements/input#type"><code>type</code></a>
</td>
</tr>
<tr>
Expand All @@ -407,9 +406,9 @@ label::after {
<td><strong>暗黙の ARIA ロール</strong></td>
<td>
<code>list</code> 属性がない場合:
<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></code><br />
<code><a href="/ja/docs/Web/Accessibility/ARIA/Reference/Roles/textbox_role">textbox</a></code><br />
<code>list</code> 属性がある場合:
<code><a href="/ja/docs/Web/Accessibility/ARIA/Roles/combobox_role">combobox</a></code>
<code><a href="/ja/docs/Web/Accessibility/ARIA/Reference/Roles/combobox_role">combobox</a></code>
</td>
</tr>
</tbody>
Expand Down
5 changes: 2 additions & 3 deletions files/ja/web/html/reference/elements/input/file/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: <input type="file">
slug: Web/HTML/Reference/Elements/input/file
original_slug: Web/HTML/Element/input/file
l10n:
sourceCommit: 27bceead8e9b1fe9c92df0fa5e418f81bd5b9fdf
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -461,7 +460,7 @@ button.addEventListener("click", (e) => {
</tr>
<tr>
<td><strong>対応する共通属性</strong></td>
<td><a href="/ja/docs/Web/HTML/Element/input#required"><code>required</code></a></td>
<td><a href="/ja/docs/Web/HTML/Reference/Elements/input#required"><code>required</code></a></td>
</tr>
<tr>
<td><strong>追加の属性</strong></td>
Expand Down
7 changes: 3 additions & 4 deletions files/ja/web/html/reference/elements/input/hidden/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
---
title: <input type="hidden">
slug: Web/HTML/Reference/Elements/input/hidden
original_slug: Web/HTML/Element/input/hidden
l10n:
sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
sourceCommit: e9b6cd1b7fa8612257b72b2a85a96dd7d45c0200
---

{{HTMLSidebar}}
Expand Down Expand Up @@ -58,7 +57,7 @@ l10n:

## 例

以前に作成した編集フォーム（[編集された内容の追跡](#tracking_edited_content)を参照）に、隠し入力欄を使用して編集するレコードの ID を記憶する簡単なバージョンを実装する方法を見てみましょう。
以前に作成した編集フォーム（[編集された内容の追跡](#tracking_edited_content)を参照）に、隠し入力欄を使用して編集するレコードの ID を記憶するバージョンを実装する方法を見てみましょう。

編集フォームの HTML はこのようになっているかもしれません。

Expand Down Expand Up @@ -148,7 +147,7 @@ textarea {
</tr>
<tr>
<td><strong>対応する共通属性</strong></td>
<td><a href="/ja/docs/Web/HTML/Element/input#autocomplete"><code>autocomplete</code></a></td>
<td><a href="/ja/docs/Web/HTML/Reference/Elements/input#autocomplete"><code>autocomplete</code></a></td>
</tr>
<tr>
<td><strong>IDL 属性</strong></td>
Expand Down
Loading