HTML5 Girdi (Input) Elemanları
HTML5 Girdi (Input) Elemanları
Bu bölümde HTML5'in girdi (input) elemanlarını tanıyacağız. <input> etiketi, <form> ve </form> etiketleri arasında yer alır ve kullanıcının bilgi girişi yapacağı alanları tanımlar.
HTML5, aşağıda verilen yeni girdi tiplerini sunar:
- color: <input> alanı için renk tanımlamakta kullanılır.
- date: Kullanıcıya bir takvim içinden zaman işaretleme olanağı sağlar.
- datetime: Kullanıcıya tarih ve zaman seçme olanağı sağlar.
- datetime-local
- email: Bir e-posta alanı olması gereken giriş alanları için kullanılır.
- month: Kullanıcıya yıl ve ay seçme olanağı sağlar.
- number: Sadece sayısal bilgi girişleri için kullanılır. Girilecek sayı için sınırlar getirebilirsiniz.
- Örneğin aşağıdaki <input> elemanında sayı için alt sınır 0 ve üst sınır 100 olarak tanımlanmıştır:
- <input type="number" min="0" max="100"/>
- range: Sayılardan oluşan bir aralık belirler. number parametresine benzer şekilde kullanılır.
- search: Arama alanları için kullanılır.
- tel: Telefon numarası girmek için kullanılabilecek bir alan tanımlar.
- time: Yukarı/aşağı düğmeleriyle zaman bilgisi girmek için kullanılır.
- url: Bir URL adresi içermesi gereken alanlar için kullanılır.
- week: Kullanıcıya bir yıl ve hafta seçme olanağı sağlar.
<html>
</head>
<body>
<div id="temas-form">
<form id="temas" method="post" action="">
<fieldset>
<label for="ad">ad</label>
<input type="text" ad="ad">
<label for="email">E-mail</label>
<input type="email" ad="email">
<label for="telefon">telefon</label>
<input type="text" ad="telefon">
<label for="website">Website</label>
<input type="url" ad="url">
<label for="mesaj">Soru/CYorum</label>
<textarea ad="mesaj"></textarea>
<input type="submit" ad="submit" id="submit" value="Mesaj Gonder" />
</fieldset>
</form>
</body>
</html>
Ekran Çıktısı
<input> etiketinin yeni özellikleri
- autofocus: Belirli bir form alanını otomatik olarak ilgi alanı haline getirir.
- placeholder: Kullanıcıya, alana hangi tip bilgi girileceği konusunda yol gösterir.
- required: İstemci tarafındaki değer doğrulama işlemleri için kullanılır.
- form: <input> elemanının ait olduğu formu gösterir.
- height ve width: Yükseklik ve genişlik bilgileridir.
- pattern: <input> elemanının değerinin kontrol edildiği bir düzenli ifade (regular expression) tanımlar.
<html>
<input type="text" autocomplete ="off">
<input type="text" autofocus>
<input type="submit" formaction="save" value="SAKLA">
<input type="submit" formenctype="application/x-www-form-urlencoded" value="SAKLA">
<input type="submit" formmethod="POST" value=" POST GONDER">
<input type="submit" formnovalidate value="DOGRULAMA">
<input type="submit" formtarget="_blank" value="TAB/WINDOW">
<input type="text" list="characters">
<input type="range" max="100">
<input type="range" min="0">
<input type="file" multiple>
<form action="save" method="GET" novalidate>
<input type="text" pattern="[A-Z]*">
<input type="placeholder" name="AD" placeholder="İsminizi giriniz">
<input type="text" readonly>
<input type="text" required>
<input type="text" spellcheck="true">
<input type="number" step="3">
</html>
Ekran Çıktısı
Input elemanındaki kısıtlamalar
- disabled: Bir girdi alanının kullanılabilir olup olmadığını belirler.
- max: Bir girdi alanı için olabilecek en büyük değeri belirler.
- maxlength: Bir girdi alanı için girilebilecek en fazla karakter sayısını belirler.
- min: Girdi alanından girilebilecek en küçük değeri belirler.
- pattern: Girdi değerini kontrol eden bir düzenli ifade (regular expression) belirler.
- readonly: Bir girdi alanını sadece okunabilir (readonly) olarak tanımlar.
- required: Girdi alanının zorunlu (mutlaka doldurulması gereken) olduğunu tanımlar.
- size: Girdi alanının genişliğini (karakter sayısı türünde) belirler.
- step: Girdi alanı için geçerli adım aralıklarını belirler.
- value: Bir girdi alanı için varsayılan değeri belirler.
Autocomplete özelliği
Autocomplete özelliği, bir form ya da girdi alanının otomatik olarak doldurulup doldurulmayacağını belirler. Eğer autocomplete açıksa, tarayıcı kullanıcının önceden belirlediği değerleri kullanarak ilgili alanları otomatik olarak doldurur. autocomplete özelliği <form> ve text, search, url, tel, email, password, datepickers, range, ve color gibi <input> değerleriyle çalışır.
<body>
<form autocomplete="off">
AD: <input type="text" name="ad"><br>
SOYAD: <input type="text" name="soyad"><br>
E-mail:<input type="email" name="email" <br>
<input type="submit">
</form>
<p>FORMUNU DOLDURUNUZ....</p>
</body>
</html>
Ekran Çıktısı;
Novalidate Özelliği
Novalidate özelliği, mantıksal (boolean) bir özelliktir. Mevcutsa, sunulan verinin geçerlilik kontrolünün yapılıp yapılmayacağını belirler
Autofocus Özelliği
Autofocus özelliği, mantıksal (boolean) tipte bir özelliktir. Mevcutsa, <input> elemanını web sayfası yüklenir yüklenmez ilgi odağı (focus) haline getirir.
Form Özelliği
Form özelliği, <input> etiketi içinde başka bir form tanımlanmasına izin verir.
Formaction Özelliği
Formaction özelliği, form gönderildiği zaman, girdi (input) kontrolünü sağlayacak olan dosyanın URL'sini belirler.
Formmethod Özelliği
Formmethod özelliği, form verisini URL adresine gönderirken kullanılacak olan HTTP metodunu tanımlar. formmethod özelliği, <form> elemanının metot özelliğine gore önceliklidir. formmethod özelliği, type="submit" ve type="image" ile birlikte kullanılabilir.
Formnovalidate Özelliği
Novalidate özelliği, mantıksal bir özelliktir. Eğer kullanılmışsa <input> elemanıyla girilecek bilgilerin tip kontrolünün yapılmamasını sağlar. formnovalidate özelliği, <form> elemanının novalidate özelliğine göre önceliklidir. formnovalidate özelliği, type="submit" ile birlikte kullanılabilir.
"Kontrol Etmeden Gönder" düğmesini tıklasaydınız, hata kontrolü yapılmayacak ve girilen bilgi aynen gönderilecekti.
Formtarget Özelliği
Formtarget özelliği, form sunulduktan sonra alınacak cevabın nerede görüntüleneceğini gösteren bir isim ya da anahtar sözcük belirler. <form> elemanının target özelliğine göre önceliği vardır.
List Özelliği
List özelliği, <input> elemanı için önceden tanımlanmış seçenekler içeren bir <datalist> elemanına referans verir.
Min ve Max Özellikleri
Min ve max özellikleri bir <input> elemanı için izin verilen en küçük ve en büyük değerleri belirler. min ve max özellikleri; number, range, date, datetime, datetime-local, month, time ve week türü verilerle birlikte kullanılır.
Multiple özelliği
Multiple özelliği mantıksal bir özelliktir; eğer kullanılmışsa, kullanıcının <input> elemanı ile birden çok değer girmeye izin verdiğini gösterir. Çoğu zaman email ve file tipi verilerle kullanılır.
Pattern Özelliği
Pattern özelliği, düzenli ifade (regular expression) tipinde bir veri içerir. <input> elemanındaki değer bu ifadeye göre kontrol edilir. Genellikle pattern özelliği; text, search, url, tel, email, ve password tipi bilgilerle birlikte kullanılır.
Placeholder Özelliği
Placeholder özelliği, girdi alanı için gelecek değeri tanımlayan kısa bir dipnot bilgisi vermek için kullanılır (örnek değer ya da beklenen format gibi). Genellikle placeholder özelliği; text, search, url, tel, email, ve password gibi alanlarla birlikte kullanılır.
Required Özelliği
Required özelliği, mantıksal türde bir özelliktir. Kullanılmışsa, form gönderilmeden önce girdi (input) alanının mutlaka doldurulmuş olmasını zorunlu kılar. Çoğunlukla required özelliği, text, search, url, tel, email, password, date pickers, number, checkbox, radio, ve file özellikleriyle birlikte kullanılır.
Step Özelliği
Step özelliği, bir <input> elemanı için geçerli sayı aralığını belirler. Örneğin, step=2 olarak belirtilmişse, …-4,-2,0,2 …. gibi sayılar geçerli sayılar olacaktır. step özelliği, daha önce anlattığımız min ve max özellikleriyle birlikte kullanılır. Ayrıca, number, range, date, datetime, datetime-local, month, time ve week özellikleri ile birlikte kullanılmaya da uygundur.
Yorumlar
Yorum Gönder