<input> 요소의 속성

 

 

 

지난 글에서 <input>의 유형에 대해 알아봤는데, 이번 글에서는 <input>을 컨트롤하는 속성에 대해 알아보고자 한다.

 

의 유형

 

 

 

<input>요소의 속성

input에는 다음과 같이 다양한 속성들이 있다.

 

이미지 출처 MDN

 

 

 

 

다양한 속성 중에서도 조금 더 알아볼 속성은 autocomplete과 input:focus이다.

 

사용자가 텍스트를 입력하기 위해 입력 필드를 클릭하면 아래 이미지에서 보이는 것처럼 선이 생기거나, 자동완성을 허용한 상태로 입력 필드가 뜬다.  

---

---

이러한 특성을 제어하고자 한다면 다음의 속성을 사용해보자.

 

1. 자동완성을 없애거나 생성하고 싶다면 autocomplete을,
2. 선을 없애거나 스타일을 주고 싶다면 input:focus를 추가하면 된다.

 

 

 

 autocomplete 

 

autocomplete는 <input>, <textarea>, <select>, <form>에 사용할 수 있으며, on/off로 제어한다.

<input type="text" autocomplete="on">
<input type="text" autocomplete="off">

on은 브라우저의 자동완성을 허용하고 off는 불허용한다.

 

참고: 대부분의 최신 브라우저에서는 autocomplete을 off로 지정하더라도 브라우저가 사용자에게 계정 이름과 비밀번호 저장 여부를 묻는 것을 막을 수 없으며, 저장한 값을 사용해 자동완성하는 것도 막을 수 없다.

 

(더 자세한 내용은 MDN을 참고)

 

 

 

 input:focus 

입력 클릭 했을 때 생기는 선에 대해서는 input에 :focus {}하여 스타일을 줄 수 있다.

input:focus {outline:none;}     // 입력 클릭 했을 때 생기는 테두리 없애기
input:focus {outline:2px solid #d50000;}     // 입력 클릭 했을 때 생기는 테두리에 스타일 주기