• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
22/18
목록
찾아주셔서 감사합니다. Since 2012