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:
size
Gö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:
multiple
Kullanı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 .