HTML Form Öğeleri
Bu bölüm, tüm farklı HTML form öğelerini açıklar.
HTML <form> Öğeleri
HTML <form>öğesi, aşağıdaki form öğelerinden bir veya daha fazlasını içerebilir:
-
<input> -
<label> -
<select> -
<textarea> -
<button> -
<fieldset> -
<legend> -
<datalist> -
<output> -
<option> -
<optgroup>
<input> Öğesi
En çok kullanılan form elemanlarından biri <input>elemandır.
Öğe ,
özniteliğe <input>bağlı olarak çeşitli şekillerde görüntülenebilir .type
Örnek
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Niteliğin tüm farklı değerleri type
sonraki bölümde ele alınmaktadır:
HTML Girdi Türleri .
<etiket> Öğesi
Öğe , <label>birkaç form öğesi için bir etiket tanımlar.
Öğe , <label>ekran okuyucu kullanıcıları için yararlıdır, çünkü kullanıcı giriş öğesine odaklandığında ekran okuyucu etiketi yüksek sesle okuyacaktır.
<label>Öğe aynı zamanda çok küçük bölgelere (radyo düğmeleri veya onay kutuları gibi) tıklamakta zorluk çeken kullanıcılara da yardımcı olur - çünkü kullanıcı <label>öğe içindeki metni tıkladığında radyo düğmesini/onay kutusunu değiştirir .
Etiketin forözniteliği ,
onları birbirine bağlamak için öğenin özniteliğine <label>eşit olmalıdır .id<input>
<seç> Öğesi
<select>Öğe bir açılır liste tanımlar :
Örnek
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Öğeler , <option>seçilebilecek bir seçeneği tanımlar.
Varsayılan olarak, açılır listedeki ilk öğe seçilidir.
Önceden seçilmiş bir seçeneği tanımlamak için seçeneğe selectedözniteliği ekleyin:
Örnek
<option value="fiat" selected>Fiat</option>
Görünür Değerler:
sizeGörünür değerlerin sayısını belirtmek için özniteliği kullanın :
Örnek
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Çoklu Seçime İzin Ver:
multipleKullanıcının birden fazla değer seçmesine izin vermek için özniteliği kullanın :
Örnek
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<textarea> Öğesi
Öğe , <textarea>çok satırlı bir giriş alanını (metin alanı) tanımlar:
Örnek
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Nitelik rows, bir metin alanındaki görünür satır sayısını belirtir.
Nitelik cols, bir metin alanının görünür genişliğini belirtir.
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Metin alanının boyutunu CSS kullanarak da tanımlayabilirsiniz:
Örnek
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
<düğme> Öğesi
<button>Öğe tıklanabilir bir düğme tanımlar :
Örnek
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Not:type Her zaman button öğesinin özniteliğini belirtin . Farklı tarayıcılar, düğme öğesi için farklı varsayılan türleri kullanabilir.
<fieldset> ve <legend> Öğeleri
<fieldset>Öğe, ilgili verileri bir formda gruplamak için kullanılır .
Öğe , öğe <legend>için bir başlık tanımlar
<fieldset>
.
Örnek
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
<datalist> Öğesi
Öğe , <datalist>bir öğe için önceden tanımlanmış seçeneklerin bir listesini belirtir <input>.
Kullanıcılar, verileri girerken önceden tanımlanmış seçeneklerin bir açılır listesini göreceklerdir.
Öğenin listözniteliği, öğenin özniteliğine <input>atıfta bulunmalıdır
.id<datalist>
Örnek
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<output> Öğesi
Öğe, bir hesaplamanın sonucunu temsil eder ( <output>bir komut dosyası tarafından gerçekleştirilen gibi).
Örnek
Bir hesaplama yapın ve sonucu bir <output>öğede gösterin:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML Alıştırmaları
HTML Form Öğeleri
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <output> | Defines the result of a calculation |
Mevcut tüm HTML etiketlerinin tam listesi için HTML Etiket Referansımızı ziyaret edin .