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