HTMLのTextAreaタグ-htmlチュートリアル-php.cn

HTMLのTextAreaタグ

WBOY

リリース： 2024-09-04 16:29:25

オリジナル

874 人が閲覧しました

tag は多数の HTML タグの 1 つです。タグ形式は、開始タグ ()、コンテンツ、および終了タグ () の 3 つの主要な部分に分かれています。ユーザーは、フォーム内で HTML タグを使用してテキスト領域を作成することにより、複数行にわたってテキストを入力できます。タグは、多くの文字を保持できるテキスト領域を作成します。

の使い方HTML でタグを付けますか?

textarea 要素は、cols、rows、またはその両方などの属性を使用して指定された領域またはスペースを作成します。 CSS スタイルと高さと幅のプロパティにより、ルックアンドフィールをフォーマットできます。

構文:

<textarea rows="3" cols="20">
Enter your text here...
</textarea>

ログイン後にコピー

属性

タグは、他のすべての HTML タグと同様に、他の多くの属性を受け入れます。これらの属性はにも共通です。フォーム要素。それらは以下にリストされています:

autofocus: autofocus 属性により、ページの読み込み時にテキスト領域が自動的にフォーカスを取得します。
cols: 「cols」属性はテキスト領域の幅を指定します。値は正の整数である必要があります。指定しない場合、「cols」のデフォルト値は 20 です。
無効: この機能はテキスト領域を無効にしてフリーズし、ユーザー入力の変更を受け入れません。テキストエリアを無効にすると、Tab キーでテキストエリアがスキップされます。
form: 「form」属性は、テキスト領域が属するフォーム ID を指定します。
name: テキストコントロールに名前を割り当てます。
プレースホルダー: この属性は、テキストボックスに何を書くべきかを示すヒントやサンプルテキストを提供することでユーザーに役立ちます。
readonly: この属性は、テキスト領域を読み取り専用モードに設定します。つまり、ユーザーの入力の影響を受けず、内容を変更することもできません。
wrap: この機能は、テキスト領域でテキストを折り返す方法を指定します。指定しない場合、デフォルト値は「ソフト」です。

HTML の TextArea タグの例

テキストエリア要素の働きをさらに理解するには、を含む次の例を確認してください。タグが動作中、</p> <h4>例 #1</h4> <p><strong>コード:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form> <p>Leave your Comment:</p> <br /> <textarea id="ta" cols="60" rows="5"> Write Here...</textarea></form></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856757259.jpg" alt="HTMLのTextAreaタグ" ></p> <p>上記の例は簡単で、<textarea> の機能を示しています。要素。たとえば、「id」属性はアクセシビリティを目的としています。この例で使用されているもう 1 つの興味深い機能は、cols 属性と rows 属性です。</p> <p>行と列を使用すると、プログラマはテキスト領域のサイズの境界値、つまりテキスト領域が取得する正確なスペースを設定できます。ブラウザのデフォルトは異なる可能性があるため、これらの属性を使用すると、ブラウザ間のサポートと形式の一貫性が向上します。</p> <h4>例 #2</h4> <p><strong>コード:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title> Textarea HTML Tag Demo </title> </head> <body> <form> <p>Fill the Detail:</p> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" required="required">Enter your name</textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form> </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>出力:</strong></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543856928836.jpg" alt="HTMLのTextAreaタグ" ></p> <p>上の例は、<textarea> と一緒に使用される別のプロパティのセットを示しています。タグ、最大長、最小長。 maxlength は、ユーザーがテキスト領域に入力できる最大文字数を指定します。したがって、ここでは、ユーザーは特殊文字を含む「60」文字を入力できます。</p> <p>最大長属性は HTML5 で追加されました。 HTML はこの属性をサポートしていませんでした。テキスト領域には、「minlength」プロパティで設定された少なくとも 10 文字が必要です。「required」属性は、有効とみなされて送信されるためには、ユーザーがテキスト領域を空白のままにしてはならないことを示します。これはタグの簡単な検証です。</p> <h4>例 #3</h4> <p><strong>コード:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form id="Form1"> <label>Textarea Box 1</label> <br /> <textarea rows="5" cols="40" name="demo" maxlength="60" minlength="10" disabled="disabled"> This is Disabled</textarea> <br /> <label>Textarea Box 2</label> <br /> <textarea rows="5" cols="40" required="required"></textarea> <br /> <label>Textarea Box 3</label> <br /> <textarea rows="5" cols="40" placeholder="This is readonly textarea" readonly="readonly"></textarea> <br /> <input type="submit" name="Submit" value="Submit" /> </form></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>出力:</strong></p> <p>「Textarea Box 2」テキスト領域は必須のテキスト領域であるのに対し、「Textarea Box 1」は無効になっていることに注目してください。</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857055297.jpg" alt="HTMLのTextAreaタグ" ></p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857237912.jpg" alt="HTMLのTextAreaタグ" ></p> <h4>例 #4</h4> <p><strong>コード:</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><form id="label2" action="textareaDemo.html"> <fieldset> <legend><b>Form 2</b></legend> <input type="text" name="FN" value="Name" /> <br /> <input type="submit" name="Submit" value="Submit" /> <br /> </fieldset> </form> <textarea rows="5" cols="40" form="label2" required="required"></textarea> <br /> <p>Above Text Area belongs to 'Form 2'</p></pre><div class="contentsignin">ログイン後にコピー</div></div> <p><strong>出力:</strong></p> <p>以下の出力に注目してください。以下のテキストエリアボックスは「必須」フィールドであり、上記のコードで述べたように、このフィールドはフォーム「Form 2」に関連付けられています。したがって、空のテキスト領域を含むフォームを送信しようとすると、アラートが表示されます。</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172543857522484.jpg" alt="HTMLのTextAreaタグ" ></p> <h3>結論</h3> <p>要素は、<form> 内でネストされた要素にすることができます。タグまたはフォームタグの外側に存在することもできますが、「form」属性を使用してそれ自体をフォームに関連付けます。重要な注意点の 1 つは、この要素には「value」属性がないため、テキスト領域にデフォルトのテキストが必要な場合は、開始部分と終了部分の <textarea> の間にそのテキストを入力してください。タグ。

以上がHTMLのTextAreaタグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。