HTML autofocus
autofocus는 <form> 태그와 같이 사용되는 속성입니다. 키보드 커서가 자동으로 autofocus 속성이 삽입된 태그로 이동됩니다.
웹사이트나 앱에서 회원가입이나 로그인을 하다보면 웹페이지에 접속하자 마자 입력창에 커서가 깜빡이는 것을 볼 수 있는 것이 좋은 예가 될 수 있습니다.
<input>, <button>, <textarea>, <select> 태그와 같이 사용할 수 있습니다.
autofocus 유의점
autofocus 속성은 해당 웹페이지에서 단 한 번만 나올 수 있습니다.
<input> + autofocus
text + autofocus
autofocus가 적힌 text 속성 요소에 자동 커서가 삽입됩니다.
<label for="idd">이름 : </label>
<input type="text" autofocus placeholder="이름을 입력하세요." id="idd">
<br>
<label for="age">나이 : </label>
<input type="text" placeholder="나이를 입력하세요." id="age">
<br>
<label for="sex">성별 : </label>
<input type="text" placeholder="성별을 입력하세요." id="sex">password
password인 두번째 줄에 키보드 커서가 생깁니다. 현재 페이지에서 아래 예시에서 모두 초점이 생기지 않는 이유는 autofocus는 웹페이지당 한 번만 적용될 수 있기 때문입니다. 아래 예시를 실행해보려면 코드를 자신의 웹페이지에서 복사해서 실행해봐야 합니다.
<label for="idd">아이디 : </label>
<input type="text" id="idd" placeholder="아이디를 입력하세요.">
<br>
<label for="pw">비밀번호 : </label>
<input type="password" placeholder="비밀번호를 입력하세요." id="pw" autofocus>
<br>
<label for="num">인증번호 : </label>
<input type="text" id="num" placeholder="인증번호를 입력하세요.">submit
autofocus가 적힌 submit 요소에 초점이 생깁니다.
<input type="submit" value="A" autofocus>
<br>
<input type="submit" value="B">
<br>
<input type="submit" value="C">button 속성값
autofocus가 삽입된 button 속성값 부분에 푸른 박스가 가장자리에 생깁니다.
<input type="button" value="a" autofocus>
<br>
<input type="button" value="b">
<br>
<input type="button" value="c">radio
radio 선택지에 autofocus를 삽입하면 파란 원으로 초점이 맞춰져있습니다.
<input type="radio" autofocus>
<br>
<input type="radio">
<br>
<input type="radio">
<br>checkbox
checkbox 선택지도 autofocus를 삽입한 체크박스에 미리 파란 박스가 있습니다. 물론 미리 체크 표시를 하는 속성과는 다른 기능입니다.
<input type="checkbox" autofocus>
<br>
<input type="checkbox">
<br>
<input type="checkbox">file
file 제출 속성값에 autofocus를 사용하면 파란 박스가 외곽에 생깁니다.
<input type="file" autofocus>image
image 업로드 속성값에 autofocus를 삽입하면 파란 박스가 바깥에 생깁니다.
<input type="image" autofocus>reset
초기화 reset 버튼은 자동 초점 삽입을 하면 파란색 박스가 바깥에 생깁니다.
<input type="reset" autofocus><button> + autofocus
<button> 태그에 속성이 삽입된 곳에 자동 초점으로 파란 박스가 가장자리에 생성됩니다.
<button type="button" autofocus>하나</button>
<br>
<br>
<button type="button">둘</button>
<br>
<br>
<button type="button">셋</button><textarea> + autofocus
textarea에서도 자동 초점 기능을 사용할 수 있습니다.
<textarea cols="30" rows="10" autofocus>써보세요.!</textarea><select> + autofocus
<select> 및 <option> 태그 조합에서는 <select> 태그에 autofocus를 속성을 달 경우 미리 선택되어 있습니다.
<select autofocus>
<option>만두</option>
<option>튀김</option>
<option>순대</option>
<option>어묵</option>
<option>라면</option>
</select>