diff options
Diffstat (limited to 'files/ja/web/html/element/input/text/index.md')
| -rw-r--r-- | files/ja/web/html/element/input/text/index.md | 448 |
1 files changed, 448 insertions, 0 deletions
diff --git a/files/ja/web/html/element/input/text/index.md b/files/ja/web/html/element/input/text/index.md new file mode 100644 index 0000000000..50d1029a08 --- /dev/null +++ b/files/ja/web/html/element/input/text/index.md @@ -0,0 +1,448 @@ +--- +title: <input type="text"> +slug: Web/HTML/Element/input/text +tags: + - Form input + - Forms + - HTML + - HTML forms + - Input + - Input Type + - Reference + - Text + - text entry + - text input +browser-compat: html.elements.input.input-text +translation_of: Web/HTML/Element/input/text +--- +<div>{{HTMLRef("Input_types")}}</div> + +<p><span class="seoSummary">{{HTMLElement("input")}} 要素の <code><strong>text</strong></code> 型は、基本的な単一行のテキスト入力欄を生成します。</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Value", "値")}}</strong></td> + <td>テキスト入力欄に含まれる文字列を表す {{domxref("DOMString")}}。</td> + </tr> + <tr> + <td><strong>イベント</strong></td> + <td>{{event("change")}} および {{event("input")}}</td> + </tr> + <tr> + <td><strong>対応している共通属性</strong></td> + <td>{{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")}}</td> + </tr> + <tr> + <td><strong>IDL 属性</strong></td> + <td>{{htmlattrxref("list", "input")}}, <code>value</code></td> + </tr> + <tr> + <td><strong>メソッド</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Value">値</h2> + +<p> {{htmlattrxref("value", "input")}} 属性は、テキスト入力欄に入力された現在のテキストの値が入っている {{domxref("DOMString")}} です。 JavaScript では {{domxref("HTMLInputElement")}} の <code>value</code> プロパティを使ってこれを受け取ることができます。</p> + +<pre class="brush: js">let theText = myTextInput.value; +</pre> + +<p>入力欄に検証の制約がない場合 (詳しくは{{anch("Validation", "検証")}}を参照)、値は空文字列 ("") にすることができます。</p> + +<h2 id="Additional_attributes">追加の属性</h2> + +<p>型に関係なくすべての {{HTMLElement("input")}} 要素を操作する属性に加え、 <code>text</code> 型の入力欄は次の属性にも対応しています。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("list")}}</code></td> + <td>任意の定義済みの自動補完オプションを含む<datalist> 要素の id</td> + </tr> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>入力欄が受け付ける最大文字数</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>入力欄が取りうる、妥当と判断される最小文字列長</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>妥当と判断されるために、入力欄の内容が一致する必要がある正規表現</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>空欄の時に入力欄に表示される入力例の値</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>入力欄の内容を読み取り専用にするかどうかを示す論理属性</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>入力欄の長さを何文字分にするかを表す数値</td> + </tr> + <tr> + <td><code>{{anch("spellcheck")}}</code></td> + <td>入力欄でスペルチェックを有効にするかどうか、既定のスペルチェック構成を利用するかを制御する</td> + </tr> + </tbody> +</table> + +<h3 id="attr-list"><code id="list">list</code></h3> + +<p>list 属性の値は、同じ文書内にある {{HTMLElement("datalist")}} 要素の {{domxref("Element.id", "id")}} です。 {{HTMLElement("datalist")}} は、この入力欄でユーザーに提案するための事前定義された値のリストを提供します。リストの中の値のうち {{htmlattrxref("type", "input")}} と互換性のないものは、提案されるオプションには含まれません。提供される値は提案であり、要件ではありません。ユーザーはこの定義済みリストから選択することも、異なる値を提供することもできます。</p> + +<h3 id="attr-maxlength"><code id="maxlength">maxlength</code></h3> + +<p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最大文字数です。 0 以上の整数値である必要があります。 <code>maxlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最大文字数が設定されません。この値は <code>minlength</code> の値以上である必要もあります。</p> + +<p>フィールドのテキスト値の長さが UTF-16 コード単位で <code>maxlength</code> の長さを超えていると、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="attr-minlength"><code id="minlength">minlength</code></h3> + +<p>ユーザーが <code>text</code> 入力欄に入力することができる (UTF-16 コード単位での) 最小文字数です。これは非負の整数値で、 <code>maxlength</code> で指定された値以下である必要があります。 <code>minlength</code> が指定されていないか、無効な値が指定されていると、 <code>text</code> 入力欄には最小文字数が設定されません。</p> + +<p>入力欄のテキスト値の長さが UTF-16 コード単位で <code>minlength</code> の長さよりも短いと、その入力欄は<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に失敗します。制約検証はユーザーが値を変更した場合にのみ適用されます。</p> + +<h3 id="attr-pattern"><code id="pattern">pattern</code></h3> + +<div id="pattern-include"> +<p><code>pattern</code> 属性は、指定する場合は正規表現であり、入力欄の {{htmlattrxref("value")}} が<a href="/ja/docs/Web/Guide/HTML/Constraint_validation">制約検証</a>に合格するためにはこれと一致しなければなりません。これは {{jsxref("RegExp")}} 型で使用される JavaScript の妥当な正規表現である必要があり、これは<a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現のガイド</a>で記述されています。正規表現がコンパイルされるときに <code>'u'</code> フラグが指定されるので、パターンは ASCII ではなく Unicode コードポイントの並びとして扱われます。パターンのテキストをスラッシュで囲んではいけません。</p> + +<p>指定されたパターンがないかか無効である場合は、正規表現は適用されず、この属性は完全に無視されます。</p> + +<div class="note"> +<p><strong>Tip:</strong> {{htmlattrxref("title", "input")}} 属性を使用してテキストを指定すると、多くのブラウザーでパターンに一致する要件が何であるかを説明するツールチップを表示することができます。近くに他の説明テキストを配置する必要があります。</p> +</div> +</div> + +<p>詳細や例については{{anch("Specifying a pattern", "パターンの指定")}}を参照してください。</p> + +<h3 id="attr-placeholder"><code id="placeholder">placeholder</code></h3> + +<p><code>placeholder</code> 属性は文字列で、その欄にどのような種類の情報が求められるかについてのユーザーに対する短いヒントを提供します。これは求められるデータの種類を紹介する一語または短い句であり、説明的なメッセージではありません。テキストには改行を含めることは<em>できません</em>。</p> + +<p>コントロールの内容が単一の書字方向 ({{Glossary("LTR")}} または {{Glossary("RTL")}}) であるものの、プレイスホルダーを逆の方向に表示する必要がある場合、 Unicode 双方向アルゴリズム書式文字を使用してプレイスホルダーの中で書字方向を上書きすることができます。これらの文字については、{{SectionOnPage("/ja/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Unicode 制御文字を使用した書字方向の上書き")}}を参照してください。</p> + +<div class="note"> +<p><strong>注:</strong> 可能であれば <code>placeholder</code> を使用することは避けてください。フォームを説明する他の方法ほど意味論的に有益ではなく、コンテンツに予期しない技術的な問題を引き起こす可能性があります。詳しくは、{{SectionOnPage("/ja/docs/Web/HTML/Element/input", "Labels and placeholders", "ラベルとプレイスホルダー")}}を参照してください。</p> +</div> + +<h3 id="attr-readonly"><code id="readonly">readonly</code></h3> + +<p>論理属性で、存在すれば、ユーザーが編集することができないことを表します。しかし、 <code>value</code> は、 JavaScript コードから直接 {{domxref("HTMLInputElement")}} の <code>value</code> プロパティを設定することで変更することができます。</p> + +<div class="note"> +<p><strong>注:</strong> 読み取り専用フィールドは値を持てないため、 <code>required</code> は <code>readonly</code> 属性も指定されている入力欄には効果がありません。</p> +</div> + +<h3 id="attr-size"><code id="size">size</code></h3> + +<p><code>size</code> 属性は数値であり、入力欄の幅を何文字分とするかを示します。値はゼロより大きな数値である必要があり、既定値は20です。文字の幅は様々であるため、これは正確ではない可能性もあり、依存することはできません。結果の入力欄は文字数やフォント (使用中の {{cssxref("font")}} 設定) によって、指定された文字数より狭くなったり広くなったりすることがあります。</p> + +<p>これはユーザーがフィールドに入力することができる文字数の制限を設定するものでは<em>ありません</em>。これは一度に見える文字数をおよそ指定するだけです。入力データの長さの上限を設定するには、 <code>{{anch("maxlength")}}</code> 属性を使用してください。</p> + +<h3 id="attr-spellcheck"><code id="spellcheck">spellcheck</code></h3> + +<p><code>spellcheck</code> はグローバル属性で、要素でスペルチェックを有効にするかどうかを示します。内容が編集可能なものすべてに使用することができますが、ここでは <code>spellcheck</code> 属性の {{HTMLElement("input")}} 要素の使用に関して特に考えます。 <code>spellcheck</code> で利用できる値は次の通りです。</p> + +<dl> + <dt><code>false</code></dt> + <dd>この要素でスペルチェックを無効にします。</dd> + <dt><code>true</code></dt> + <dd>この要素でスペルチェックを有効にします。</dd> + <dt>"" (空文字列) または値なし</dt> + <dd>スペルチェックについて、要素の既定の動作に従います。これは親の <code>spellcheck</code> 設定や、その他の要因に基づくことがあります。</dd> +</dl> + +<p>入力欄では、 {{anch("readonly")}} 属性が設定されておらず、かつ無効になっていない場合にスペルチェックを有効にすることができます。</p> + +<p><code>spellcheck</code> を読み取ることで返される値は、{{Glossary("user agent", "ユーザーエージェント")}}の設定によって上書きされる場合、コントロール内のスペルチェックの実際の状態を反映しない可能性があります。</p> + +<h2 id="Non-standard_attributes">標準外の属性</h2> + +<p>ブラウザーによっては、以下の標準外の属性が利用できます。一般的な規則として、できれば使用することを避けてください。</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>オートコレクトを行うかどうかを <code>on</code> または <code>off</code> で示します。 <strong>Safari のみ。</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>入力欄を編集している間、ユーザーが <kbd>Enter</kbd> または <kbd>Return</kbd> キーを押したときに実行されるアクションを示す文字列です。これは仮想キーボードのキーに適切なラベルを特定するために使用します。 <strong>Android 版 Firefox for のみ。</strong></td> + </tr> + </tbody> +</table> + +<h3 id="attr-autocorrect"><code id="autocorrect">autocorrect</code> {{non-standard_inline}}</h3> + +<div id="autocorrect-include"> +<p>Safari 拡張である <code>autocorrect</code> 属性は文字列で、ユーザーがこの欄を編集している間に自動修正を有効にするかどうかを示します。次の値が許されています。</p> + +<dl> + <dt><code>on</code></dt> + <dd>構成されていれば、打ち間違いの自動修正や、テキストの置き換え処理を有効にします。</dd> + <dt><code>off</code></dt> + <dd>自動修正やテキストの置き換えを無効にします。</dd> +</dl> +</div> + +<h3 id="attr-mozactionhint"><code id="mozactionhint">mozactionhint</code> {{non-standard_inline}}</h3> + +<div id="mozactionhint-include"> +<p>Mozilla 拡張で Android 版 Firefox で対応しており、ユーザーがフィールドを編集中に <kbd>Enter</kbd> キーや <kbd>Return</kbd> キーを押した場合に行われるアクションの種類のヒントを提供します。この情報は仮想キーボードの <kbd>Enter</kbd> キーにどのようなラベルを使用するかを決定するために使用されます。</p> + +<div class="note"> +<p><strong>注:</strong> これはグローバル属性 {{htmlattrxref("enterkeyhint")}} として<a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">標準化されています</a>が、まだ広くは実装されていません。 Firefox の実装状態の変遷を確認するには、 {{bug(1490661)}} を参照してください。</p> +</div> + +<p>許可されている値は <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code>, <code>send</code> です。ブラウザーはこのヒントを使用して、 Enter キーにどのラベルを置くかを決定します。</p> +</div> + +<h2 id="Using_text_inputs">テキスト入力欄の使用</h2> + +<p><code>text</code> 型の <code><input></code> 要素は、基本的な単一行の入力欄を作成します。どこでも、ユーザーに単一行の値を入力させたい場所で、もっと具体的な入力型が値の中にない場合 (例えば、<a href="/ja/docs/Web/HTML/Element/input/datetime-local">日付</a>、 <a href="/ja/docs/Web/HTML/Element/input/url">URL</a>、<a href="/ja/docs/Web/HTML/Element/input/email">メールアドレス</a>、<a href="/ja/docs/Web/HTML/Element/input/search">検索語</a>など、もっと良い選択肢が利用できるもの) に使用します。</p> + +<h3 id="Basic_example">基本的な例</h3> + +<pre class="brush: html"><form> + <div> + <label for="uname">Choose a username: </label> + <input type="text" id="uname" name="name"> + </div> + <div> + <button>Submit</button> + </div> +</form></pre> + +<p>これは次のように表示されます。</p> + +<p>{{EmbedLiveSample("Basic_example", 600, 50)}}</p> + +<p>送信されると、サーバーに送信される名前と値の組のデータは <code>name=Chris</code> になります (送信前に入力値として "Chris" が入力された場合)。 {{HTMLElement("input")}} 要素に {{htmlattrxref("name", "input")}} 属性を入れ忘れてはいけません。さもないと、テキスト入力欄の値が送信されるデータに含まれなくなります。</p> + +<h3 id="Setting_placeholders">プレイスホルダーの設定</h3> + +<p> {{htmlattrxref("placeholder","input")}} 属性を使用して、テキスト入力欄の内部に有用なプレイスホルダーを提供することで、何を入力すればよいかのヒントを提供することができます。次の例を見てください。</p> + +<pre class="brush: html"><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></pre> + +<p>プレイスホルダーがどう表示されるかを以下で確認できます。</p> + +<p>{{EmbedLiveSample("Setting_placeholders", 600, 50)}}</p> + +<p>プレイスホルダーはふつう、要素の前景色よりも薄い色で表示され、ユーザーが入力欄にテキストを入力し始めると (または、 <code>value</code> 属性に設定することで、プログラム的に値を設定する場合も) 自動的に消滅します。</p> + +<h3 id="Physical_input_element_size">物理的な入力要素の寸法</h3> + +<p>入力ボックスの物理的な寸法は、 {{htmlattrxref("size", "input")}} 属性を使って制御することができます。これによって、テキスト入力欄が一度に表示できる文字数を指定することができます。これは要素の幅に影響し、幅をピクセル数ではなく文字数で指定することができます。例えば、この例の中では、入力欄は30文字の幅です。</p> + +<pre class="brush: html"><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></pre> + +<p>{{ EmbedLiveSample('Physical_input_element_size', 600, 50) }}</p> + +<h2 id="Validation">検証</h2> + +<p><code>text</code> 型の <code><input></code> 要素は、適用される自動的な検証はありませんが (基本的なテキスト入力欄は、自由な文字列を受け付けることが求められるからです)、以下に解説するように、クライアント側の検証のオプションがいくつか利用できます。</p> + +<div class="note"> +<p><strong>注</strong>: HTML のフォーム検証は、入力されたデータが正しい形式であることを保証するサーバースクリプトの代用には<em>なりません</em>。 HTML を調整して検証をくぐり抜けたり、完全に削除したりすることはとても簡単にできます。 HTML を完全にバイパスし、サーバーに直接データを送信することも可能です。サーバー側のコードが受信したデータの検証に失敗した場合、不適切な形式のデータ (または大きすぎるデータ、間違った種類のデータなど) がデータベースに入力された場合に災害が発生するおそれがあります。</p> +</div> + +<h3 id="A_note_on_styling">スタイルにおけるメモ</h3> + +<p>ユーザーにとって値が妥当かそうでないかが分かりやすくなるように、フォーム要素のスタイル付けに便利な擬似クラスが利用できます。 {{cssxref(":valid")}} および {{cssxref(":invalid")}} です。この節では、以下の CSS を使用して入力欄の値が妥当であれば隣にチェックマークを表示し、妥当な値でなければ隣にバツ (X) マークを表示します。</p> + +<pre class="brush: css">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; +}</pre> + +<p>このテクニックにはフォーム要素の後に配置される {{htmlelement("span")}} 要素も必要で、これがアイコンのホルダーとして動作します。ブラウザーによっては一部の入力型で、直後に配置されたアイコンをうまく表示できないことがあるのでこれが必要です。</p> + +<h3 id="Making_input_required">入力を必須にする</h3> + +<p>入力を行わないとフォームの送信が許可されないようにするための簡単な方法として、 {{htmlattrxref("required","input")}} 属性を使うことができます。</p> + +<pre class="brush: html"><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></pre> + +<div class="hidden"> +<pre class="brush: css">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; }</pre> +</div> + +<p>次のように表示されます。</p> + +<p>{{ EmbedLiveSample('Making_input_required', 600, 70) }}</p> + +<p>検索用語を入力せずにフォームを送信しようとした場合、ブラウザーはエラーメッセージを表示します。</p> + +<h3 id="Input_value_length">入力値の長さ</h3> + +<p> {{htmlattrxref("minlength", "input")}} 属性を使用して入力された値の最小の長さ (文字数) を指定することができます。同様に、 {{htmlattrxref("maxlength", "input")}} を使用して入力された値の最大長を文字数で設定します。</p> + +<p>以下の例では、入力値が4～8文字の長さであることが求められます。</p> + +<pre class="brush: html"><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></pre> + +<div class="hidden"> +<pre class="brush: css">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; }</pre> +</div> + +<p>以下のように表示されます。</p> + +<p>{{ EmbedLiveSample('Input_value_length', 600, 70) }}</p> + +<p>4 文字未満でフォームを送信しようとすると、適切なエラーメッセージが表示されます (ブラウザーによって異なります)。 8 文字を超えて入力しようとしても、ブラウザーが許しません。</p> + +<div class="note"> +<p><strong>メモ:</strong> <code>minlength</code> を指定して <code>required</code> を指定しないと、ユーザーが値を指定する必要がなくなるので、入力は妥当と判断されます。</p> +</div> + +<h3 id="Specifying_a_pattern">パターンの指定</h3> + +<p> {{htmlattrxref("pattern","input")}} 属性を使用して、入力値が妥当と判断されるために一致しなければならない正規表現を指定することができます (入力値を検証するために正規表現を使うための短期コースは<a href="/ja/docs/Learn/Forms/Form_validation#validating_against_a_regular_expression">正規表現による検証</a>をご覧ください)。</p> + +<p>以下の例では、4～8文字の値で、英小文字のみが含まれているという要件の制約を与えます。</p> + +<pre class="brush: html"><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></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +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; +}</pre> +</div> + +<p>次のように表示されます。</p> + +<p>{{ EmbedLiveSample('Specifying_a_pattern', 600, 110) }}</p> + +<h2 id="Examples">例</h2> + +<p> <a href="/ja/docs/Learn/Forms/Your_first_form">最初の HTML フォーム</a>および <a href="/ja/docs/Learn/Forms/How_to_structure_a_web_form">HTML フォームの構成方法</a>の記事の文脈で、良いテキスト入力欄の例を見ることができます。</p> + +<h2 id="Specifications">仕様書</h2> + +<p>{{Specifications}}</p> + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Learn/Forms">HTML フォーム</a></li> + <li>{{HTMLElement("input")}} およびそれに基づく {{domxref("HTMLInputElement")}} インターフェイス</li> + <li><code><a href="/ja/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> + <li>{{HTMLElement("textarea")}}: 複数行のテキスト入力欄</li> + <li><a href="/ja/docs/Learn/Forms/Property_compatibility_table_for_form_controls">CSS プロパティの互換性</a></li> +</ul> |