지금까지 살펴본 기본적인 input 태그들은 어느 정도 마무리 되었습니다. 지금부터는 input 이외에 단독으로 사용되는 몇 가지 입력 태그에 대해서 살펴보도록 하겠습니다.
○ <textarea> : 여러 줄의 텍스트 입력 폼
가입 양식에서 여러 줄의 요청사항이나, 메모, 하고 싶은 말 등을 입력받기 위해서는 기존 input type에서 제공하는 텍스트 입력 방식으로는 공간이 부족할 것입니다. 여러 줄의 텍스트를 자유롭게 입력받기 위해서는 <textarea></textarea> 태그를 사용해야 합니다.
<textarea> 태그에서 사용되는 속성은 대표적으로 cols, rows가 있습니다. 이는 이름에서 유추할 수 있다시피, cols를 통해 가로의 길이를 지정하고 rows로 입력 필드 세로(줄)의 길이를 지정할 수 있습니다. cols의 경우 입력하는 숫자만큼의 영문 텍스트를 표시하는 가로길이가 설정 가능합니다. rows의 경우 세로의 길이를 몇 줄의 텍스트를 입력할 수 있는지를 기준으로 설정합니다. 아주 디테일한 px 단위 크기를 지정할 수는 없으니, 적당한 값을 입력해 주면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>배송정보 리스트</legend>
<ul>
<li>
<label for="username">이름</label>
<input type="text" id="username" required placeholder="실명을 작성해주세요">
</li>
<li>
<label for="address">주소</label>
<input type="text" id="address" required placeholder="도로명 주소를 작성해주세요">
</li>
<li>
<label for="email">이메일</label>
<input type="email" id="email"required placeholder="@를 함께 입력해주세요">
</li>
<li>
<label for="phone">휴대전화번호</label>
<input type="tel" id="phone" required placeholder="숫자만 입력해주세요">
</li>
<li>
<label>패키지 종류<input type="text" name="product" id="product_name" value="한정판만 주문 가능" readonly></label>
</li>
</ul>
<label><input type="checkbox" value="red" checked>레드</label>
<label><input type="checkbox" value="yellow">옐로우</label>
<label><input type="checkbox" value="white">화이트</label>
<label><input type="checkbox" value="grey">그레이</label>
<p><b>배송비 선택</b></p>
<label><input type="radio" value="yes" name="deliver" checked>선불결제</label>
<label><input type="radio" value="no" name="deliver">착불</label>
<p><label for="memo"><b>기타 요청사항</b></label></p>
<textarea name="memo_field" id="memo" cols="30" rows="10" placeholder="배송 요청사항을 입력하세요"></textarea>
<p><b>할인 인증 서류</b></p>
<p><input type="file" name="attach" id="extrafile"></p>
</fieldset>
<input type="image" src="https://url.kr/toeuxg" alt="login_btn" width="100">
<input type="hidden" name="login_page" value="naver_coupon_page">
</form>
</body>
</html>
○ <select>, <option> : 드롭다운 목록 생성
유저에게 선택할 리스트를 지정해 보여주는 드롭다운 메뉴는 <select>와 <option> 두 개의 태그를 함께 사용해 생성합니다. <select></select> 태그를 사용해 드롭다운 메뉴를 생성해주고, <select>태그 하위에 <option> 태그를 이용해 생성합니다. 기본 형태는 다음과 같습니다.
<select>
<option value="전달값" selected>내용</option>
<option value="전달값">내용</option>
</select>
<option> 태그의 속성 value에 입력된 전달 값이, 해당 목록을 선택했을 때 서버로 전송되는 값이며, selected 속성을 입력할 경우 드롭다운 메뉴에 기본적으로 선택된 항목으로 출력됩니다.
<select> 태그에도 적용할 수 있는 속성이 있습니다. size는 화면에 표시할 드롭다운 항목의 개수를 지정하며, multiple 속성을 통해 드롭다운 목록에서 복수로 선택할 수 있는 항목의 개수를 지정할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>배송정보 리스트</legend>
<ul>
<li>
<label for="username">이름</label>
<input type="text" id="username" required placeholder="실명을 작성해주세요">
</li>
<li>
<label for="address">주소</label>
<input type="text" id="address" required placeholder="도로명 주소를 작성해주세요">
</li>
<li>
<label for="email">이메일</label>
<input type="email" id="email"required placeholder="@를 함께 입력해주세요">
</li>
<li>
<label for="phone">휴대전화번호</label>
<input type="tel" id="phone" required placeholder="숫자만 입력해주세요">
</li>
<li>
<label>패키지 종류<input type="text" name="product" id="product_name" value="한정판만 주문 가능" readonly></label>
</li>
</ul>
<label><input type="checkbox" value="red" checked>레드</label>
<label><input type="checkbox" value="yellow">옐로우</label>
<label><input type="checkbox" value="white">화이트</label>
<label><input type="checkbox" value="grey">그레이</label>
<p><b>배송비 선택</b></p>
<label><input type="radio" value="yes" name="deliver" checked>선불결제</label>
<label><input type="radio" value="no" name="deliver">착불</label>
<p><label for="memo"><b>기타 요청사항</b></label></p>
<textarea name="memo_field" id="memo" cols="30" rows="10" placeholder="배송 요청사항을 입력하세요"></textarea>
<p><b><label for="dropdown">사은품 선택</label></b></p>
<select name="gift" id="dropdown">
<option value="gift1">마우스패드</option>
<option value="gift2">캐릭터 볼펜</option>
<option value="gift3">인형</option>
<option value="gift4">미니 가습기</option>
<option value="gift5">스티커 세트</option>
</select>
<p><b>할인 인증 서류</b></p>
<p><input type="file" name="attach" id="extrafile"></p>
</fieldset>
<input type="image" src="https://url.kr/toeuxg" alt="login_btn" width="100">
<input type="hidden" name="login_page" value="naver_coupon_page">
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| [CSS] 1. CSS의 기본 개념(1) - CSS란? (0) | 2023.03.19 |
|---|---|
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 2 (0) | 2023.03.16 |
| 3. 입력 양식 작성(2) - input 태그 7 (0) | 2023.03.12 |
| 3. 입력 양식 작성(2) - input 태그 6 (0) | 2023.03.12 |
| 3. 입력 양식 작성(2) - input 태그 5 (0) | 2023.03.10 |
