From eb01d7c89c69ac0b49110d31eec8648fb5fd4805 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 27 Aug 2021 20:33:16 +0900 Subject: Web/HTML/Element/input/text を更新 (#2083) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 2021/06/01 時点の英語版に同期 --- files/ja/web/html/element/input/text/index.html | 127 ++++++++++-------------- 1 file changed, 53 insertions(+), 74 deletions(-) diff --git a/files/ja/web/html/element/input/text/index.html b/files/ja/web/html/element/input/text/index.html index 80763b2040..50d1029a08 100644 --- a/files/ja/web/html/element/input/text/index.html +++ b/files/ja/web/html/element/input/text/index.html @@ -12,6 +12,7 @@ tags: - Text - text entry - text input +browser-compat: html.elements.input.input-text translation_of: Web/HTML/Element/input/text ---
{{HTMLRef("Input_types")}}
@@ -20,8 +21,6 @@ translation_of: Web/HTML/Element/input/text
{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}
- - @@ -47,16 +46,16 @@ translation_of: Web/HTML/Element/input/text
-

値

+

値

-

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

+

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

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

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

 
-
追加の属性

+
追加の属性

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

 
@@ -103,26 +102,26 @@ translation_of: Web/HTML/Element/input/text
  
 
 
-
{{htmlattrdef("list")}}

+
list

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

 
-
{{htmlattrdef("maxlength")}}

+
maxlength

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

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

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

 
-
{{htmlattrdef("minlength")}}

+
minlength

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

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

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

 
-
{{htmlattrdef("pattern")}}

+
pattern

 
 

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

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

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

 
@@ -133,7 +132,7 @@ translation_of: Web/HTML/Element/input/text
 
 
詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。

 
-
{{htmlattrdef("placeholder")}}

+
placeholder

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

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

 

 
-
{{htmlattrdef("readonly")}}

+
readonly

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

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

 
 

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

 

 
-
{{htmlattrdef("size")}}

+
size

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

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

 
-
{{htmlattrdef("spellcheck")}}

+
spellcheck

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

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

 
-
標準外の属性

+
標準外の属性

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

 
@@ -197,7 +196,7 @@ translation_of: Web/HTML/Element/input/text
  
 
 
-
{{htmlattrdef("autocorrect")}} {{non-standard_inline}}

+
autocorrect {{non-standard_inline}}

 
 

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

@@ -210,7 +209,7 @@ translation_of: Web/HTML/Element/input/text
 
 

 
-
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}

+
mozactionhint {{non-standard_inline}}

 
 

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

@@ -222,13 +221,13 @@ translation_of: Web/HTML/Element/input/text
 
許可されている値は go, done, next, search, send です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。

 

 
-
テキスト入力欄の使用

+
テキスト入力欄の使用

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

 
-
基本的な例

+
基本的な例

 
-
<form>
+
<form>
   <div>
     <label for="uname">Choose a username: </label>
     <input type="text" id="uname" name="name">
@@ -242,16 +241,16 @@ translation_of: Web/HTML/Element/input/text
 
 
{{EmbedLiveSample("Basic_example", 600, 50)}}

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

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

 
-
プレイスホルダーの設定

+
プレイスホルダーの設定

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

 
-
<form>
+
<form>
   <div>
     <label for="uname">Choose a username: </label>
-    <input type="text" id="uname" name="name"
+    <input type="text" id="uname"
            placeholder="Lower case, all one word">
   </div>
   <div>
@@ -265,11 +264,11 @@ translation_of: Web/HTML/Element/input/text
 
 
プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 value 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。

 
-
物理的な入力要素の寸法

+
物理的な入力要素の寸法

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

 
-
<form>
+
<form>
   <div>
     <label for="uname">Choose a username: </label>
     <input type="text" id="uname" name="name"
@@ -283,7 +282,7 @@ translation_of: Web/HTML/Element/input/text
 
 
{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}

 
-
検証

+
検証

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

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

 
 
-
スタイルにおけるメモ

+
スタイルにおけるメモ

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

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

 
-
入力を必須にする

+
入力を必須にする

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

 
-
<form>
+
<form>
   <div>
     <label for="uname">Choose a username: </label>
     <input type="text" id="uname" name="name" required>
@@ -333,7 +332,7 @@ input:valid+span:after {
 </form>

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

@@ -342,13 +341,13 @@ input:valid+span:after {
 
 
検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。

 
-
入力値の長さ

+
入力値の長さ

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

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

 
-
<form>
+
<form>
   <div>
     <label for="uname">Choose a username: </label>
     <input type="text" id="uname" name="name" required size="10"
@@ -362,29 +361,29 @@ input:valid+span:after {
 </form>

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

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

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

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

 
 

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

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

 

 
-
パターンの指定

+
パターンの指定

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

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

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

 
-
<form>
+
<form>
   <div>
     <label for="uname">Choose a username: </label>
-    <input type="text" id="uname" name="name" required size="45"
+    <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>
@@ -395,7 +394,7 @@ input:valid+span:after {
 </form>