From a907f647cd9c0325753c7df7c2c7784a6f0aac9e Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 11 Feb 2022 01:01:23 +0900 Subject: 2021/11/23 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/html/element/input/text/index.md | 577 +++++++++++++------------- 1 file changed, 279 insertions(+), 298 deletions(-) (limited to 'files') diff --git a/files/ja/web/html/element/input/text/index.md b/files/ja/web/html/element/input/text/index.md index 50d1029a08..9193d788ee 100644 --- a/files/ja/web/html/element/input/text/index.md +++ b/files/ja/web/html/element/input/text/index.md @@ -2,299 +2,245 @@ title: slug: Web/HTML/Element/input/text tags: - - Form input - - Forms + - フォーム入力 + - フォーム - HTML - - HTML forms + - HTML フォーム - Input - - Input Type - - Reference + - 入力型 + - リファレンス - Text - - text entry + - テキスト入力 - text input browser-compat: html.elements.input.input-text translation_of: Web/HTML/Element/input/text --- -
{{HTMLRef("Input_types")}}
-

{{HTMLElement("input")}} 要素の text 型は、基本的な単一行のテキスト入力欄を生成します。

+{{HTMLRef("Input_types")}} -
{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
+{{HTMLElement("input")}} 要素の **`text`** 型は、基本的な単一行のテキスト入力欄を生成します。 + +{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}} - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
{{anch("Value", "値")}}テキスト入力欄に含まれる文字列を表す {{domxref("DOMString")}}。
イベント{{event("change")}} および {{event("input")}}
対応している共通属性{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} and {{htmlattrxref("size", "input")}}
IDL 属性{{htmlattrxref("list", "input")}}, value
メソッド{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}
{{anch("Value", "値")}} + テキスト入力欄に含まれる文字列を表す {{domxref("DOMString")}}。 +
イベント + {{domxref("HTMLElement/change_event", "change")}} および + {{domxref("HTMLElement/input_event", "input")}} +
対応している共通属性 + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("maxlength", "input")}}, + {{htmlattrxref("minlength", "input")}}, + {{htmlattrxref("pattern", "input")}}, + {{htmlattrxref("placeholder", "input")}}, + {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("required", "input")}}, + {{htmlattrxref("size", "input")}} +
IDL 属性{{htmlattrxref("list", "input")}}, value
メソッド + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, + {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} +
-

値

- -

{{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement")}} の value プロパティを使ってこれを受け取ることができます。

- -
let theText = myTextInput.value;
-
- -

入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は空文字列 ("") にすることができます。

- -

追加の属性

- -

型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 text 型の入力欄は次の属性にも対応しています。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性説明
{{anch("list")}}任意の定義済みの自動補完オプションを含む<datalist> 要素の id
{{anch("maxlength")}}入力欄が受け付ける最大文字数
{{anch("minlength")}}入力欄が取りうる、妥当と判断される最小文字列長
{{anch("pattern")}}妥当と判断されるために、入力欄の内容が一致する必要がある正規表現
{{anch("placeholder")}}空欄の時に入力欄に表示される入力例の値
{{anch("readonly")}}入力欄の内容を読み取り専用にするかどうかを示す論理属性
{{anch("size")}}入力欄の長さを何文字分にするかを表す数値
{{anch("spellcheck")}}入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する
+## 値 -

list

+ {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement")}} の `value` プロパティを使ってこれを受け取ることができます。 -

list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。

+```js +let theText = myTextInput.value; +``` -

maxlength

+入力欄に検証の制約がない場合 (詳しくは{{anch("検証")}}を参照)、値は空文字列 ("") にすることができます。 -

ユーザーが text 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 maxlength が指定されていないか、無効な値が指定されていると、 text 入力欄には最大文字数が設定されません。この値は minlength の値以上である必要もあります。

+## 追加の属性 -

フィールドのテキスト値の長さが UTF-16 コード単位で maxlength の長さを超えていると、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

+型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 `text` 型の入力欄は次の属性にも対応しています。 -

minlength

+### list -

ユーザーが text 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 maxlength で指定された値以下である必要があります。 minlength が指定されていないか、無効な値が指定されていると、 text 入力欄には最小文字数が設定されません。

+list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。 -

入力欄のテキスト値の長さが UTF-16 コード単位で minlength の長さよりも短いと、その入力欄は制約検証に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。

+### maxlength -

pattern

+ユーザーが `text` 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 `maxlength` が指定されていないか、無効な値が指定されていると、 `text` 入力欄には最大文字数が設定されません。この値は `minlength` の値以上である必要もあります。 -
-

pattern 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が制約検証に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは正規表現のガイドで記述されています。正規表現がコンパイルされるときに 'u' フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。

+フィールドのテキスト値の長さが UTF-16 コード単位で `maxlength` の長さを超えていると、その入力欄は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。 -

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

+### minlength -
-

Tip: {{htmlattrxref("title", "input")}} 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。

-
-
+ユーザーが `text` 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 `maxlength` で指定された値以下である必要があります。 `minlength` が指定されていないか、無効な値が指定されていると、 `text` 入力欄には最小文字数が設定されません。 -

詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。

+入力欄のテキスト値の長さが UTF-16 コード単位で `minlength` の長さよりも短いと、その入力欄は[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。 -

placeholder

+### pattern -

placeholder 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることはできません。

+`pattern` 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が[制約検証](/ja/docs/Web/Guide/HTML/Constraint_validation)に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは[正規表現のガイド](/ja/docs/Web/JavaScript/Guide/Regular_Expressions)で記述されています。正規表現がコンパイルされるときに `'u'` フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。 -

コントロールの内容が単一の書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。これらの文字については、{{SectionOnPage("/ja/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Unicode 制御文字を使用した書字方向の上書き")}}を参照してください。

+指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。 -
-

注: 可能であれば placeholder を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels and placeholders", "ラベルとプレイスホルダー")}}を参照してください。

-
+> **Note:** {{htmlattrxref("title", "input")}} 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。 -

readonly

+詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。 -

論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 value は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の value プロパティを設定することで変更することができます。

+### placeholder -
-

注: 読み取り専用フィールドは値を持てないため、 required は readonly 属性も指定されている入力欄には効果がありません。

-
+`placeholder` 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることはできません。 -

size

+コントロールの内容がある書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。詳しくは、[双方向テキストでの Unicode コードの使い方（英語）](https://www.w3.org/International/questions/qa-bidi-unicode-controls)を参照してください。 -

size 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の {{cssxref("font")}} 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。

+> **Note:** 可能であれば `placeholder` を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、[\: 入力欄 (フォーム入力) 要素](/ja/docs/Web/HTML/Element/input)の[プレイスホルダーはアクセシブルではない](/ja/docs/Web/HTML/Element/input#プレイスホルダーはアクセシブルではない)を参照してください。 -

これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 {{anch("maxlength")}} 属性を使用してください。

+### readonly -

spellcheck

+論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 `value` は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の `value` プロパティを設定することで変更することができます。 -

spellcheck はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは spellcheck 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 spellcheck で利用できる値は次の通りです。

+> **Note:** 読み取り専用フィールドは値を持てないため、 `required` は `readonly` 属性も指定されている入力欄には効果がありません。 -
-
false
-
この要素でスペルチェックを無効にします。
-
true
-
この要素でスペルチェックを有効にします。
-
"" (空文字列) または値なし
-
スペルチェックについて、要素の既定の動作に従います。これは親の spellcheck 設定や、その他の要因に基づくことがあります。
-
+### size -

入力欄では、 {{anch("readonly")}} 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。

+`size` 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は 20 です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント（使用中の {{cssxref("font")}} 設定）によって、指定された文字数より狭くなったり広くなったりすることがあります。 -

spellcheck を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。

+これはユーザーがフィールドに入力することができる文字数の制限を設定するものではありません。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 `{{anch("maxlength")}}` 属性を使用してください。 -

標準外の属性

+### spellcheck -

ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。

+`spellcheck` はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは `spellcheck` 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 `spellcheck` で利用できる値は次の通りです。 - - - - - - - - - - - - - - - - - -
属性説明
{{anch("autocorrect")}}オートコレクトを行うかどうかを on または off で示します。 Safari のみ。
{{anch("mozactionhint")}}入力欄を編集している間、ユーザーが Enter または Return キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 Android 版 Firefox for のみ。
+- `false` + - : この要素でスペルチェックを無効にします。 +- `true` + - : この要素でスペルチェックを有効にします。 +- "" (空文字列) または値なし + - : スペルチェックについて、要素の既定の動作に従います。これは親の `spellcheck` 設定や、その他の要因に基づくことがあります。 + +入力欄では、 {{anch("readonly")}} 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。 + +`spellcheck` を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。 + +## 標準外の属性 -

autocorrect {{non-standard_inline}}

+ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。 -
-

Safari 拡張である autocorrect 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。

+### autocorrect -
-
on
-
構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。
-
off
-
自動修正やテキストの置き換えを無効にします。
-
-
+Safari 拡張である `autocorrect` 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。 -

mozactionhint {{non-standard_inline}}

+- `on` + - : 構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。 +- `off` + - : 自動修正やテキストの置き換えを無効にします。 -
-

Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に Enter キーや Return キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの Enter キーにどのようなラベルを使用するかを決定するために使用されます。

+### mozactionhint -
-

注: これはグローバル属性 {{htmlattrxref("enterkeyhint")}} として標準化されていますが、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 {{bug(1490661)}} を参照してください。

-
+Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に Enter キーや Return キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの Enter キーにどのようなラベルを使用するかを決定するために使用されます。 -

許可されている値は go, done, next, search, send です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。

-
+> **Note:** これはグローバル属性 {{htmlattrxref("enterkeyhint")}} として[標準化されています](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute)が、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 {{bug(1490661)}} を参照してください。 -

テキスト入力欄の使用

+許可されている値は `go`, `done`, `next`, `search`, `send` です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。 -

text 型の <input> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、日付、 URL、メールアドレス、検索語など、もっと良い選択肢が利用できるもの) に使用します。

+## テキスト入力欄の使用 -

基本的な例

+`text` 型の `` 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、[日付](/ja/docs/Web/HTML/Element/input/datetime-local)、 [URL](/ja/docs/Web/HTML/Element/input/url)、[メールアドレス](/ja/docs/Web/HTML/Element/input/email)、[検索語](/ja/docs/Web/HTML/Element/input/search)など、もっと良い選択肢が利用できるもの) に使用します。 -
<form>
-  <div>
-    <label for="uname">Choose a username: </label>
-    <input type="text" id="uname" name="name">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+### 基本的な例 -

これは次のように表示されます。

+```html +
+
+ + +
+
+ +
+
+``` -

{{EmbedLiveSample("Basic_example", 600, 50)}}

+これは次のように表示されます。 -

送信されると、サーバーに送信される名前と値の組のデータは name=Chris になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。

+{{EmbedLiveSample("Basic_example", 600, 50)}} -

プレイスホルダーの設定

+送信されると、サーバーに送信される名前と値の組のデータは `name=Chris` になります（送信前に入力値として "Chris" が入力された場合）。 {{htmlattrxref("name", "input")}} 属性を {{HTMLElement("input")}} 要素に付け忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。 -

{{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。

+### プレイスホルダーの設定 -
<form>
-  <div>
-    <label for="uname">Choose a username: </label>
-    <input type="text" id="uname"
-           placeholder="Lower case, all one word">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+{{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。 -

プレイスホルダーがどう表示されるかを以下で確認できます。

+```html +
+
+ + +
+
+ +
+
+``` -

{{EmbedLiveSample("Setting_placeholders", 600, 50)}}

+プレイスホルダーがどう表示されるかを以下で確認できます。 -

プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 value 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。

+{{EmbedLiveSample("Setting_placeholders", 600, 50)}} -

物理的な入力要素の寸法

+プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると（または、 `value` 属性に設定することで、プログラム的に値を設定する場合も）自動的に消滅します。 -

入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。

+### 物理的な入力要素の寸法 -
<form>
-  <div>
-    <label for="uname">Choose a username: </label>
-    <input type="text" id="uname" name="name"
-           placeholder="Lower case, all one word"
-           size="30">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。 -

{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}

+```html +
+
+ + +
+
+ +
+
+``` -

検証

+{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }} -

text 型の <input> 要素は、適用される自動的な検証はありませんが (基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです)、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。

+## 検証 -
-

注: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用にはなりません。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。

-
+`text` 型の `` 要素には、適用される自動的な検証はありませんが（基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです）、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。 -

スタイルにおけるメモ

+> **Note:** HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には*なりません*。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ（または大きすぎるデータ、間違った種類のデータなど）がデータベースに入力された場合に災害が発生するおそれがあります。 -

ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。

+### スタイル付けのメモ -
div {
+ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。
+
+```css
+div {
   margin-bottom: 10px;
   position: relative;
 }
@@ -312,89 +258,126 @@ input:valid+span:after {
   position: absolute;
   content: '✓';
   padding-left: 5px;
-}
+} +``` -

このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。

+このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。 -

入力を必須にする

+### 入力を必須にする -

入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。

+入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。 -
<form>
-  <div>
-    <label for="uname">Choose a username: </label>
-    <input type="text" id="uname" name="name" required>
-    <span class="validity"></span>
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+```html +
+
+ + + +
+
+ +
+
+``` - +```css hidden +div { + margin-bottom: 10px; + position: relative; +} +input + span { + padding-right: 30px; +} +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +} +``` -

次のように表示されます。

+次のように表示されます。 -

{{ EmbedLiveSample('Making_input_required', 600, 70) }}

+{{ EmbedLiveSample('Making_input_required', 600, 70) }} -

検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。

+検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。 -

入力値の長さ

+### 入力値の長さ -

{{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。

+ {{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。 -

以下の例では、入力値が4～8文字の長さであることが求められます。

+以下の例では、入力値が4～8文字の長さであることが求められます。 -
<form>
-  <div>
-    <label for="uname">Choose a username: </label>
-    <input type="text" id="uname" name="name" required size="10"
-           placeholder="Username"
-           minlength="4" maxlength="8">
-    <span class="validity"></span>
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+```html +
+
+ + + +
+
+ +
+
+``` - +```css hidden +div { + margin-bottom: 10px; + position: relative; +} +input + span { + padding-right: 30px; +} +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +} +``` -

以下のように表示されます。

+以下のように表示されます。 -

{{ EmbedLiveSample('Input_value_length', 600, 70) }}

+{{ EmbedLiveSample('Input_value_length', 600, 70) }} -

4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。 8 文字を超えて入力しようとしても、ブラウザーが許しません。

+4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます（ブラウザーによって異なります）。 8 文字を超えて入力しようとしても、ブラウザーが許しません。 -
-

メモ: minlength を指定して required を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。

-
+> **Note:** `minlength` を指定して `required` を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。 -

パターンの指定

+### パターンの指定 -

{{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは正規表現による検証をご覧ください)。

+ {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます（入力値を検証するために正規表現を使うための短期コースは[正規表現による検証](/ja/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression)をご覧ください）。 -

以下の例では、4～8文字の値で、英小文字のみが含まれているという要件の制約を与えます。

+以下の例では、 4～8 文字の値で、英小文字のみが含まれているという要件の制約を与えます。 -
<form>
-  <div>
-    <label for="uname">Choose a username: </label>
-    <input type="text" id="uname"
-           pattern="[a-z]{4,8}">
-    <span class="validity"></span>
-    <p>Usernames must be lowercase and 4-8 characters in length.</p>
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
+```html +
+
+ + + +

ユーザー名は小文字で 4～8 文字でなければなりません。

+
+
+ +
+
+``` - +} +``` -

次のように表示されます。

+次のように表示されます。 -

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

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

例

+## 例 -

最初の HTML フォームおよび HTML フォームの構成方法の記事の文脈で、良いテキスト入力欄の例を見ることができます。

+ [最初の HTML フォーム](/ja/docs/Learn/Forms/Your_first_form)および [HTML フォームの構成方法](/ja/docs/Learn/Forms/How_to_structure_a_web_form)の記事の文脈で、良いテキスト入力欄の例を見ることができます。 -

仕様書

+## 仕様書 -

{{Specifications}}

+{{Specifications}} -

ブラウザーの互換性

+## ブラウザーの互換性 -

{{Compat}}

+{{Compat}} -

関連情報

+## 関連情報 - +- [HTML フォーム](/ja/docs/Learn/Forms) +- {{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス +- [``](/ja/docs/Web/HTML/Element/input/search) +- {{HTMLElement("textarea")}}: 複数行のテキスト入力欄 +- [CSS プロパティの互換性](/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls) -- cgit v1.2.3-54-g00ecf