HTMLのinputとtextareaのテキストボックスの違い【現役SE解説】
今回は、HTMLのinputとtextareaのテキストボックスの違いについて、それぞれに分け、簡単に解説していきます。
input要素のテキストボックス
input要素のtype属性の値をtextにするとテキストボックスを作れます。
input要素のテキストボックスでは、改行ができず一行のみの入力となります。
<input type="text" id="input_text">
上記のコードでは、input要素でテキストボックスを作っており、input_textというidを付けています。
textarea要素のテキストボックス
textarea要素を使うことによってもテキストボックスを作ることができます。
textarea要素の場合、rows属性やcols属性を指定することで、行数や列数を設定することも可能です。
<textarea rows="4" cols="20" id="textarea_text"></textarea>
上記のコードでは、textarea要素で4行、20列(1行あたりの文字数)のテキストボックスを作り、textarea_textというidを付けています。
JavaScriptから入力値を取得する方法
input要素とtextarea要素はともにJavaScriptで入力値を取得することが可能です。
ただし、input要素はvalue属性に入力値が、textarea要素はinnerTextプロパティに入力値が入るため注意が必要です。
console.log(document.getElementById("input_text").value); // input要素のテキストボックスの入力値
console.log(document.getElementById("textarea_text").innerText); // textarea要素のテキストボックスの入力値
上記のコードでは、input要素のテキストボックスの入力値とtextarea要素のテキストボックスの入力値の取得の仕方をそれぞれ表しています。