HTML <form> Etiketi
HTML <form> etiketi kullanıcı girişleri oluşturmak için kullanılır. HTML formları oluşturmak için <form> etiketi kullanılır.
Site ziyaretçilerinden veri toplamak için form etiketini kullanabilirsiniz.
Örneğin bir e-ticaret sitesi üzerinde kullanıcı ödeme işlemi için kredi kartı bilgileri girmek zorundadır. Bu bilgiler form etiketi ile kullanıcıdan alınır.
Söz dizimi:
<form action="server url" method="get|post"> //Giriş kontrolleri buraya eklenir.. </form>
HTML <form> Etiketleri
Etiket |
Açıklama |
<form> |
Kullanıcı girişleri için HTML formu tanımlar. |
<input> |
Bir giriş kontrolü tanımlar. |
<textarea> |
Çok satırlı giriş kontrolü tanımlar. |
<label> |
Giriş elemanı için etiket tanımlar. |
<fieldset> |
İlgili ögeyi formda gruplandırır. |
<legend> |
<fieldset> ögesi için resim yazısı tanımlar. |
<select> |
Açılır liste tanımlar. |
<optgroup> |
Açılır listede ilgili seçenek tanımlar. |
<option> |
Açılır listede seçenek tanımlar. |
<button> |
Bir düğme tanımlar. |
HTML 5 <form> Etiketleri
Etiket |
Açıklama |
<datalist> |
Giriş kontrolü için önceden tanımlanmış bir liste belirtir. |
<keygen> |
Formlar için anahtar tanımlar. |
<output> |
Bir hesaplamanın sonucunu tanımlar. |
HTML <form> Nesnesi
Kullanıcıdan bilgi almak için bir bölüm tanımlar. Metin, şifre vb. bilgiler almak için form etiketi kullanılır.
Söz dizimi:
<form> //Form Elemanları </form>
HTML <input> Nesnesi
Temel form ögesidir.Form alanları oluşturmak, kullanıcıdan bilgi almak için kullanılır.
Örnek:
<body> <form> İsminizi Giriniz: <br> <input type="text" name="kullaniciadi"> </form> </body>
Ekran Çıktısı:
HTML <textField> Nesnesi
Input etiketinin type: “text” niteliği, metin alanı denetimi oluşturmak için kullanılır.
Örnek:
<form> İsim: <input type="text" name="isim"/> <br/> Soyisim: <input type="text" name="soyisim"/> <br/> </form>
Ekran Çıktısı:
HTML <textarea> Nesnesi
HTML <textarea> etiketi, çok satırlı metin eklemek için kullanılır.
Örnek:
<!DOCTYPE html> <html> <head> <title>HTML FormL</title> </head> <body> <form> Adresinizi giriniz:<br> <textarea rows="3" cols="18"></textarea> </form> </body> </html>
Ekran Çıktısı:
HTML <label> Nesnesi
HTML label nesnesi metin etiketi oluşturmak için kullanılır.
Örnek:
<form> <label for="isim">İsim: </label> <br/> <input type="text" id="isim" name="isim"/> <br/> <label for="soyisim">Soyisim: </label> <br/> <input type="text" id="soyisim" name="soyisim"/> <br/> </form>
Ekran Çıktısı:
HTML Password Field Kontrolü
Şifre alanı kontrolü için kullanılır. Kullanıcı tarafından görülmez.
Örnek:
<form> <label for="sifre">Şifre: </label> <input type="sifre" id="sifre" name="sifre"/> <br/> </form>
Ekran Çıktısı:
HTML 5 E-Posta Alan Kontrolü
HTML 5 için yeni bir e-posta kontrol alanı tanımlar. “@” işareti kullanmak zorunludur.
Örnek:
<form> <label for="email">E-mail: </label> <input type="email" id="email" name="email"/> <br/> </form>
Ekran Çıktısı:
HTML Radio Button Kontrolü
Birden çok seçenek içerisinden tek bir seçenek seçmek için kullanılır. Örneğin cinsiyet seçimi için kullanılır.
Örnek:
<form> <label for="cinsiyet">Cinsiyet: </label> <input type="radio" id="cinsiyet" name="cinsiyet" value="Bay"/>Bay <input type="radio" id="cinsiyet" name="cinsiyet" value="Bayan"/>Bayan<br/> </form>
Ekran Çıktısı:
HTML CheckBox Kontrolü
Onay kutusu kontrolüdür. Onay kutusu seçeneklerinden çoklu seçim yapmak için kullanılır.
Örnek:
<form> Branşlar:<br> <input type="checkbox" id="Futbol" name="Futbol" value="Futbol"/> <label for="futbol">Futbol</label> <br> <input type="checkbox" id="Basketbol" name="Basketbol" value="Basketbol"/> <label for="Basketbol">Basketbol</label> <br> <input type="checkbox" id="Tenis" name="Tenis" value="Tenis"/> <label for="Tenis">Tenis</label> </form>
Ekran Çıktısı:
HTML Submit Button Kontrolü
HTML <input type=”gönder”> web sayfasına bir gönder düğmesi eklemek için kullanılır.
Söz dizimi:
<input type="submit" value="Gönder">
Yukarıda “type:submit” alanı bunun bir gönder düğmesi olduğunu belirtir. Value değeri ise butonun yazı kısmıdır.
Örnek:
<form> <label for="name">İsim:</label><br> <input type="text" id="name" name="name"><br> <label for="pass:">Şifre</label><br> <input type="Password" id="pass" name="pass"><br> <input type="submit" value="Gönder"> </form>
Ekran Çıktısı:
HTML <fieldset> ögesi
HTML <fieldset> etiketi ilgili formun bilgilerini gruplamak için kullanılır.
Örnek:
<form> <fieldset> <legend>Kullanıcı Bilgileri:</legend> <label for="name">İsim:</label><br> <input type="text" id="name" name="name"><br> <label for="pass">Şifre</label><br> <input type="Password" id="pass" name="pass"><br> <input type="submit" value="Gönder"> </fieldset> <form>
Ekran Çıktısı:
Tarayıcı Desteği: