HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식
textarea
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식이다.
문법
<textarea></textarea>
예제
col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } </style> </head> <body> <form> <p><textarea cols="50" rows="10"></textarea></p> <p><input type="submit" value="Submit"></p> </form> </body> </html>
placeholder 속성으로 안내 문구를 넣을 수 있다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } textarea { width: 80%; height: 100px; } </style> </head> <body> <form> <p><textarea placeholder="Input some text."></textarea></p> <p><input type="submit" value="Submit"></p> </form> </body> </html>
readonly를 추가하면 읽기만 가능하다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } textarea { width: 80%; height: 100px; } </style> </head> <body> <form> <p><textarea placeholder="Read Only" readonly></textarea></p> <p><input type="submit" value="Submit"></p> </form> </body> </html>
disabled를 추가하면 사용할 수 없고, 배경색이 바뀐다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } textarea { width: 80%; height: 100px; } </style> </head> <body> <form> <p><textarea placeholder="Disabled" disabled></textarea></p> <p><input type="submit" value="Submit"></p> </form> </body> </html>
기본값이 필요하다면 <textarea>와 </textarea> 사이에 입력한다. 여러 줄이 가능하다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> * { font-size: 16px; font-family: Consolas, sans-serif; } textarea { width: 80%; height: 100px; } </style> </head> <body> <form> <p><textarea> 123 123 </textarea></p> <p><input type="submit" value="Submit"></p> </form> </body> </html>