自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。基本インドアです!InstagramTwitterContactサーバーとドメインの同時取得で.jpが無料シュウ今回は【HTML】textareaの使い方、複数行のテキスト入力欄を作成しよう!の解説になります!こんな方に読んでほしいHTMLを学び始めた方へHTMLについて学びたい方へ今回はtextarea(複数行のテキスト)について解説しております。今回は、textarea(複数行のテキスト)について詳しく解説していきます。textareaでは、「複数行のテキスト」の入力欄を作成します。textareaで作成すると、複数行のテキストの入力欄が作成されます。type="text"になり、通常の入力欄になります。右の図が、textareaになり、複数行のテキストの入力欄になります。関連記事まとめtextareaについてtextareaを指定すると、複数行のテキストの入力欄になります。お問い合わせフォームの「お問い合わせ内容」、「ご質問」など、1行では入らない時に使います。書き方は以下のようになります。cols="○○"></textarea></div></form>指定できる属性colsテキスト入力欄の幅を文字数で指定します。(初期値は20になります)rowsテキスト入力欄の高さを文字数で指定します。type="text"は、1行の入力欄になります。メールアドレス」、「パスワード」などtextareaは、複数の入力欄になります。例)「お問い合わせ」、「ご質問」、「ブログのコメント」など入力欄に初期値についてinputタイプでは、value属性に初期値(文字)を指定していましたが、textareaでは、textarea〜初期値(文字)〜/textareaと指定すれば問題はありません。※CSSは最後に解説しております。入力欄に初期値についてお問い合わせ内容お問い合わせ内容を入力してください。name="contact">お問い合わせ内容を入力してください。</textarea></div></form>placeholder属性(入力欄に薄く表示)についてplaceholder属性とは、入力欄に文字や値を薄く表示します、入力例などを表示するときに指定します。placeholderで指定した文字や値は入力する際に、消えますので問題はありません。placeholder="お問い合わせ内容を入力してください。"></textarea></div></form>※上記のコードは分かりやすいように、改行を入れております。required属性(必須項目)についてrequired属性とは、必須項目に設定します、エラー表示はブラウザによって違います。requiredのみ記述すれば問題ありません。placeholder="お問い合わせ内容を入力してください。required></textarea></div></form>※上記のコードは分かりやすいように、改行を入れております。maxlength属性(文字数の最大値)についてmaxlength属性とは、文字数の最大値を指定します。maxlength="10"と指定すると、10文字を超えることはありません。placeholder="10字まで入力可能です。required></textarea></div></form>※上記のコードは分かりやすいように、改行を入れております。minlength属性(文字数の最小値)についてminlength属性とは、文字数の最小値を指定します。minlength="5"と指定すると、5文字以上入力しないとエラーが表示されます。placeholder="5字以上の入力が必要になります。required></textarea></div></form>※上記のコードは分かりやすいように、改行を入れております。ポイント!maxlength、minlengthに関しては、文字数を制限するため、ユーザーが「急に文字が入力できない」と混乱してしまう可能性がある為、placeholderを使い、文字数制限についての説明を残しておくと良いでしょう。minlength属性を使う際には、空(0文字)でも送信できる為、必ずrequired(必須項目)も合わせて設定しておきましょう。cols、rowsのサイズについてcolsとは、テキスト入力欄の幅を文字数で指定します。(初期値は20になります)rowsとは、テキスト入力欄の高さを文字数で指定します。cols="40"にしております。CSSでの高さ、幅の指定もできますが、HTMLでのサイズ変更も可能になります。rows、colsを指定しない場合は上記の初期値の値がサイズになります。cols="40"></textarea></div></form>CSSでtextareaを整える上記で「rows、cols」でのサイズを指定しましたが、CSSでもサイズの変更は可能です。CSSでは、余白、ボーダー線などの指定も可能になってきます。/*--背景色--*/}:focusとは、テキストフィールドなどのフォーム部品がフォーカス状態になったときに、スタイルが適用されます。今回は、「背景色」が変わるようになっております。ドラッグによるサイズ変更を無効にする方法textareaには、右下に小さいリサイズアイコン(一部のブラウザのみ)があり、ドラッグするとサイズが変わります。サイズ変更を無効するにはCSSで無効するしかありません。}関連記事type=”text”【HTML】type属性textの使い方、1行のテキスト入力欄を作成しよう!select【HTML】selectの使い方、プルダウンメニューを作成しよう!output【HTML】outputの使い方、計算結果を表示させよう!fieldset【HTML】fieldsetの使い方、フォーム入力欄をグループ化しよう!まとめ今回はこれで以上です。次回も「フォーム」について解説していきます。複数行の入力欄を作成します。placeholder属性とは、入力欄に文字や値を薄く表示します。required属性とは、必須項目に設定します。maxlength属性とは、文字数の最大値を指定します。minlength属性とは、文字数の最小値を指定します。colsとは、テキスト入力欄の幅を文字数で指定します。(初期値は20になります)rowsとは、テキスト入力欄の入力欄の高さで指定します。(初期値は2になります)CSSでスタイルを整える際には、「クラス名、id名」を使っても問題ありません。noneを追加しましょう。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。