지난 아티클부터 input type 종류별 특성에 대해서 하나씩 살펴보고 있습니다. 계속해서 다양한 input type에 대해서 살펴보도록 하겠습니다.
○ type="search" / "url" / "email" / "tel" : 입력 유형 자동 인식타입
위 속성들의 경우, HTML5 이전까지 각 입력값의 종류를 직접 확인하는 등 텍스트 필드에서 구분하기 어려웠던 속성들입니다. HTML5에 들어서는 intput type을 명시해 주면 브라우저나 작동 환경에 따라서 다소 차이는 있지만, 해당 필드에서 입력되는 값이 어떤 유형인지 자동으로 인식해 분류할 수 있게 되었습니다.
- search : 일반적인 텍스트 필드처럼 보이지만, '검색'을 위한 텍스트 필드로 인식됩니다. 자동으로 X 버튼이 노출됩니다.
- url : 말 그대로 웹 주소를 입력하는 필드로 인식합니다.
- email : 이메일 주소 입력 필드입니다. 형식을 검사하기도 합니다.
- tel : 전화번호를 나타냅니다. 형식 검사는 어렵지만 모바일에서 키패드 출력 / 전화걸기가 가능합니다.
<!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>
</fieldset>
</form>
</body>
</html>
○ type="checkbox" / "radio" : 체크박스와 라디오 버튼
체크박스(checkbox)와 라디오 버튼(radio)을 각각 설정합니다. 잘 아시겠지만, 다중 선택이 가능한 체크박스와 단일 선택만 가능한 라디오 버튼을 생성하여 선택하도록 합니다. 이 두 개의 타입의 경우, 특정 항목을 선택한 것에 대한 처리가 필요하기 때문에 다음 속성들이 사용됩니다.
- value : 해당 체크박스나 라디오 버튼이 선택되었다는 것을 서버에 전달할 때, 어떤 특정 값을 전달할지에 대해서 지정합니다. 필수 속성이며, 영문 or 숫자여야 합니다.
- checked : 일반적으로 체크박스나 라디오 버튼은 디폴트로 미선택된 상태로 노출됩니다. 그러나 특정 요소를 선택된 상태로 기본 지정하고 싶다면 사용하는 속성입니다. 별도의 속성 값 없이 넣어주면 됩니다.
- name : 라디오 버튼에서 사용하며, 이는 서버에서 라디오 버튼 등 폼 요소 컨트롤 시 사용됩니다. 라디오 버튼에서 '단 하나의 선택지만' 선택할 수 있게 하려면, 동일한 name 속성으로 각각의 요소를 지정해 줘야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>주문 옵션 선택</legend>
<p><b>선택 상품의 옵션을 골라주세요</b></p>
<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>
</fieldset>
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(2) - input 태그 4 (0) | 2023.03.08 |
|---|---|
| 3. 입력 양식 작성(2) - input 태그 3 (0) | 2023.03.08 |
| 3. 입력 양식 작성(2) - input 태그 1 (0) | 2023.03.06 |
| 3. 입력 양식 작성(1) - 기본 form 태그 (0) | 2023.03.05 |
| 2. 내용 입력하기(6) - 하이퍼링크 삽입 (0) | 2023.03.03 |
