1. Ana Sayfa
  2. Nasıl Yapılır?

HTML Formlar Nedir ve Nasıl Kullanılır?

HTML Formlar Nedir ve Nasıl Kullanılır?
html-form-nedir
+ - 0

HTML Formları

Kullanıcı girdisini toplamak için bir HTML formu kullanılır. Kullanıcı girişi genellikle işlenmek üzere bir sunucuya gönderilir.

Örnek;

See the Pen html formlar by Webolog (@webolog) on CodePen.0

html-form-nedir

<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> vb. metin alanları, onay kutuları, radyo düğmeleri, gönderme düğmeleri,: eleman gibi girdi elemanlarının farklı 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 <input> öğe, type özniteliğe bağlı olarak birçok şekilde görüntülenebilir .

İşte bazı örnekler:

TipAçıklama
<input type=”text”>Tek satırlık bir metin giriş alanı görüntüler
<input type=”radio”>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 (birçok seçenekten sıfır veya daha fazlasını seçmek için)
<input type=”submit”>Gönder butonu görüntüler (formu göndermek için)
<input type=”button”>Tıklanabilir bir buton görüntüler

Text Fields (Metin Alanları)

<input type="text"> Metin girişi için bir tek çizgi giriş alanı tanımlar.

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>

Not: Formun kendisi görünmez. Ayrıca bir giriş alanının varsayılan genişliğinin 20 karakter olduğunu unutmayın.

<label> Etiketi

<label> etiketi, form kontrolleri için tanımlayıcı etiket oluşturulmasını sağlar. <LABEL> etiketi ile oluşturulan tanımlayıcı etiketin herhangi bir form kontrolü ile ilişkilendirilmesi için for özelliğine ilgili elementin id özelliği atanmalıdır.

Radio Buttons

<input type="radio"> Bir radyo düğmesini tanımlar.

Radyo düğmeleri, kullanıcının sınırlı sayıda seçenekten birini seçmesine olanak tanır.

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>

Checkboxes (Onay Kutuları )

<input type="checkbox"> Bir onay kutusu tanımlar.

Onay kutuları, bir kullanıcının sınırlı sayıda seçenek arasından SIFIR veya DAHA FAZLA seçeneğini seçmesine izin verir.

Onay kutuları olan bir form:

<p>Choose your favorite Web language:</p>

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

Submit (Gönder Butonu)

<input type="submit"> Bir form işleyicisine bir şekilde veri gönderilmesi için bir buton tanımlar.

Form işleyici tipik olarak, giriş verilerini işlemek için bir komut dosyası içeren sunucudaki dosyadır.

Form işleyicisi, formun action özniteliğinde belirtilir .

Gönder butonu 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>
html kodlama
Önerilen Yazı
HTML Nedir ve Nasıl Kullanılır

Yazar Hakkında

Bu Yazıyı Yorumla