input 태그 속성 정리(HTML)

autofocus 속성 

- 페이지를 열자마자 autofocus 속성이 있는 요소에 마우스 커서를 표시한다. 

- 전에는 자바스크립트로 구현해야 했다면 HTML5부터 autofocus 속성을 이용해 구현할 수 있다.

 

placeholder 속성

- 텍스트를 입력할 때 무슨 내용을 입력하는지 도움 받을 수 있도록 힌트를 표시한다. 필드를 클릭하면 내용이 사라진다.

 

readonly 속성

- 사용자는 내용을 수정하거나 입력하지 못하고 읽을수만 있게 한다.

 

required 속성

- submit 버튼을 클릭하면 required 가 있으면 필수요소로 내용이 채워져 있어야 한다. 내용이 비어있으면 전송이 안된다.

 

min,max,step 속성

- input 태그의 type이 date, datetime, datetime-local, month, week, time, number, range일 경우 사용할 수 있는 속성이다.

- min은 최솟값 max는 최댓값을 말한다. step은 min과 max 사이에서 숫자의 간격을 말한다.

<form>
	<h2>placeholder, autofocus, required</h2>
	<input type="text" placeholder="아이디를 입력해주세요." autofocus required>
    
    <h2>readonly</h2>
    <input type="text" value="readonly로 수정 불가" readonly>
    
    <h2>min, max, step</h2>
    <input type="number" value="15" min="15" max="60" step="5">
    <input type="submit" value="전송">
</form>

placeholder, autofocus, required

readonly

min, max, step