[attribute] HTML - autofocus 속성 - 포커스 자동 여부 지정 (= autofocus속성 = 오토포커스속성)

1. autofocus 예제 - <input> 경우
2. autofocus 정의
3. autofocus 구문
4. autofocus 예제 - <button> 경우
5. autofocus 예제 - <select> 경우
6. autofocus 예제 - <textarea> 경우

autofocus 예제 - <input> 경우

 

<form action="/action_page.php">

  <label for="name">이름:</label>

  <input type="text" id="name" name="name" autofocus><br>

  <label for="nick">별명:</label>

  <input type="text" id="nick" name="nick"><br>

  <input type="submit">

</form>

 

autofocus 정의

 

페이지 로드 시, 해당 요소에 포커스 줄지 여부 지정하는 참거짓 속성.

 

---

 

1. autofocus 사용 가능 태그

<button>, <input>, <select>, <textarea>

 

2.

autofocus 속성 갖는 요소는 검고 굵은 테두리 갖음.

 

3.

IE10 이상 주요 최신 브라우저 모두 지원.

단, Firefox 브라우저는 <select> 태그 지원 X

 

autofocus 구문

 

• <button type="button" autofocus>
• <input autofocus>
• <select autofocus>
• <textarea autofocus>

 

---

[속성값]

 

없음.

 

autofocus 예제 - <button> 경우

 

<button type="button" autofocus onclick="alert('홈짱닷컴 Homzzang.com')">클릭</button>

 

autofocus 예제 - <select> 경우

 

<form action="/action_page.php">

  <label for="hz">좋아하는 언어:</label>

  <select name="hz" id="hz" autofocus>

    <option value="html">HTML</option>

    <option value="css">CSS</option>

    <option value="js">JS</option>

  </select>

  <br><br>

  <input type="submit" value="확인">

</form>

 

autofocus 예제 - <textarea> 경우

 

<textarea rows="3" cols="30" autofocus>

홈짱닷컴 Homzzang.com (홈페이지 제작관리 강의)

</textarea>