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ı:

İsminizi Giriniz:

 

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ı:

First Name:
Last Name:

 

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 FormL
Adresinizi giriniz:

 

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ı:

Bay Bayan

 

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ı:

Branşlar:


 

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ı:

Kullanıcı Bilgileri:



 

Örnek:

<!DOCTYPE html>  
 <html>  
 <head>  
  <title>HTML Form Etiketi</title>  
</head>  
 <body>  
     <h2>Kayıt Bilgileri</h2>  
    <form>  
     <fieldset>  
        <legend>Kişisel Bilgiler</legend>  
        <label>İsim</label><br>  
        <input type="text" name="name"><br>  
         <label>E-Posta</label><br>  
         <input type="email" name="email"><br>  
         <label>Şifre:</label><br>  
         <input type="password" name="pass"><br>  
         <label>Şifre Tekrar</label><br>  
         <input type="password" name="pass"><br>  
         <br><label>Cinsiyet</label><br>  
         <input type="radio" id="cinsiyet" name="cinsiyet" value="bay"/>Bay  <br>  
         <input type="radio" id="cinsiyet" name="cinsiyet" value="bayan"/>Bayan <br/>    
         <input type="radio" id="cinsiyet" name="cinsiyet" value="diğer"/>diğer<br/>   
          <br>Adres:<br>  
         <textarea></textarea><br>  
         <input type="submit" value="Kayıt Ol">  
     </fieldset>  
  </form>  
 </body>  
</html>  

Ekran Çıktısı:

HTML Form Etiketi

Kayıt Bilgileri

Kişisel Bilgiler









Bay
Bayan
diğer

Adres:

 

Tarayıcı Desteği:



Kimler Neler Demiş?

avatar
  Subscribe  
Bildir