[HTML] input의 다양한 속성

 

속성	설명
required	<input type="text" required="required">​ <form> 태그안에서 빈값으로 전송(submit) 버튼을 눌렀을 때 경고창을 띄운다.
placeholder	<input type="tel" placeholder="010-1111-1234"> input 박스안에 미리 입력형식에 대한 힌트를 제공한다.
autocomplete	<input type="text" autocomplete="on"> value는 on/off 2가지이며, 자동완성 기능 사용여부를 결정한다.
list	<input type="text" list="subjects" /> <datalist id="subjects"> ... </datalist> 텍스트 필드에 내용 입력 시 미리 만들어 놓은 리스트 항목이 자동완성 기능처럼 나타난다. list 속성의 value와 <datalist>의 id 속성의 value를 같은 값으로 설정하면 된다.
autofocus	페이지 로드 시, 입력필드에 자동으로 커서가 이동된다.
disabled, readonly	둘 다 input 요소의 내용을 수정하거나 선택할 수 없도록 비활성화 상태로 만든다. disabled는 어떤 조건에 만족하지 않았을 때 input 요소를 비활성화하는데 사용된다. readonly는 input 요소의 값이 변경되지 않은 채 form 전송이 되어야하는 곳에 사용된다.
pattern	<input type="tel" pattern="\d{3}-\d{3,4}-\{4}" title="지정된 형식대로 입력해주세요."> 입력값과 정규식이 일치해야만 유효성에 통과할 수 있도록 필드의 값을 체크하는 유효성 검사 속성이다. title은 해당 요소의 툴팁이다.
multiple	여러개의 이메일을 ','로 입력하거나 다중의 파일을 선택할 수 있도록 해주는 속성이다.

 

 

출처

김광수, 조혜경, 정인용, 실전프로젝트 반응형 웹 퍼블리싱 (아이콕스, 2020)

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.