HTML Formları
Kullanıcı girdisini toplamak için bir HTML formu kullanılır. Kullanıcı girişi çoğunlukla işlenmek üzere bir sunucuya gönderilir.
Örnek
<form> Öğesi
HTML <form>öğesi, kullanıcı girişi için bir HTML formu oluşturmak için kullanılır:
<form>
.
form elements
.
</form>
<form>Öğe, metin alanları, onay kutuları, radyo düğmeleri, gönderme düğmeleri vb. gibi farklı giriş öğeleri türleri için bir kapsayıcıdır .
Tüm farklı form öğeleri bu bölümde ele alınmaktadır: HTML Form Öğeleri .
<input> Öğesi
HTML <input>öğesi en çok kullanılan form öğesidir.
Bir öğe,
özniteliğe <input>bağlı olarak birçok şekilde görüntülenebilir .type
İşte bazı örnekler:
| Tip | Açıklama |
|---|---|
| <input type="metin"> | 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="onay kutusu"> | Bir onay kutusu görüntüler (birçok seçenekten sıfır veya daha fazlasını seçmek için) |
| <input type="gönder"> | 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 |
Tüm farklı girdi türleri bu bölümde ele alınmaktadır: HTML Girdi Türleri .
Metin Alanları
Metin <input type="text">girişi için tek satırlık bir giriş alanı tanımlar.
Örnek
Metin için giriş alanları içeren bir form:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Not: Formun kendisi görünmez. Ayrıca bir giriş alanının varsayılan genişliğinin 20 karakter olduğunu unutmayın.
<etiket> Öğesi
<label>Yukarıdaki örnekte elemanın kullanımına dikkat edin .
<label>etiketi, birçok 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>
Radyo Düğmeleri
Bir <input type="radio">radyo düğmesini tanımlar.
Radyo düğmeleri, kullanıcının sınırlı sayıda seçenekten BİRİNİ seçmesine olanak tanır.
Örnek
Radyo düğmeleri olan bir form:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Favori Web dilinizi seçin:
onay kutuları
Bir onay kutusu<input type="checkbox"> tanımlar .
Onay kutuları, kullanıcının sınırlı sayıda seçenek arasından SIFIR veya DAHA FAZLA seçeneğini seçmesine olanak tanır.
Örnek
Onay kutuları olan bir form:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Gönder Düğmesi
Form <input type="submit">verilerini bir form işleyiciye göndermek için bir düğme tanımlar.
Form işleyici tipik olarak, giriş verilerini işlemek için bir komut dosyası içeren sunucudaki bir dosyadır.
Form işleyicisi, formun action
özniteliğinde belirtilir.
Örnek
Gönder düğmesi olan bir form:
<form action="/action_page.php">
<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">
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
<input> için Ad Özelliği
Her giriş alanının namegönderilecek bir özniteliğe sahip olması gerektiğine dikkat edin.
Öznitelik atlanırsa , namegiriş alanının değeri hiç gönderilmeyecektir.
Örnek
Bu örnek, "Ad" giriş alanının değerini göndermeyecektir:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>