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:
Kimler Neler Demiş?