여러 줄의 문자열을 입력하는 방법 - textarea
폼에서 직접 여러줄의 텍스트를 입력하는 영역을 만들 수 있습니다. 이 영역을
텍스트 영역(textarea)라고 하며 한 줄 이상의 문장을 입력할 때 사용하는 폼을
말합니다. 게시판에서 게시물을 입력하거나 회원가입 양식에서 동의 약관을 표시할
때 자주 사용합니다.
textarea
<textarea>는 여러 줄의 긴 문장을 입력할 수 있는 양식입니다.
- cols : 가로 너비를 문자 단위로 지정합니다.
- rows : 세로 길이를 줄 단위로 지정합니다.
예제
예제 1
<textarea>와 </textarea>사이에 필요한
기본값을 입력합니다.
<form>
<p><textarea>
abc
def
</textarea></p>
<p><input type="submit" value="Submit"></p>
</form>class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="320"
data-pen-title="HTML 여러 줄의 문자열을 입력하는 방법 textarea 예제1"
data-slug-hash="qBZvEvo"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 2
col 속성으로 가로 크기를, row 속성으로 세로 크기를 정할 수
있습니다.
<form>
<p><textarea cols="40" rows="10"></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="400"
data-pen-title=" HTML 여러 줄의 문자열을 입력하는 방법 textarea 예제2"
data-slug-hash="NWNJPLK"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 400px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
하지만, 크기 등 모양은 CSS에서 정하는 게 좋습니다.
예제 3
href="https://urliveblogger.blogspot.com
/2021/01/html-placeholder.html"
>placeholder >
속성으로 안내 문구를 넣을 수 있습니다.
<form>
<p><textarea placeholder="Input some text."></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="320"
data-pen-title=" HTML 여러 줄의 문자열을 입력하는 방법 textarea placeholder 예제"
data-slug-hash="gOrEbdE"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 4
readonly 속성을 추가하면 읽기만 가능합니다.
<form>
<p><textarea placeholder="Read Only" readonly></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="320"
data-pen-title=" HTML 여러 줄의 문자열을 입력하는 방법 textarea readonly 예제"
data-slug-hash="VwaRYqG"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.
예제 5
disabled 속성을 추가하면 사용할 수 없고, 배경색이 바뀝니다.
<form>
<p><textarea placeholder="Disabled" disabled></textarea></p>
<p><input type="submit" value="Submit"></p>
</form>class="codepen"
data-default-tab="result"
data-editable="true"
data-preview="true"
data-height="320"
data-pen-title="HTML 여러 줄의 문자열을 입력하는 방법 textarea disabled 예제"
data-slug-hash="XWdGJOg"
data-theme-id="light"
data-user="LiveBlogger"
style="align-items: center; border: 2px solid; box-sizing: border-box; display: flex; height: 320px; justify-content: center; margin: 1em 0px; padding: 1em;"
>
로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.