HTML textareaタグは、1つのフォームに複数行のテキスト入力フィールドを作成するために使用されます。 </code>で定義され、無制限の文字数を含めることができます。</ em> </p> <p> HTMLフォームを作成するときに、受け入れるかどうかを決めることができます。テキストの長い文字列。たとえば、小売業者のWebサイトの顧客連絡フォームを作成する場合、顧客が直面している問題の詳細な説明を受け入れるフォーム要素を作成できます。</p><p>ここにHTMLの<コード>があります。 <textarea></code>が入ります。<code><textarea></code>要素は、テキストの複数行を編集する機能を提供するシェイプ要素を作成するために使用されます。この要素は、複数のユーザーからのテキスト応答を受け入れる場合に役立ちます。</p> <p>このチュートリアルでは、いくつかの例を使用して、AllaでHTML <code> <textarea></code>を使用する方法について説明します。コード。このチュートリアルを終了すると、<code> <textarea></code>を1つとして使用するために必要なすべての知識が得られます。 pro </p> <h2>HTMLTextareaタグ</h2><p> <code> <textarea> </code>は、フォームに複数行のテキスト入力コントロールフィールドを定義するために使用されます。 。 <code> <textarea></code>には無制限の文字数を含めることができます</p><p>構文<code><textarea></code>は次のとおりです。</p><p>一時停止コードを降順しました。 <code> <textarea> </code>タグは、Webフォームのテキスト領域領域を定義するために使用されます。 <code> <input> </code>とは異なり、<code> <textarea> </code>には開始タグ（<code> <textarea> </code>）と終了タグ（<code> </ textarea）の両方が必要です。 > </code>）。これは、テキストボックスに表示されるデフォルトのテキストが2つのタグの間に含まれているためです。</p> <p>この例では、2つの属性も指定しています。</p> </div> </div> <ul> <li><strong>行</strong>は、テキストの領域に何行の行を削除するかをブラウザに指示しますt。つまり、rows属性は、テキストボックスの高さを示します。</li> <li><strong>Col。 </strong>は、テキストボックスにデフォルトで必要な列数です。つまり、Col。属性は、テキストボックスの幅を示します</li> </ul> </a> </div> <p>地元の衣料品店。このフォームでは、顧客が購入についてコメントできるようにする必要があります。ユーザーに詳細なコメントを送信するスペースを提供したいので、HTMLの<code> <textarea></code>を使用してユーザーのコメントを収集します。</p> <p>次のコードを使用してコメントフォームを作成できます：</p> <p>コードは次を返します：</p> <figure class = "wp-block image"> <img src = "h ttps：//LH6。 googleusercontent.com / a0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP 91u3TiWx-XsTyB8YeQHJLJut19I-Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y_3N "ALT =" A0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP91u3TiWx XsTyB8YeQHJLJut19I Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y 3N「> </フィギュア> <P>レッツ＆rsquo; sが私たちのコードを壊すまず、<コード> <フォーム> </code>を宣言しました。これはオンラインフォームの定義に使用されます。次に、<code> <label> </code>を使用して、ユーザーに<code>どのようなフィードバックがありますか？</code></pを尋ねるラベルをページに追加しました。 > <p>そこで、<code> <textarea> </code>を使用して戻りフォームを作成しました。次の4つの属性を指定しました：</p> <ul> <li>行は5で、フィールドに必要な行数を格納します</li><li>列は30に設定され、フィールドに必要な列数を格納します。</li><li>idはフォームに割り当てられた一意の識別子です。 、フォームを送信するときに使用されます。</li> <li>名前はフォームの識別にも使用され、nです。フォームをウェブサーバーに送信する場合に必要です。</li></ul> <p> <code> <textarea></code>はすべての主要なブラウザでサポートされています。</p><p>例上記は<code><textarea></code>の基本的な実装ですが、フォームをより高度にすることができます。</p> <p> <code> <textarea></code>でテキストボックスを作成します。</p><h3>最小長と最大長</h3><p> dos goたとえば、衣料品店に入れます。たとえば、文字数を制限したいとします。 ute nteは1000に送信し、ユーザーがコメントを書くときに簡潔になるように促します。また、ユーザーがフォームに何かを書き込めるように、最小文字数制限を10に設定します。</p> </a> </div> <p>ここで、MINLENGTH属性とmAXLENGTH属性が機能します。minlengthは、ユーザーが書き込む必要のある最小文字数を指定するために使用され、maxlengthは、ユーザーがモジュールに書き込むことができる最大文字数を指定するために使用されます。</p> <p>これは、minlength属性とmaxlength属性が定義された以前のWebモジュールの例です。</p> <p>返品フォーム：</p> <figure class = "wp-block image"> <img src = "https：//lh3.googleusercontent .COM / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj <<モジュールは無効とみなされた場合、当社のモジュールに文字がない。左「>ユーザーが私たちの形で10文字未満、テキストエリアを書き込みしてもいることに注意することが重要です引き続き有効と見なされます。最小制限を課す場合は、必要な<code></code>を指定する必要があります。</p><h3>プレースホルダーテキスト</h3><p>上記のWebフォームでは、内部にデフォルトのテキストを指定します。私たちのモジュール。このテキストは<code>あなたのコメントがここに行くことを意味します。 </code>この情報は便利ですが、フォームへの応答で不要な場合は、ユーザーがデフォルトのテキストを手動で削除する必要があります。</p> <p>プレースホルダー値を指定する場合は、 <code>プレースホルダー</code>。この属性は、フォームが空のときに表示されるプレースホルダー値を示します。ユーザーがボックスに入力し始めるとすぐに、プレースホルダーが消えます。</p><p>プレースホルダーテキストを含む<code><textarea></code>の例を次に示します。<code>コメントはここに表示されます。 </code>：</p> <p>コードは次を返します：</p> <script> jQuery（ドキュメント）.ready（function（）{jQuery（`＃testimonial-section-1`）。click（function（e）{var text = "Find your Bootcamp match"; var type = "testimonial section"; var ahref = jQuery（ this）.attr（`href`）; GaEvent（text、type、`fasttrack`）; fasTrackEvent（type、text、ahref）;}）; function GaEvent（text、name、eventName）{var pathName=window.location。pathname.replace（/// g、 ""）; var referrer = document.referrer; referrer = referrer .replace（ "https：/ /"、 ""）; referrer = referrer.replace（ "http：//"、 ""）; referrer = referrer.split（`/`）[0]; gtag（`event`、eventName、{cta_type：`fasttrack`、cta_name：name、cta_text：text、page_url：document.URL、page_path：pathName、referrer：referrer、}）;} function fasTrackEvent（type、text、ahref、 fC TA = null）{var article = jQuery（ ".thb-blockgrid"）。親 （）。検索（ "h2"）。文章 （ ）; if（article == ""）{var article = jQuery（ "h1"）。文章 （）; } analytics.track（ "Blog --FastTrack CTA Clicked"、{time：Date.now（）、ctaType：type、ctaText：text、url：document.URL、article：article、category：jQuery（`。entry-header。 single_category_title`）.text（）、source： "blog"、referrer：document.referrer、referrerDomain：document.referrer.split（` /`）[2]}）; if（fCTA == null）{var fCTA=`お客様の声-セクション`; } const firstFtCTA = localStorage.getItem（`firstFtCTA`）; if（！firstFtCTA）{localStorage.setItem（`firstFtCTA`、fCTA）; localStorage.setItem（`firstFtCTAPath`、document.URL）; } localStorage.setItem（`lastFtCTA`、fCTA）; localStorage.setItem（`lastFtCTAPath`、document.URL）; analytics.identify（{...（firstFtCTA？{}：{firstFtCTA：localStorage.getItem（`firstFtCTA`）、firstFtCTAPath：localStorage.getItem（`firstFtCTAPath`）}）、lastFtCTA：fCTA、lastFtCTAPath}：document.URL、 ）; }}）; </ SCRIPT> </div> <クラス顔= "WP-画像ブロック"> <IMG SRC = "https://lh3.googleusercontent.com/7EP_nEAj8Pki73CeUAszIZ_eE_8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m-YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb-CNJ0n21" ALT =「7EP NEAj8Pki73CeUAszIZ EE 8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb CNJ0n21 "> </ figure> <p>ご覧のとおり、テキスト<code>コメントはここに表示されます。 </code>がテキストボックスに表示されます。ただし、ユーザーが入力を開始すると、このテキストは表示されなくなります。このテキストは薄い灰色であるためプレースホルダーであることがわかりますが、この記事の最初の例に示されているデフォルトのテキストは、特に明記されていない限り、黒一色のテキストとして表示されます。</p> </a> </div> <h2> HTML textbox属性</h2><p> <code> <textarea></code>はラベル固有の属性のセットを受け入れます。<code><textarea></code>はすべての<ahref="をサポートします/ html-textarea /">HTMLのグローバル属性</a>。</p><p> <code> <textarea> </code>でサポートされている特定のタグ属性は次のとおりです。</p><tableclass = "wp-block to table-info table"> <tbody> <tr><td><strong>属性</strong></ td><td><strong>値</strong></ td> <td ><strong>説明</strong></ td> </ tr><tr><td>オートフォーカス</td><td>オートフォーカス</td><td>ドキュメントのときにテキストエリアにフォーカスを合わせるかどうかを示しますロードされます。</td></ tr><tr><td>列</td> <td> number </td><td>テキストボックスにデフォルトで表示されるテキストの行数を指定します。 </ td> </ tr><tr><td>無効</td><td>ブール値</td><td>は、ユーザー入力用のテキストボックスを有効にします。 </ td> </ tr><tr><td>フォーム</td><td>モジュールID</td><td>テキストボックスモジュールへのリンク。 </ td> </ tr> <tr> <td> maxlength </td><td>数値</td><td>テキストボックスで受け入れられる最大文字数を示します。<br></td> < / tr> <tr> <td> minlength </ td> <td> number </td><td>テキストボックスで受け入れられる最小文字数を示します。 </ td> </ tr><tr><td>名前</td><td>名前</td><td>テキストボックスの名前。 </ td> </ tr><tr><td>プレースホルダー</td><td>テキスト</td><td>ユーザーがテキストボックスに入力を開始すると消えるプレースホルダーテキストを提供します。 </ td> </ tr><tr><td>読み取り専用</td><td>ブール値</td><td>ユーザーがテキストエリアの内容を変更できないことを示します。 </ td> </ tr><tr><td>必須</td><td>ブール値</td><td>ユーザーがフォームに入力する必要があることを示します。 </ td> </ tr><tr><td>行</td><td>番号</td><td>テキストボックスにデフォルトで表示されるテキスト列の数を示します。 </ td> </ tr> </ tbody> </ table> <h2> </h2><h2>結論</h2><p>HTMLの<code><textarea></code>を使用して作成します複数行のテキストの入力メンバーの。これらは、複数のユーザーデータ文字列を収集する場合に役立ちます。</p> <p>このチュートリアルでは、例を参照して、<code> <textarea></code>を使用してテキストボックスを作成する方法について説明しました。 。このチュートリアルでは、<code> <textarea> </code>が提供する特定のタグ属性を含む参照テーブルも提供しました。これで、HTMLエキスパートのように<code> <textarea></code>を使い始める準備が整いました。</p>>
</code>で定義され、無制限の文字数を含めることができます。</ em> </p> <p> HTMLフォームを作成するときに、受け入れるかどうかを決めることができます。テキストの長い文字列。たとえば、小売業者のWebサイトの顧客連絡フォームを作成する場合、顧客が直面している問題の詳細な説明を受け入れるフォーム要素を作成できます。</p><p>ここにHTMLの<コード>があります。 <textarea></code>が入ります。<code><textarea></code>要素は、テキストの複数行を編集する機能を提供するシェイプ要素を作成するために使用されます。この要素は、複数のユーザーからのテキスト応答を受け入れる場合に役立ちます。</p> <p>このチュートリアルでは、いくつかの例を使用して、AllaでHTML <code> <textarea></code>を使用する方法について説明します。コード。このチュートリアルを終了すると、<code> <textarea></code>を1つとして使用するために必要なすべての知識が得られます。 pro </p> <h2>HTMLTextareaタグ</h2><p> <code> <textarea> </code>は、フォームに複数行のテキスト入力コントロールフィールドを定義するために使用されます。 。 <code> <textarea></code>には無制限の文字数を含めることができます</p><p>構文<code><textarea></code>は次のとおりです。</p><p>一時停止コードを降順しました。 <code> <textarea> </code>タグは、Webフォームのテキスト領域領域を定義するために使用されます。 <code> <input> </code>とは異なり、<code> <textarea> </code>には開始タグ（<code> <textarea> </code>）と終了タグ（<code> </ textarea）の両方が必要です。 > </code>）。これは、テキストボックスに表示されるデフォルトのテキストが2つのタグの間に含まれているためです。</p> <p>この例では、2つの属性も指定しています。</p> </div> </div> <ul> <li><strong>行</strong>は、テキストの領域に何行の行を削除するかをブラウザに指示しますt。つまり、rows属性は、テキストボックスの高さを示します。</li> <li><strong>Col。 </strong>は、テキストボックスにデフォルトで必要な列数です。つまり、Col。属性は、テキストボックスの幅を示します</li> </ul> </a> </div> <p>地元の衣料品店。このフォームでは、顧客が購入についてコメントできるようにする必要があります。ユーザーに詳細なコメントを送信するスペースを提供したいので、HTMLの<code> <textarea></code>を使用してユーザーのコメントを収集します。</p> <p>次のコードを使用してコメントフォームを作成できます：</p> <p>コードは次を返します：</p> <figure class = "wp-block image"> <img src = "h ttps：//LH6。 googleusercontent.com / a0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP 91u3TiWx-XsTyB8YeQHJLJut19I-Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y_3N "ALT =" A0bBjFEzohKfpWUH6wMv2m0bBwWje2RZrGS4JQuBBDdrAGMvQdJpMP91u3TiWx XsTyB8YeQHJLJut19I Ou5k4VLIGpXoWD5KbbgO7FaSFZC6pdzWKjejyaRVV5HbtNDI54Y 3N「> </フィギュア> <P>レッツ＆rsquo; sが私たちのコードを壊すまず、<コード> <フォーム> </code>を宣言しました。これはオンラインフォームの定義に使用されます。次に、<code> <label> </code>を使用して、ユーザーに<code>どのようなフィードバックがありますか？</code></pを尋ねるラベルをページに追加しました。 > <p>そこで、<code> <textarea> </code>を使用して戻りフォームを作成しました。次の4つの属性を指定しました：</p> <ul> <li>行は5で、フィールドに必要な行数を格納します</li><li>列は30に設定され、フィールドに必要な列数を格納します。</li><li>idはフォームに割り当てられた一意の識別子です。 、フォームを送信するときに使用されます。</li> <li>名前はフォームの識別にも使用され、nです。フォームをウェブサーバーに送信する場合に必要です。</li></ul> <p> <code> <textarea></code>はすべての主要なブラウザでサポートされています。</p><p>例上記は<code><textarea></code>の基本的な実装ですが、フォームをより高度にすることができます。</p> <p> <code> <textarea></code>でテキストボックスを作成します。</p><h3>最小長と最大長</h3><p> dos goたとえば、衣料品店に入れます。たとえば、文字数を制限したいとします。 ute nteは1000に送信し、ユーザーがコメントを書くときに簡潔になるように促します。また、ユーザーがフォームに何かを書き込めるように、最小文字数制限を10に設定します。</p> </a> </div> <p>ここで、MINLENGTH属性とmAXLENGTH属性が機能します。minlengthは、ユーザーが書き込む必要のある最小文字数を指定するために使用され、maxlengthは、ユーザーがモジュールに書き込むことができる最大文字数を指定するために使用されます。</p> <p>これは、minlength属性とmaxlength属性が定義された以前のWebモジュールの例です。</p> <p>返品フォーム：</p> <figure class = "wp-block image"> <img src = "https：//lh3.googleusercontent .COM / ztmPnPdTmOQ1f7X3SWtWwd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD- JSR784uIegJeXzrWAvArwI_FpuE7Ul6cOZAwtBtKOSuKqw9 wd3iSXouyXSNof94000099SzkZHWo5Gy8TrbeKv0ZzD JSR784uIegJeXzrWAvArwI FpuE7Ul6cOZAwtfJyfEKVSuKqCwOILHdc9gj <<モジュールは無効とみなされた場合、当社のモジュールに文字がない。左「>ユーザーが私たちの形で10文字未満、テキストエリアを書き込みしてもいることに注意することが重要です引き続き有効と見なされます。最小制限を課す場合は、必要な<code></code>を指定する必要があります。</p><h3>プレースホルダーテキスト</h3><p>上記のWebフォームでは、内部にデフォルトのテキストを指定します。私たちのモジュール。このテキストは<code>あなたのコメントがここに行くことを意味します。 </code>この情報は便利ですが、フォームへの応答で不要な場合は、ユーザーがデフォルトのテキストを手動で削除する必要があります。</p> <p>プレースホルダー値を指定する場合は、 <code>プレースホルダー</code>。この属性は、フォームが空のときに表示されるプレースホルダー値を示します。ユーザーがボックスに入力し始めるとすぐに、プレースホルダーが消えます。</p><p>プレースホルダーテキストを含む<code><textarea></code>の例を次に示します。<code>コメントはここに表示されます。 </code>：</p> <p>コードは次を返します：</p> <script> jQuery（ドキュメント）.ready（function（）{jQuery（`＃testimonial-section-1`）。click（function（e）{var text = "Find your Bootcamp match"; var type = "testimonial section"; var ahref = jQuery（ this）.attr（`href`）; GaEvent（text、type、`fasttrack`）; fasTrackEvent（type、text、ahref）;}）; function GaEvent（text、name、eventName）{var pathName=window.location。pathname.replace（/// g、 ""）; var referrer = document.referrer; referrer = referrer .replace（ "https：/ /"、 ""）; referrer = referrer.replace（ "http：//"、 ""）; referrer = referrer.split（`/`）[0]; gtag（`event`、eventName、{cta_type：`fasttrack`、cta_name：name、cta_text：text、page_url：document.URL、page_path：pathName、referrer：referrer、}）;} function fasTrackEvent（type、text、ahref、 fC TA = null）{var article = jQuery（ ".thb-blockgrid"）。親 （）。検索（ "h2"）。文章 （ ）; if（article == ""）{var article = jQuery（ "h1"）。文章 （）; } analytics.track（ "Blog --FastTrack CTA Clicked"、{time：Date.now（）、ctaType：type、ctaText：text、url：document.URL、article：article、category：jQuery（`。entry-header。 single_category_title`）.text（）、source： "blog"、referrer：document.referrer、referrerDomain：document.referrer.split（` /`）[2]}）; if（fCTA == null）{var fCTA=`お客様の声-セクション`; } const firstFtCTA = localStorage.getItem（`firstFtCTA`）; if（！firstFtCTA）{localStorage.setItem（`firstFtCTA`、fCTA）; localStorage.setItem（`firstFtCTAPath`、document.URL）; } localStorage.setItem（`lastFtCTA`、fCTA）; localStorage.setItem（`lastFtCTAPath`、document.URL）; analytics.identify（{...（firstFtCTA？{}：{firstFtCTA：localStorage.getItem（`firstFtCTA`）、firstFtCTAPath：localStorage.getItem（`firstFtCTAPath`）}）、lastFtCTA：fCTA、lastFtCTAPath}：document.URL、 ）; }}）; </ SCRIPT> </div> <クラス顔= "WP-画像ブロック"> <IMG SRC = "https://lh3.googleusercontent.com/7EP_nEAj8Pki73CeUAszIZ_eE_8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m-YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb-CNJ0n21" ALT =「7EP NEAj8Pki73CeUAszIZ EE 8ZJ4LuvxOu820CYCWR4hVxEd3kLM75CUCcuWNw2m YPzdnfnC5McAGP1qAGBdyk7saA8hBDrHaSKUWFj9OFcDA0V5QYTdK1WY5eqzb CNJ0n21 "> </ figure> <p>ご覧のとおり、テキスト<code>コメントはここに表示されます。 </code>がテキストボックスに表示されます。ただし、ユーザーが入力を開始すると、このテキストは表示されなくなります。このテキストは薄い灰色であるためプレースホルダーであることがわかりますが、この記事の最初の例に示されているデフォルトのテキストは、特に明記されていない限り、黒一色のテキストとして表示されます。</p> </a> </div> <h2> HTML textbox属性</h2><p> <code> <textarea></code>はラベル固有の属性のセットを受け入れます。<code><textarea></code>はすべての<ahref="をサポートします/ html-textarea /">HTMLのグローバル属性</a>。</p><p> <code> <textarea> </code>でサポートされている特定のタグ属性は次のとおりです。</p><tableclass = "wp-block to table-info table"> <tbody> <tr><td><strong>属性</strong></ td><td><strong>値</strong></ td> <td ><strong>説明</strong></ td> </ tr><tr><td>オートフォーカス</td><td>オートフォーカス</td><td>ドキュメントのときにテキストエリアにフォーカスを合わせるかどうかを示しますロードされます。</td></ tr><tr><td>列</td> <td> number </td><td>テキストボックスにデフォルトで表示されるテキストの行数を指定します。 </ td> </ tr><tr><td>無効</td><td>ブール値</td><td>は、ユーザー入力用のテキストボックスを有効にします。 </ td> </ tr><tr><td>フォーム</td><td>モジュールID</td><td>テキストボックスモジュールへのリンク。 </ td> </ tr> <tr> <td> maxlength </td><td>数値</td><td>テキストボックスで受け入れられる最大文字数を示します。<br></td> < / tr> <tr> <td> minlength </ td> <td> number </td><td>テキストボックスで受け入れられる最小文字数を示します。 </ td> </ tr><tr><td>名前</td><td>名前</td><td>テキストボックスの名前。 </ td> </ tr><tr><td>プレースホルダー</td><td>テキスト</td><td>ユーザーがテキストボックスに入力を開始すると消えるプレースホルダーテキストを提供します。 </ td> </ tr><tr><td>読み取り専用</td><td>ブール値</td><td>ユーザーがテキストエリアの内容を変更できないことを示します。 </ td> </ tr><tr><td>必須</td><td>ブール値</td><td>ユーザーがフォームに入力する必要があることを示します。 </ td> </ tr><tr><td>行</td><td>番号</td><td>テキストボックスにデフォルトで表示されるテキスト列の数を示します。 </ td> </ tr> </ tbody> </ table> <h2> </h2><h2>結論</h2><p>HTMLの<code><textarea></code>を使用して作成します複数行のテキストの入力メンバーの。これらは、複数のユーザーデータ文字列を収集する場合に役立ちます。</p> <p>このチュートリアルでは、例を参照して、<code> <textarea></code>を使用してテキストボックスを作成する方法について説明しました。 。このチュートリアルでは、<code> <textarea> </code>が提供する特定のタグ属性を含む参照テーブルも提供しました。これで、HTMLエキスパートのように<code> <textarea></code>を使い始める準備が整いました。</p>>
Michael Zippo