HTML Form Etiketleri

HTML'de kullandığımız form etiketleri hakkındaki her şeyi bu konumuzda ele alıyoruz.

HTML Şubat 6, 2021 0 11806 Okuma Listesine Ekle

HTML Form Etiketleri Nedir?

HTML'de bir form yapısı oluştururken, <form> etiketinden yararlanırız. Bu etiket sayesinde, metin alanları, onay kutuları, radyo butonları, gönderme butonları vb. gibi girdi elemanlarını kullanırız.

Form yapısındaki açılış ve kapanış etiketi şu şekilde oluşturulur.

<form>
.
form elemanları
.
</form>

<form>...</form> etiketlerinin arasına farklı öğeler kullanırız. Şimdi bu öğeleri detaylı olarak inceleyelim.

<input> Öğesi

HTML'de <input> öğesi, en çok kullanılan form öğesidir. Bu öğe type niteliğine bağlı olarak birçok şekilde kullanılabilir. İşte bazı örnekler:

<input type = "text">	Tek satırlık bir metin giriş alanı görüntüler
<input type = "radyo">	Bir radyo düğmesi görüntüler (birçok seçenekten birini seçmek için)
<input type = "checkbox">	Bir onay kutusu görüntüler (sıfır veya birçok seçenek arasından seçim yapmak için)
<input type = "submit">	Gönder düğmesi görüntüler (formu göndermek için)
<input type = "button">	Tıklanabilir bir düğme görüntüler

<label> Öğesi

<label> niteliğinin kullanımına dikkat edin. Bu etiket birçok form öğeleri için etiket tanımlamak için kullanılır.

Metin Alanı

<input type="text"> Metin girişi tanımlarken bu yapıyı kullanırız.

<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">
</form>

Örnek Çıktısı:

İsim:

Soyisim:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Radyo Butonu

<input type="radio"> Bir radyo butonu tanımlarken bu yapı kullanılır.

Radyo butonları, kullanıcının sınırlı sayıda seçenek arasından birisini seçmesine izin verir.

Örnek:

<form>
  <input type="radio" id="erkek" name="cinsiyet" value="erkek">
  <label for="erkek">Erkek</label><br>
  <input type="radio" id="kadin" name="cinsiyet" value="kadin">
  <label for="kadin">Kadın</label><br>
  <input type="radio" id="diger" name="cinsiyet" value="diger">
  <label for="diger">Diğer</label>
</form>

Örnek Çıktısı:

Erkek
Kadın
Diğer

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Onay Kutusu

<input type="checkbox"> Onay kutusu oluştururken bu yapıyı kullanırız.

Onay kutuları, kullanıcının sınırlı sayıda seçenekler arasından sıfır veya daha fazla seçeneği seçmesine izin verir.

Örnek:

<form>
  <input type="checkbox" id="arac" name="arac" value="bisiklet">
  <label for="arac">Bisikletim var</label><br>
  <input type="checkbox" id="arac2" name="arac2" value="araba">
  <label for="arac2">Arabam var</label><br>
  <input type="checkbox" id="arac3" name="arac3" value="gemi">
  <label for="arac3">Gemim var</label>
</form>

Örnek Çıktısı:

Bisikletim var
Arabam var
Gemim var

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Gönder Butonu

<input type="submit"> Gönderme butonu oluştururken bu yapıyı kullanırız.

Gönder butonu, formdaki kullanmış olduğumuz diğer elemanlardaki verileri sunucuya iletirken kullanılır.

Formun işleyişini action niteliği belirler.

Örnek:

<form action="/action_page.php">
  <label for="isim">İsim:</label><br>
  <input type="text" id="isim" name="isim" value="Onur"><br>
  <label for="soyisim">Soyisim:</label><br>
  <input type="text" id="soyisim" name="soyisim" value="KUL"><br><br>
  <input type="submit" value="Gönder">
</form>

Örnek Çıktısı:

İsim:

Soyisim:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Sizlere bu konumuzda HTML'de kullanabileceğiniz birçok giriş (input) türünü anlatmaya çalıştım. Fakat, girişler sadece benim bu konuda anlattıklarım kadar değil, çok daha fazlası var. Sizlere aşağıda tüm giriş türlerini vereceğim. Sizler de bu giriş türlerini deneyerek pekiştirebilirsiniz.

HTML'de kullanabileceğiniz farklı giriş türleri şunlardır:

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

<select> Öğesi

Açılır liste tanımlarken bu öğe kullanılır.

Örnek:

<label for="arabalar">Araba Seç:</label>
<select id="arabalar" name="arabalar">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Örnek Çıktısı:

Araba Seç:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Görünür Değer Sayısı Belirlemek

Görünür değerlerin sayısını belirlemek için size özelliği kullanılır.

Örnek:

<label for="arabalar">Araba Seç:</label>
<select id="arabalar" name="arabalar" size="4">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Örnek Çıktısı:

Araba Seç:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Çoklu Seçime İzin Verme

Bir kullanıcın birden fazla değeri seçmesine izin vermek için multiple özelliğini kullanabilirsiniz.

Örnek:

<label for="arabalar">Araba Seç:</label>
<select id="arabalar" name="arabalar" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Örnek Çıktısı:

Araba Seç:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<textarea> Öğesi

Bu eleman ile birçok girdi için giriş alanı (metin alanı) tanımlanır.

rows ve cols nitelikleri ile oluşturduğumuz bu metin alanın boyutunu ayarlayabiliriz.

Örnek:

<textarea name="mesaj" rows="10" cols="30">
Onur KUL | Kişisel Blog 
</textarea>

Örnek Çıktısı:

Onur KUL | Kişisel Blog

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<fieldset> ve <legend> Öğeleri

form içerisindeki ilişkili elemanları gruplandırmak için <fieldset> etiketi kullanılır.

<legend> etiketi <fieldset> etiketi için bir başlık oluşturur.

Örnek:

<form action="/action_page.php">
  <fieldset>
    <legend>Kişisel Bilgiler:</legend>
    <label for="isim">İsim:</label><br>
    <input type="text" id="isim" name="isim" value="Onur"><br>
    <label for="soyisim">Soyisim:</label><br>
    <input type="text" id="soyisim" name="soyisim" value="KUL"><br><br>
    <input type="submit" value="Gönder">
  </fieldset>
</form>

Örnek Çıktısı:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

<datalist> Öğesi

<datalist> etiketi <input> etiketi için önceden tanımlanmış açılabilir liste tanımlar.

<datalist> etiketi "otomatik tamamlama" özelliğini tanımlar. Kullanıcı veri girişi yaptığında önceden tanımlanmış açılabilir liste gözükecektir.

Örnek:

<form action="/action_page.php">
  <input list="tarayicilar">
  <datalist id="tarayicilar">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Örnek Çıktısı:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Maxlength Öğesi

Bu öğe ile bir giriş alanında izin verilen maksimum karakter sayısını belirleriz.

Örnek:

<form>
  <label for="isim">İsim:</label><br>
  <input type="text" id="isim" name="isim" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

Örnek Çıktısı:

İsim:

PIN:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Minimum ve Maksimum Öğeleri

Bu öğeler ile, bir giriş alanı için minimum ve maksimum değerleri belirleriz.

Örnek:

<form>
  <label for="tarihmax">1980-01-01 tarihinden önce bir tarih girin:</label>
  <input type="date" id="tarihmax" name="tarihmax" max="1979-12-31"><br><br>

  <label for="tarihmin"> 2000-01-01 tarihinden sonra bir tarih girin:</label>
  <input type="date" id="tarihmin" name="tarihmin" min="2000-01-02"><br><br>

  <label for="miktar">Miktar (1 ve 5 arasında):</label>
  <input type="number" id="miktar" name="miktar" min="1" max="5">
</form>

Örnek Çıktısı:

1980-01-01 tarihinden önce bir tarih girin:

2000-01-01 tarihinden sonra bir tarih girin:

Miktar (1 ve 5 arasında):

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Zorunlu (required) Öğesi

Bir formu göndermeden önce bir giriş alanını doldurulması gerektiğini belirtirken, required özelliğini kullanırız.

Örnek:

<form>
  <label for="kullaniciadi">Kullanıcı Adı:</label>
  <input type="text" id="kullaniciadi" name="kullaniciadi" required>
</form>

Örnek Çıktısı:

Kullanıcı Adı:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Yer Tutucu (placeholder) Öğesi

Bu öğeyi, bir giriş alanının beklenen değerini, örnek bir değer veya beklenen formatın kısa bir açıklaması şeklinde kullanıcıya bir ipucu verirken kullanırız.

Örnek:

<form>
  <label for="telefon">Bir telefon numarası girin:</label>
  <input type="tel" id="telefon" name="telefon" placeholder="0545-123-4567">
</form>

Örnek Çıktısı:

Bir telefon numarası girin:

Örneği detaylı görüntülemek ve düzenlemek için, buraya tıklayabilirsiniz.

Kalıp (pattern) Öğesi

Pattern özelliği giriş alanına girilen değer ile regexp değerinin denetlenmesini belirtir.

Not: Pattern özelliği şu giriş alanları ile çalışır: text, search, url, tel, email ve password.

Regexp: Giriş alanı ile karşılaştırılmak istenen düzeni belirtir.

[A-Z] Büyük harfler kullanılabilir.
[a-z] Küçük harfler kullanılabilir.
[0-9] Rakamlar kullanılabilir.
Büyük ve küçük harfler ile sadece üç karakterden oluşan bir girişin yapılabilmesi; pattern="[A-Za-z]{3}"

Örnek:

<form>
  <label for="ulkekodu">Ülke Kodu:</label>
  <input type="text" id="ulkekodu" name="ulkekodu"
  pattern="[A-Za-z]{3}" title="Ülke Kodu">
</form>

Örnek Çıktısı: