HTML / textarea / 여러 줄의 문자열을 입력할 수 있는 양식
textarea
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다.
문법
|
1 |
<textarea></textarea> |
예제
col 속성(attribute)으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS에서 정하는 게 좋습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!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 속성으로 안내 문구를 넣을 수 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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를 추가하면 읽기만 가능합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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를 추가하면 사용할 수 없고, 배경색이 바뀝니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!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> 사이에 입력합니다. 여러 줄이 가능합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!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> |
