input 태그 속성

● autofocus

페이지가 로드될 때 자동으로 포커스(커서)가 <input> 요소로 이동됨을 명시한다.

<input id="userid" name="userid" type="text" required autofocus>

 

 

● readonly

<input> 요소의 입력 필드가 읽기 전용임을 명시한다.

입력필드는 사용자가 수정할 수 없고,

해당 내용을 하이라이트하거나 복사할 수 는 있다.

특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고,

특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값이 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있다.

disabled 속성이 명시된 입력 필드의 값은 서버로 제출되지 않지만,

readonly 속성이 명시된 입력 필드의 값은 서버로 제출된다.

<input id="level" name="level" type="text" readonly value="준회원">

 

 

● value

<input> 태그 요소의 초깃값을 명시한다.

<input> 태그 요소의 type 속성값에 따라 다른 용도로 사용된다.

- "button", "reset", "submit" : 버튼 내의 텍스트 정의

- "hidden", "password", "text" : 입력 필드의 초깃값 정의

- "checkbox", "image", "radio" : 해당 입력 필드 선택 시 서버로 제출되는 값 정의

- "file" : value 속성 사용할 수 없다.

<input id="level" name="level" type="text" readonly value="준회원">

● autocomplete

- <input> 요소에서 자동 완성 기능을 사용할지 여부를 명시한다

- on  :  브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여준다

- 사용가능한 type 속성 : color, datepickers, email, password, range, search, tel, text

<input id="email" name="email" type="email" placeholder="abcd@domain.com" required autocomplete="off"/>

 

 

 

 

 

 

 

 

---

refer to 

https://www.tcpschool.com/