728x90
반응형
input요소의 주요 속성
autocomplete를 위해 사용되는 표준 name값
- name : 사람의 전체이름
- email : 이메일 주소
- username : 사용자 계정
- new-password : 새로운 비밀번호
- current-password : 사용자의 현재 비밀번호
- one-time-code : 사용지를 인증할 떄 사용하는 1회성 코드
- organization-title : 직위
- organization : 회사 또는 조직명
- country : 국가 코드
- country-name : 국가 이름
- postal-code : 우편번호
- address-level1 : 첫번째 행정구역, 한국의 경우 특별시/광역시/도
- address-level2 : 두번쨰 행정구역, 한국의 경우는 시/구
- address-level3 : 세번째 행정구역
- address-level4 : 네번쨰 행정구역
- street-address : 도로 주소
- cc-name : 신용카드 등 지불수단 소유자의 전체 이름
- cc-family-name : 신용카드 등 지불 수단 소우자의 성
- cc-given-name : 신용카드 등 지불수단 소유자의 이름
- cc-additional-name : 신용카드 등 지불수단 소유자의 가운데 이름
- cc-number : 신용카드 번호, 계좌번호 등 지불수단 식별 번호
- cc-exp : 지불수단 유효기간, 일반적으로는 MM/Y 또는 MM/YYYY
- cc-exp-month : 지불수단 유효기간의 월
- cc-exp-year : 지불수단 유효기간의 년도
- cc-csc : 지불수단 보안코드, 신용카드의 경우 뒷면의 세자리 수
- cc-type : 지불수단 유형, Visa, Mastercard 등
- transaction-currency : 거래에 사용할 통화 단위
- transaction-amount : 결제 금액, 거래
- language : 선호 언어
- bday : 생년월일
- bday-day : 생년월일 중 일
- bday-month : 생년월일 중 월
- bday-year : 생년월일 중 년도
- sex : 성별
- tel : 국가 코드를 포함한 전체 전화번호
- tel-country-code : 국가코드, 대한민국은 82
- tel-national : 전체 전화번호에서 국가코드를 제외한 나머지 전화번호
- tel-area-code : 지역 번호
- tel-local : 국가코드와 지역번호를 제외한 전화번호
- url : 웹사이트 주
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<div>
<!-- 화면에 반영된 채로 시작 -->
<input type="text" name="" id="" value="ABC" />
<!-- 화면에 없음 -->
<input type="text" name="" id="" value="" />
</div>
<div>
<!-- 수정 불가, 읽기만 -->
<input type="text" name="" id="" value="ABC" readonly />
</div>
<div>
<!-- form 태그를 통해 정보 전달이 되지않음 -->
<input type="text" name="" id="" value="ABC" disabled />
</div>
<button type="submit">저장</button>
</form>
<div>
<!-- 자릿수가 정해져있는 경우 -->
<input type="text" name="" id="" maxlength="4" />
</div>
<div>
<!-- input값에 대한 가이드를 줌 -->
<input
type="tel"
name=""
id=""
style="width: 100%"
placeholder="하이픈(-) 없이 숫자만 입력하세요. 예)01011112222"
/>
</div>
<form action="">
<!-- 필수 입력 값을 모두 채우게 도와줌 -->
<label for="">아이디</label>
<input
type="text"
name=""
id="userId"
autocomplete="on"
autofocus="on"
required
/>
<label for="">비밀번호</label>
<input type="text" name="" id="userPass" required />
<button type="submit">저장</button>
</form>
<div>
<!-- 입력했던 값들이 name값을 통해 자동완성 도와줌 // 표준 가이드가 존재 -->
<input type="text" name="username" id="" autocomplete="on" />
</div>
</body>
</html>728x90
반응형
'HTML & CSS' 카테고리의 다른 글
| CSS 기초 (2) | 2023.11.06 |
|---|---|
| form 요소(2) (0) | 2023.10.22 |
| form 요소 (2) | 2023.10.12 |
| 목록 태그, 표 태그 (0) | 2023.10.03 |
| 의미에 맞는 태그 (2) | 2023.10.02 |