DEVELOPE/HTML-HTML5

html5 input tag autofocus

소찾나 2017. 11. 30. 08:37

html5 input tag autofocus

html5 input tag autofocus



html5 에서 input 태그중 새롭게 추가된 기능중에  지금까지는 자바스크립트로 처리하여야 했던 기능을


간단한 속성추가로 그 기능을 대신하게 할 수 있도록 추가되었다. 그중에 autofocus


속성을 알아보자.




1 input 태그의 autofocus 속성


페이지가 오픈되자마자 입력필드중 원하는 필드에 마우스 커서가 바로위치하여 사용하기 편리하도록 처리 할 수 있다. 기존엔


이렇게 처리하려면 자바스크립트 처리 하여야 하였으나 지금은 간단한 autofocus 속성하나만 추가하여 쉽게 해결 할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<title>html5 테스트</title>
<style>
.time-test { 
    
     width:500px;
     height:500px;
     background-color:#008899;
     color:#ffffff;
     text-align:center;
}
 
 
</style>
</head>
</head>
<body>
 
<div class="time-test">
<form name="test-form" method="post" action="<?=$PHP_SELF?>">                                    
 
<li>
<label>EMAIL</label>
<p><input type="email" autofocus></p>
</li>
<li>
<label>URL</label>
<p><input type="url"></p>
</li>
<input type="submit">
</form>
</div>
</body>
</html>
cs