HTML / Reference / textarea
개요
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다.
문법
<textarea></textarea>
예제 - 기본
col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.
<!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>
예제 - 기본값
기본값이 필요하다면 <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>
예제 - 안내 문구
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>
HTML / Reference / input type="radio"
radio(라디오 버튼)는 사용자가 여러 개의 옵션 중 하나만 선택할 수 있게 하는 폼 요소입니다. input 태그의 type="radio" 속성을 사용하여 라디오 버튼을 생성합니다.
video는 HTML 문서에 동영상을 삽입하는 태그입니다. HTML5에서 추가된 것이므로, HTML5를 지원하지 않는 웹브라우저(예를 들어 IE 8 이하)에서는 작동하지 않습니다.
HTML은 연속한 여러 개의 빈 칸 또는 줄바꿈을 하나의 빈 칸으로 인식합니다. 따라서 코드 상에서 줄바꿈을 하거나 여러 번 띄어쓰기를 해도 한 번 띄어쓰기로 표현됩니다. 만약 블록 요소 안에서 줄바꿈을 하고 싶다면 br 태그를 이용합니다.
HTML / Reference / input type="range"
type이 range인 input은 지정한 범위 내의 숫자를 선택할 수 있게 하는 양식입니다. 슬라이드로 값을 선택합니다.
blockquote는 인용임을 나타내는 태그입니다. 인용의 출처는 cite 속성으로 나타냅니다. cite 속성 입력은 선택 사항이고, 웹브라우저에서는 보이지 않습니다. blockquote 요소의 기본 모양은 양쪽에 여백이 있는 것입니다.
textarea는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다. col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수 있습니다. 하지만, 크기 등 모양은 CSS의 width, height로 정하는 게 좋습니다.
form은 HTML에서 사용자 입력을 서버로 전송하는 양식을 정의할 때 사용됩니다. 입력 받은 값을 어디로 전송할지, 어떤 방식으로 전송할지 정합니다. form 태그 안에 input, select, textarea 등 양식이 들어갑니다.
HTML / Reference / input type="time"
type이 time인 input은 시간을 입력 받기 위한 양식입니다. 웹브라우저마다, 같은 웹브라우저라도 버전에 따라 표현 방식이 다릅니다.
pre 태그는 HTML에서 "preformatted text"를 정의하는 데 사용됩니다. 이 태그는 HTML 문서에서 텍스트를 작성한 그대로 표시하도록 하여, 공백과 줄바꿈을 유지하는 특징이 있습니다. 일반적으로 코드 블록, ASCII 아트, 또는 공백과 줄바꿈을 유지해야 하는 텍스트를 표시할 때 사용됩니다.
HTML / Reference / input type="hidden"
양식은 보통 사용자가 입력한 값을 활용하기 위해 사용합니다. 하지만, 사용자가 접속한 IP 등 사용자가 입력하지 않아도 필요한 값이 있을 수 있습니다. 이러한 값들은 type이 hidden인 input 태그로 만들어서 넘깁니다.