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

HTMLのtextarea要素におけるautofocus属性の使い方を解説

<textarea>要素のautofocus属性は、ページが読み込まれた際に、そのテキストエリア自体へ自動的にフォーカスを設定するために使用されます。このautofocus属性は、HTML5で新たに導入されたものです。

構文は以下のとおりです。

<textarea autofocus>

それでは、textarea要素のautofocus属性を実装した具体例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>面接の質問</h2>
<p>なぜテクニカルライターの職種を志望するのですか？（100文字以内）</p>
<textarea rows="6" cols="70" autofocus>
回答は100文字以内で記入してください...
</textarea>
<p>あなたの強みは何ですか？（50文字以内）</p>
<textarea rows="4" cols="70">
回答は50文字以内で記入してください...
</textarea>
</body>
</html>

出力結果

上記の例では、2つのtextareaを配置しています。

<textarea rows="6" cols="70" autofocus>
回答は100文字以内で記入してください...
</textarea>
<p>あなたの強みは何ですか？（50文字以内）</p>
<textarea rows="4" cols="70">
回答は50文字以内で記入してください...
</textarea>

このうち、最初のtextareaにのみautofocusを設定しています。そのため、ページが読み込まれると、最初のtextareaに自動的にフォーカスが当たり、カーソルが表示されます。

<textarea rows="6" cols="70" autofocus>

なお、autofocus属性は1つのページにつき1つの要素にのみ指定できます。複数の要素へ同時に指定した場合、最初の要素が優先されるため、実装の際には注意が必要です。フォームの入力欄など、ユーザーに最初に入力してほしい項目に指定することで、操作の手間を省き、使いやすいフォームを実現できます。

  1. HTMLのopen属性とは？details要素の使い方とサンプルコード解説

    HTMLのopen属性は、details要素の内容をHTMLドキュメント上で最初から表示状態（開いた状態）にするためのブール属性です。この属性を指定すると、ユーザーがsummary要素をクリックしなくても、ページ読み込み時にdetails要素内のコンテンツが展開された状態で表示されます。 構文 open属性の基本的な構文は以下のとおりです。 <details open></details> open属性はブール属性のため、値を指定せずに属性名だけで記述できます。属性を省略した場合、details要素は初期状態で閉じられ、ユーザーがsummary要素をクリックしたときに初

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

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