HTML autofocus와 input, button, textarea, select 결합


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>