FrontEnd Developer RoadMap – HTML 5 Tutorial 36 Form Nesneleri 3 – Checkbox

Merhabalar, bu yazımda form nesnelerinden checkbox’a bakıyoruz. Bir liste içinden çoklu seçim yaptırmak istersek checkbox nesnesi kullanılır.

<input type="checkbox" name="secim1" checked> Html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 
    <h1> Hangi Dilleri Biliyorsunuz? </h1>
 
    <form action="/" method="POST">
    
        <input type="checkbox" name="secim1"> Html <br>
 
        <input type="checkbox" name="secim2"> Css  <br>
        
        <input type="checkbox" name="secim3"> JavaScript <br>
        
        <input type="checkbox" name="secim4"> Php <br>
        
        <input type="checkbox" name="secim5"> MySQL  <br>
 
    </form>
    
</body>
</html>

Başlangıçta belli değerler seçili gelsin isterseniz checked özelliğini kullanabiliriz.

<h1> Hangi Dilleri Biliyorsunuz? </h1>
 
    <form action="/" method="POST">
    
        <input type="checkbox" name="secim1" checked> Html <br>
 
        <input type="checkbox" name="secim2" checked> Css  <br>
        
        <input type="checkbox" name="secim3"> JavaScript <br>
        
        <input type="checkbox" name="secim4"> Php <br>
        
        <input type="checkbox" name="secim5"> MySQL  <br>
 
    </form>

Seçimlik değerleri br etiketi koymadan yazarsak yan yana gelecektir.

<h1> Hangi Dilleri Biliyorsunuz? </h1>
 
    <form action="/" method="POST">
    
        <input type="checkbox" name="secim1" checked> Html 
 
        <input type="checkbox" name="secim2" checked> Css  
        
        <input type="checkbox" name="secim3"> JavaScript 
        
        <input type="checkbox" name="secim4"> Php 
        
        <input type="checkbox" name="secim5"> MySQL 
 
    </form>

Checkbox değerlerinin yanında yazan değerleri bu haliyle yakalayamayız. Değerler sadece değeri göstermek içindir. İlgili checkbox seçilince değerin alınabilmesi için value özelliğine değerler verilmeli.

<h1> Hangi Dilleri Biliyorsunuz? </h1>
 
    <form action="/" method="POST">
    
        <input type="checkbox" name="secim1" value="Html" checked> Html 
 
        <input type="checkbox" name="secim2" value="Css" checked> Css  
        
        <input type="checkbox" name="secim3" value="JavaScript"> JavaScript 
        
        <input type="checkbox" name="secim4" value="Php"> Php 
        
        <input type="checkbox" name="secim5" value="MySQL"> MySQL 
 
    </form>

Değerleri yakalayabilmek için label ile tanımlama alanındaki ifadeyi değer olarak bağlayabiliriz.

 <form action="/" method="POST">
    
        <input type="checkbox" name="secim1" value="Html" checked> Html 
 
        <input type="checkbox" name="secim2" value="Css" checked> Css  
        
        <input type="checkbox" name="secim3" value="JavaScript"> JavaScript 
        
        <input type="checkbox" name="secim4" value="Php"> Php 
        
        <input type="checkbox" id="secim5" checked="checked" />
        <label for="secim5">MySQL</label>
 
    </form>

Label etiketi bağlandığı input’un hemen ya altında ya üstünde bulunmalıdır.

Bir sonraki yazımda görüşmek üzere.

Exit mobile version