○ input type="file" : 파일 첨부가 필요할 때
input type에서 file을 사용하게 되면, 우리가 흔히 PC에서 파일을 업로드할 때 사용하는 첨부파일 기능을 사용할 수 있게 됩니다. 물론, 일반적으로는 해당 파일이 저장되고 서버로 전송되는 과정을 거치게 되지만 여기서는 입력 폼만 간단하게 살펴보도록 하겠습니다.
<!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">
</li>
<li>
<label for="address">주소</label>
<input type="text" id="address">
</li>
<li>
<label for="email">이메일</label>
<input type="email" id="email">
</li>
<li>
<label for="phone">휴대전화번호</label>
<input type="tel" id="phone">
</li>
</ul>
<label><input type="checkbox" value="red">레드</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">선불결제</label>
<label><input type="radio" value="no" name="deliver">착불</label>
<p><b>할인 인증 서류</b></p>
<input type="file" name="attach" id="extrafile">
</fieldset>
<input type="image" src="https://url.kr/toeuxg" alt="login_btn" width="8%">
</form>
</body>
</html>
○ input type="hidden" : 유저에게 보이지 않는 정보
input 태그를 작성하는 것은 대부분 유저에게 무엇인가 값을 입력받아, 그것을 서버로 전송하는 목적으로 사용됩니다. 히든 태그를 사용하게 되면, 해당 폼에서 작성된 정보가 서버로 전송될 때 유저에게 보이지 않는 지정된 값을 보낼 수 있게 됩니다. 속성으로 name을 사용할 수 있고 value를 이용해 특정 값을 전송하는 구조라고 생각하면 됩니다.
<!-- 생략 -->
<label><input type="radio" value="yes" name="deliver">선불결제</label>
<label><input type="radio" value="no" name="deliver">착불</label>
<p><b>할인 인증 서류</b></p>
<input type="file" name="attach" id="extrafile">
</fieldset>
<input type="image" src="https://url.kr/toeuxg" alt="login_btn" width="8%">
<input type="hidden" name="login_page" value="naver_coupon_page">
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 1 (1) | 2023.03.14 |
|---|---|
| 3. 입력 양식 작성(2) - input 태그 7 (0) | 2023.03.12 |
| 3. 입력 양식 작성(2) - input 태그 5 (0) | 2023.03.10 |
| 3. 입력 양식 작성(2) - input 태그 4 (0) | 2023.03.08 |
| 3. 입력 양식 작성(2) - input 태그 3 (0) | 2023.03.08 |
