Html5 ile gelen Odaklanma özelliği
iyi günler arkadaşlar bu yazımda html5 ile gelen odaklanma özelliğinden bahsetmek istiyorum. bazı sitelerde dikkatinizi çekmiştir belki bilmiyotum ama işte çeksin artık neyse :) üye ol sayfası veya giriş yap sayfası gibi form bulunan sayfalara girdiğinizde formun ilk elemanı seçili olarak açılır yani diyelimki giriş yap sayfasındayız imlecimiz kullanıcı adını gireceğimiz textbox umuzda seçili olarak açılır şimdi bizde o tarz bir uygulama yapacağız.
uygulamamızı yapabilmemiz için html 5 ile gelen autofocus özelliğini kullanacağız.
Kodlarımıza Başlayalım.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
input{
text-indent:5px;
border-radius:3px;
border:1px solid #ddd;
}
body {
color:#555;
font:14px arial;
}
</style>
</head>
<body>
<div style="width:1000px;margin:0 auto;">
<table align="center" style="border:2px solid #ddd;padding:5px;border-radius:3px;">
<tr>
<td>Adınız</td>
<td>:</td>
<td><input type="text" name="ad" autofocus="true" /></td> <!-- sayfa açıldığında seçili olacak -->
</tr>
<tr>
<td>Mail Adresiniz</td>
<td>:</td>
<td><input type="email" name="mail" /></td>
</tr>
<tr>
<td>Telefon Numaranız</td>
<td>:</td>
<td><input type="tel" name="telefon" /></td>
</tr>
</table>
</div>
</body>
</html>
Örneğimizin görüntüsü
Gördüğünüz Gibi html5 i destekleyen tarayıcımızda açtığımızda formumuzda ilk formun seçili olduğunu göreceğiz
