HTML & CSS için yeni başlayanlar için

HTML ve CSS'ye Giriş (Bölüm 14): Formlar (2)

Eğitimdeki tüm videolar HTML ve CSS için başlangıç kılavuzu

Ziyaretçilere bir liste sunarak seçim bölümleri aracılığıyla bir giriş yapmalarını sağlayabilirsiniz.

<select name="diller">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Seçim bölümleri select öğesi ile tanımlanır. Burada da tekrar belirtmek gerekirse: Her seçim listesi belirleyici (name) ile belirgin bir şekilde belirlenmelidir. Liste elemanları her biri option öğesi ile tanımlanır. Açılış ve kapanış <option> arasında liste giriş metni yer alır.

HTML ve CSS'ye Yeni Başlayanlar için (Bölüm 14): Formlar (2)

Form gönderildiğinde, seçilen liste girişinin metni iletilir. Bunun yerine gönderim değerini farklı şekilde de düzenleyebilirsiniz. Bu, value özniteliğiyle yapılır.

<select name="diller">
   <option value="s1">HTML</option>
   <option value="s2">JavaScript</option>
   <option value="s3">CSS</option>
   <option value="s4">XML</option>
   <option value="s5">Java</option>
</select>



Bu value ile istediğiniz gönderim değerini kolayca atanabilirsiniz.

Normalde bir seçim listesinde yalnızca bir giriş görünür. Ancak isteğe bağlı olarak birden fazla girişi de gösterebilirsiniz.

HTML ve CSS'ye Giriş (Bölüm 14): Formlar (2)

Bunun için select öğesine size özniteliğini atayın. Bu size, seçim listesinin görüntü boyutunu belirler.

<select name="diller" size="3">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>



Eğer liste gösterilebileceğinden fazla girişe sahipse, kaydırılarak liste görüntülenebilir.

Varsayılan olarak, bir seçim listesinden yalnızca bir giriş seçilebilir. İstenirse çoklu seçim de yapılabilir.

<select name="diller" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Çoklu seçim, multiple özniteliğini select öğesine atayarak gerçekleştirilir.

HTML & CSS başlangıç ​​seviyesi için (Bölüm 14): Formlar (2)

Seçim listelerinde başlangıçta seçilmiş bir giriş yoktur. Ancak ilgili bir öznitelik kullanarak bunu da değiştirebilirsiniz.

<select name="diller" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option selected>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>



Bir girişi başlangıçta seçmek için ilgili option öğesine selected özniteliğini atayın.

HTML ve CSS'ye Giriş (Bölüm 14): Formlar (2)



Ayrıca birden fazla girişi de başlangıçta seçebilirsiniz. Bunun için selected özniteliğini tekrar tekrar kullanabilirsiniz.

Seçenek Düğmeleri

Sözde Radyo Düğmeleri aracılığıyla düğüm grupları tanımlayabilirsiniz.

HTML & CSS'ye yeni başlayanlar için (Bölüm 14): Formlar (2)



Bu tür bir gruptan kullanıcılar, sunulan seçeneklerden her birini seçebilirler.

Radyo Düğmeleri, type="radio" kombinasyonunu içeren input öğeleri ile tanımlanır.

<form action="form.php" method="post">
   <p>Haber bültenine abone olmak ister misiniz?:</p>
   <p>
    <input type="radio" name="newsletter" value="ja" /> Evet<br />
    <input type="radio" name="newsletter" value="nein" /> Hayır
   </p>
</form>



Radyo Düğmelerine özellik atamak için yine name özniteliğini kullanın. Aynı adı taşıyan tüm düğmeler, aynı gruba aittir. Bu düğmelerden sadece biri işaretlenebilir.

Her bir düğümün gönderme değerini value özniteliği ile belirleyebilirsiniz.

Bir düğmeyi ön seçmek için checked özniteliğini atayın.

<form action="form.php" method="post">
   <p>Haber bültenine abone olmak ister misiniz?:</p>
   <p>
    <input type="radio" name="newsletter" value="ja" /> Evet<br />
    <input type="radio" name="newsletter" value="nein" checked /> Hayır
   </p>
</form>



Lütfen unutmayın ki bir ön seçim sadece bir grup düğmesi için yapılabilir.

Onay Kutuları

Onay kutularını sayısız formda görmüş olabilirsiniz.

HTML ve CSS'ye Yeni Başlayanlar için (Bölüm 14): Formlar (2)



Bunlar, kullanıcıların birini, hiçbirini veya birden fazlasını seçebilecekleri onaylanabilir kareler grubudur.

<p>Hangi konular ilginizi çekiyor?:</p>
  <p>
    <input type="checkbox" name="thema" value="html" /> HTML<br />
    <input type="checkbox" name="thema" value="css" /> CSS<br />
    <input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>



Onay kutuları, input öğeleri aracılığıyla tanımlanır ve bunlara type="checkbox" olan bir özellik-değer kombinasyonu atamak suretiyle uygulanır. Her bir onay kutusuna, bir kimlik tanımlayıcısı sağlayan name özelliği atanır. Aynı isme sahip olan tüm onay kutuları aynı gruba aittir. value özelliği aracılığıyla her bir onay kutusunun posta yolu değeri belirlenir.

Gizli Giriş Alanları

Ziyaretçilerin göremeyeceği alanları tanımlamak için form içinde alanlar oluşturabilirsiniz. Form gönderildiğinde, gizli alanlar içindeki değerler aktarılır. Bu özellik, PHP aracılığıyla değerler bulunduğunda bu değerleri kullanıcıların haberdar olmadan göndermek istediğinizde örneğin ilginçtir.

Gizli giriş alanları, input öğeleri sayesinde tanımlanır ve bunlara type="hidden" olan bir özellik-değer kombinasyonu atamak suretiyle uygulanır.

<input type="hidden" name="id" value="">



Öğeye, benzersiz bir kimlik tanımlayıcısı atayan name özelliği verilir. Alanın değeri value ile belirtilir. Bu bir statik değer olabilir. Ayrıca bunu örneğin PHP veya JavaScript aracılığıyla dinamik olarak da atayabilirsiniz.

Yükleme Alanları

Ziyaretçilere dosya yükleme izni vermek istiyorsanız, buna yönelik bir alan da sunabilirsiniz. Burada, nasıl bir uygulama görünebileceğine dair bir örnek:

<form action="form.php" method="post" enctype="multipart/form-data">
   <p>Seçiminiz:<br> <input name="Datei" type="file" /></p>
</form>



Tarayıcıda bu şekilde görünür:

HTML ve CSS'ye Giriş (Bölüm 14): Formlar (2)



Yükleme alanları, input öğeleri aracılığıyla tanımlanır ve bunlara type="file" olan bir özellik-değer kombinasyonu atamak suretiyle uygulanır. Bu tür alanlar için giriş yaparken başlangıçtaki <form> etiketinde method="post" belirtilir. Ayrıca orada sadece enctype="multipart/form-data" özelliği de olmalıdır. Yalnızca o zaman dosyalar gerçekten aktarılır. Bu belirtilere sahip olmadan dosya adı yalnızca iletilir.

Gönder ve İptal Düğmeleri

Form verilerinin gönderilmesi için elbette uygun bir düğme olmalıdır.

HTML ve CSS'ye Giriş: Formlar (Bölüm 2)



Form göndermek için aşağıdaki sözdizimi kullanılır:

<input type="submit" value="Gönder" />



value özelliği değeri, düğmede ne yazacağını belirler

Gönderme düğmelerinin karşılığı İptal düğmeleridir.

HTML ve CSS'ye Giriş (Bölüm 14): Formlar (2)

Böyle bir düğmeye tıkladığınızda tüm form içeriği silinir. Bu düğmeler için sözdizimi şu şekildedir:

<input type="reset" value="İptal" />



Burada da aynı şekilde: İçerik, başlangıç ve son <button> etiketleri arasındaki içerik tarafından belirlenir. Burada herhangi bir içerik olabilir. Yani yalnızca metin değil, img öğesi de belirtilebilir, böylece grafik bir düğme oluşturabilirsiniz.

<button name="klick" type="button" value="Sürpriz" onclick="alert('Emin misin?');">Bana Tıkla</button>