Web Form 複数行のテキスト入力

textarea複数行のテキスト入力

inputの入力は一行ですが、
textareaの場合は複数行の入力が可能となります。

下に画像を用意しました。

コードは下記の様になります。

<form> 
    <textarea 
    name="sample"
    placeholder="コメントを記入" 
    cols="30" 
    rows="5"
    maxlength="50"
    minlength="5"
    spellcheck="false"
    required
    ></textarea>
  </form>

コードを上から順に説明します。
name="sample"
sampleがコントロールの名前になります。
placeholder="コメントを記入"
「コメントを記入」は、入力のための参考として表示されます。
cols="30" 
横に30文字まで入力できます。
rows="5"
5行まで入力できます。
maxlength="50"
最大30文字まで入力できます。
minlength="5"
最小5文字の入力が必要です。
spellcheck="false"
スペルチェックを行うかどうかを指定で、
falseの時は、チェックしません。
required  
送信する前に値の入力が要求されます。  

次のコードは、スタイルになります。

form{
  margin: 0 auto;
  width: 500px;
  padding: 1em;
  border: 2px solid rgb(31, 30, 30);
}
textarea{
  resize: horizontal;
  width: 400px;
  padding: 1em;
  border: 2px solid rgb(31, 30, 30);
}
textarea:invalid {
  border: 2px dashed red;
}

主だった所を説明します。
resize: horizontal;
ブラウザに表示されたテキストエリアの大きさを
変更できるようにします。
horizontalは水平方向に大きさを変更できるようにします。
verticalは垂直方向の変更を可能にします。

textarea:invalid;
:invalid は擬似クラスの指定です。
無効な値のとき、
border: 2px dashed red;
により赤色の点線を表示します。

以上です。