1. textarea 태그 속성들
| 태그 | 속성 | 설명 |
| <textarea> | cols | 글자수 단위의 넓이 |
| <textarea> | rows | 표시되는 줄 수 초과하면 스크롤 형태로 바뀜 |
| <textarea> | placeholder | 배경으로 출력되는 문구 |
| <textarea> | readonly | 변경 불가. 서버 전송 O |
| <textarea> | disabled | 변경 불가. 서버 전송 X. |
| <textarea> | required | 반드시 입력해야하는 란 |
| <textarea> | value | 속성이 아닌 <textarea> </textarea> 사이에 입력 |
예시 #1. 게시글 작성
[VS Code]
<body>
<label for="title">게시글 제목</label><br>
<textarea
name="title"
id="title"
cols="20"
rows="2"
required
placeholder="제목을 입력하세요"></textarea> <br><br>
<label for="content">게시글 내용</label> <br>
<textarea
name="content"
id="content"
cols="30"
rows="10"
required
placeholder="내용을 입력하세요"></textarea>
<br><br>
<button type="submit">저장하기</button>
<button type="reset">지우기</button>
</body>[웹 페이지 출력]
2. 옵션들을 사용하는 태그
| 태그 | 속성 | 설명 |
| <select> | multiple | 다중 선택 가능. 드랍다운 대신 상자로 표시 |
| <select> <optgroup> |
label | 제목 |
| <select> <optgropu> <option> |
value | 서버에 전송할 값 |
| <option> | selected | 선택됨 (checkbox, radio의 checked 같이) |
| <option> | value | 실제로 전송될 값 |
| <input> | id | 해당 input의 고유 ID |
| list | 연결할 <datalist>의 ID | |
| <datalist> | id | datalist의 ID |
| <datalist> <option> |
value | 서버에 전송될 값 |
예시#2. 선택지의 예시
[VS Code]
<body>
<h1>여행갈 도시 선택</h1>
<label for="national">국가 선택</label> <br>
<select name="국가" id="national">
<option value="South Korea">대한민국</option>
<option value="America">미국</option>
<option value="Canada">캐나다</option>
<option value="Japan">일본</option>
</select>
<br><br>
<label for="여행 출발 날짜">여행 출발 날짜</label>
<br>
<input
type="date"
id="여행 출발 날짜"
min="2023-07-03"
max="2023-12-31"
>
<br><br>
<label for="여행 복귀 날짜">여행 복귀 날짜</label>
<br>
<input
type="date"
id="여행 복귀 날짜"
min="2023-07-03"
max="2023-12-31"
>
<br><br>
<label for="인원수">인원 수</label> <br>
<select name="인원수" id="인원수">
<option value="1명">1명</option>
<option value="2명">2명</option>
<option value="3명">3명</option>
<option value="4명">4명</option>
</select>
<br><br>
<label for="여행 계획">여행 계획 작성하기</label> <br>
<textarea
name="여행 계획" id="여행 계획"
cols="30"
rows="10"
placeholder="여행 계획을 작성하세요"></textarea>
<br><br>
<button type="submit">제출하기</button>
<button type="reset">리셋하기</button>
</body>[웹 페이지 출력]
3. 진행도 및 수치를 표현하는 태그
| 태그 | 속성 | 설명 | 비고 |
| <progress> | max | 최대값 | min = 0 이 기본이라 min은 없음 |
| <progress> | value | 진행 수치 | 실제 값 |
| <progress> % </progress> |
% | 바에서 나타내는 수치 % | 입력되지 않아도 value 의 값으로 인식되긴하나 웹으로 보지 않는 사람을 위해 입력함 |
| <meter> | min, max | 최소값, 최대값 | |
| <meter> | low, high | 전체 범위를 3등분하는 두 수치 | |
| <meter> | optimum | meter 범위에서 이상적인 값 | 3개의 구간 중 한 곳에 위치 |
| <meter> | value | 해당 meter의 실제 값 | optimum 숫자와의 차이에 의해 meter가 초록, 노랑, 빨강으로 표시됨. |
'프론트엔드 학습 > HTML' 카테고리의 다른 글
| 12. span, div, tr, td 태그 (0) | 2023.07.03 |
|---|---|
| 11. pre, iframe, kbd, dfn, small 태그 (0) | 2023.07.03 |
| 9. form, fieldset, label, input 입력 (0) | 2023.07.03 |
| 8. HTML - 다른 곳으로 링크 (0) | 2023.07.02 |
| 7. HTML - 표(테이블) 사용하기 (0) | 2023.06.30 |
