이번 시간에는 잠시 분위기를 환기하기 위해, 간단하게 텍스트용 input type에서 사용하게 되는 유용한 속성을 살펴보려고 합니다. 바로 autofocus / placeholder / readonly / required입니다. 이 속성들은 우리가 흔히 웹페이지나 앱에서 친숙하게 사용하는 기능들이라 금방 이해가 가실 것입니다. 필수적인 요소임에도, 사용법은 간단하기 때문에 빠르게 훑고 예제를 살펴보도록 하겠습니다.
우선 autofocus는 어떤 텍스트 입력 input type이 있는 페이지를 열었을 때, 유저가 클릭하지 않더라도 해당 폼에 커서가 자동으로 클릭되어 있도록 지정하는 속성입니다.
placeholder는 우리가 앱이나 홈페이지에서 항상 접하는 것들입니다. 텍스트 입력 란에 '힌트'를 표시하는 속성인데, 텍스트 필드에 '아이디를 입력하세요' 또는 '숫자만 입력해 주세요'와 같은 안내 텍스트가 나타나는 기능입니다.
readonly는 말 그대로 해당 텍스트 필드에 어떤 값을 표시하되, 유저가 입력할 수 없도록 만드는 속성입니다.
required 역시 익숙한 속성입니다. 바로 여러 가지 입력 필드가 있을 경우에 submit 전에 필수적으로 작성해야 하는 필드를 의미하게 됩니다. 만일 이 필드가 채워지지 않은 상태가 되면 오류 메시지까지 브라우저에서 자동으로 출력됩니다.
이제 우리가 앞서 만들었던 폼을 기준으로 해당 속성들을 하나씩 적용해 보도록 하겠습니다.
<!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><b>할인 인증 서류</b></p>
<input type="file" name="attach" id="extrafile">
</fieldset>
<input type="image" src="https://url.kr/toeuxg" alt="login_btn" width="150">
<input type="hidden" name="login_page" value="naver_coupon_page">
</form>
</body>
</html>
'Programming > HTML+CSS' 카테고리의 다른 글
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 2 (0) | 2023.03.16 |
|---|---|
| 3. 입력 양식 작성(3) - 다양한 데이터, 텍스트 입력 태그 1 (1) | 2023.03.14 |
| 3. 입력 양식 작성(2) - input 태그 6 (0) | 2023.03.12 |
| 3. 입력 양식 작성(2) - input 태그 5 (0) | 2023.03.10 |
| 3. 입력 양식 작성(2) - input 태그 4 (0) | 2023.03.08 |
