HTML-Kodu

**ExCaLuBuR** · 02 Nisan 2021, 23:14

Bu paylaşımda, HTML <input> öğesi için farklı türler açıklanmaktadır .

HTML Giriş Türleri

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

<input type="checkbox">
<input type="password">
<input type="radio">
<input type="reset">
<input type="submit">
<input type="text">

İpucu: Özelliğin varsayılan değeri type "metin" dir.

Giriş Türü Metni

<input type="text"> tek satırlık bir metin giriş alanını tanımlar :

Örnek :

HTML-Kodu

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

Kendiniz Denemek için [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Giriş Tipi Parola

<input type="password">bir şifre alanı tanımlar :

Örnek :

HTML-Kodu

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form>

Kendiniz Denemek için [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Not : Parola alanındaki karakterler maskelenir (yıldız veya daire olarak gösterilir).

Giriş Türü Gönder

<input type="submit"> bir form işleyicisine form verilerini göndermek için bir düğme tanımlar .

Form işleyici, tipik olarak girdi verilerini işlemek için bir komut dosyası içeren bir sunucu sayfasıdır.

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

Örnek :

HTML-Kodu

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

Kendiniz Denemek için [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Gönder düğmesinin değer özelliğini atlarsanız, düğme varsayılan bir metin alır:

Örnek :

HTML-Kodu

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

Kendiniz Denemek için [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Giriş Tipi Sıfırlama

<input type="reset"> tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar :

HTML-Kodu

<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">
  <input type="reset">
</form>

Kendiniz Denemek için [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Giriş değerlerini değiştirir ve ardından "Sıfırla" düğmesini tıklarsanız, form verileri varsayılan değerlere sıfırlanacaktır.

Giriş Tipi Radyo

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

Radyo düğmeleri, kullanıcının sınırlı sayıda seçenekten YALNIZCA BİRİNİ seçmesine izin verir:

HTML-Kodu

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

Giriş Türü Onay Kutusu

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

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

HTML-Kodu

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

Kendiniz Denemek için [Üye Olmadan Linkleri Göremezsiniz. Lütfen Üye Olmak için TIKLAYIN...]

Alıntı:

w3schools

Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)