폼을 만들다 보면 장문의 글이나 버튼을 삽입해야하는 경우가 발생합니다. HTML5에서는 <textarea> 태그를 통해 글을 <button> 태그를 통해 버튼을 삽입할 수 있습니다.
1. <textarea>
<textarea> 태그는 텍스트를 삽입할 때 사용합니다. 텍스트 상자와 비슷하지만 텍스트 상자와는 달리 장문의 글을 삽입할 때 사용합니다. 해당 태그는 <textarea></textarea> 형태로 사용합니다. <textarea>태그에는 cols, rows, name 속성이 있습니다. cols와 rows는 각각 <textarea> 태그로 생성되는 텍스트 입력 상자의 영역의 가로와 세로 길이를 의미합니다. cols의 경우 가로 길이를 문자 단위를 기준으로 판단하며 지정되어있는 cols의 크기를 넘어간다면 자동으로 줄바꿈이됩니다. rows의 경우 세로 길이를 텍스트의 줄 수를 기준으로 판단하며 지정되어있는 rows의 크기를 넘어간다면 오른쪽에 스크롤바가 생성됩니다. name은 <textarea> 태그로 생성되는 텍스트 입력 상자의 이름을 지정합니다.
| 속성 | 설명 |
| cols | 가로 너비 |
| rows | 세로 너비 |
| name | 이름 |
<head></head>
<body>
<textarea cols="30" rows="3">장문을 출력하는 태그의 결과를 테스트하는 화면입니다. 출력 결과가 옳게 나왔는지 확인을 부탁드립니다.</textarea>
</body>
2. <button>
<button> 태그는 폼에 버튼을 삽입할 때 사용합니다. 해당 태그는 <button></button> 형태로 사용합니다. 삽입할 수 있는 버튼의 유형은 폼을 제출하는 제출 버튼, 폼을 초기화하는 초기화 버튼, 일반 버튼으로 총 3가지 입니다. 버튼의 유형은 type 속성의 값을 통해 지정할 수 있습니다. 제출 버튼의 경우 type 속성을 submit으로 초기화 버튼의 경우 type속성을 reset으로 일반 버튼의 경우 type 속성을 button으로 지정합니다. 따로, type 속성을 지정하지 않았을 경우에는 기본값이 submit으로 설정되어 있습니다.
| type 속성 값 | 설명 |
| submit | 전송 버튼 |
| reset | 초기화 버튼 |
| button | 일반 버튼 |
<head></head>
<body>
<button type="submit">전송</button>
<button type="reset">초기화</button>
<button type="button">일반버튼</button>
</body>
'Programming > HTML5 & CSS3' 카테고리의 다른 글
| [CSS] 선택자의 기본 (0) | 2021.01.26 |
|---|---|
| [HTML] 자바스크립트를 대신하는 input 태그 속성들 (0) | 2021.01.25 |
| [HTML] 드롭다운 목록 만드는 법 (0) | 2021.01.23 |
| [HTML] input 태그 사용해 사용자 입력 받기 (0) | 2021.01.22 |
| [HTML] form 만드는 법 (0) | 2021.01.21 |
