HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのtextarea disabled（無効）属性の使い方

<textarea>要素のdisabled（無効）属性は、テキストエリアを操作できない状態にするために使用します。この属性を指定すると、ユーザーは<textarea>内のテキストを編集することはもちろん、テキストを選択することすらできなくなります。

構文

disabled属性の基本的な構文は以下のとおりです。

<textarea disabled>

使用例

それでは、<textarea>要素のdisabled属性を実装した具体例を見ていきましょう。以下のコードでは、学生情報フォームの中で「Info」欄のテキストエリアを無効化しています。

<!DOCTYPE html>
<html>
<body>
<h2>Candidate Details</h2>
Student Name: <input type="text" value="David"><br>
Student Id: <input type="number" value="007"><br>
<p>Educational Qualification (Graduation)</p>
<select>
<option value="bca">B.Tech</option>
<option value="btech">BCA</option>
<option value="bcom">B.COM</option>
<option value="bsc">B.SC</option>
<option value="bba">BBA</option>
</select>
<p>Educational Qualification (Post-Graduation)</p>
<select>
<option value="mca">MCA</option>
<option value="mtech">M.Tech</option>
<option value="mcom">M.COM</option>
<option value="msc">M.SC</option>
</select></br>
<p>Info:</p>
<textarea rows="5" cols="30" disabled>
You need to also bring the certificates for the degrees mentioned above.
</textarea>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTMLのtextarea disabled（無効）属性の使い方

この例では、ドロップダウンリスト（<select>）とテキストエリア（<textarea>）が配置されています。

<select>
<option value="mca">MCA</option>
<option value="mtech">M.Tech</option>
<option value="mcom">M.COM</option>
<option value="msc">M.SC</option>
</select></br>
<p>Info:</p>
<textarea rows="5" cols="30" disabled>
You need to also bring the certificates for the degrees mentioned above.
</textarea>

重要なのは、次のようにdisabled属性を指定して<textarea>を無効化している部分です。これにより、ページの訪問者はこのテキストエリアを編集できなくなります。

<textarea rows="5" cols="30" disabled>
You need to also bring the certificates for the degrees mentioned above.
</textarea>
  1. HTMLのoption要素におけるvalue属性とは？基本構文とサンプルコードで解説

    HTMLのvalue属性は、<option>要素に対してサーバーへ送信する値を指定するための属性です。フォーム送信時に、ユーザーが選択した選択肢の値がこの属性の内容として送られます。値そのものは画面上には表示されず、表示されるテキスト（ラベル）とは別に内部的なデータを持たせられるのが特徴です。基本構文value属性の基本的な書き方は以下のとおりです。<option value=テキスト></option>value属性には任意の文字列を指定できます。省略した場合は、<option>要素内のテキストがそのまま送信されます。使用例ここでは、好きな科目

  2. HTMLのrows属性とは？textareaの高さ指定方法をわかりやすく解説

    HTMLのrows属性とはHTMLのrows属性は、<textarea>要素の表示される高さ（行数）を指定するための属性です。テキストエリアを画面に表示したときに、何行分の入力欄の高さを確保するかを制御できます。なお、rows属性を指定しない場合の初期値は「2」となっており、多くのブラウザでは2行分の高さで表示されます。基本構文rows属性の基本的な書き方は以下の通りです。<textarea rows=数値></textarea>「数値」の部分に、表示したい行数を半角数字で指定します。例えば「10」と指定すれば、10行分の高さを持つテキストエリアが表示されま