Bir formu etkileşimli hale getirmek için form öğeleri eklemeniz gerekir. Veri girmek ve seçmek için denetimler, denetimleri açıklayan öğeler, alanları gruplandıran öğeler ve form göndermek için kullanılan düğmeler vardır.
Form öğeleri nedir?
<input type="text">
ve <input type="file">
olmak üzere iki <input>
öğesi görürsünüz. Neden farklı görünüyorlar?
Tarayıcılar, öğe adı ve type özelliğine bağlı olarak farklı kullanıcı arayüzleri gösterir, farklı doğrulama kuralları kullanır ve daha birçok özellik sunar. Uygun form denetimini kullanmak, daha iyi formlar oluşturmanıza yardımcı olur.
Form öğelerinin etiketleri
Kullanıcının en sevdiği rengi girebileceği bir giriş eklemek istediğinizi düşünelim.
Bunun için formunuza bir <input>
öğesi eklemeniz gerekir.
Peki kullanıcı en sevdiği rengi doldurması gerektiğini nasıl bilebilir?
Form kontrollerini tanımlamak için her form kontrolünde <label>
kullanın.
<label for="color">What is your favorite color?</label>
<input type="text" id="color" name="color">
Etiket öğesindeki for
özelliği, girişteki id
özelliğiyle eşleşir.
Kullanıcı girişini yakalama
Adından da anlaşılacağı gibi <input>
öğesi kullanıcılardan girdi toplamak için kullanılır.
<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">
Daha önce belirtildiği gibi id
özelliği, <input>
ile <label>
arasında bağlantı kurar.
Bu örnekteki ad ve tür özelliğine ne olacak?
Ad özelliği
Kullanıcının kontrolle girdiği verileri tanımlamak için name
özelliğini kullanın.
Formu gönderirseniz bu ad, isteğe eklenir.
Form denetimine mountain
adını verdiğinizi ve kullanıcının Gutenberg
girdiğini, isteğin bu bilgiyi mountain=Gutenberg
olarak içerdiğini varsayalım.
Form denetiminin adını hill
olarak değiştirmeyi deneyin.
Bunu doğru şekilde yapıp formu gönderirseniz hill
, URL'de görünür.
Giriş türü
Farklı tarayıcı ve platformlarda çalışan, kullanışlı yerleşik özelliklere sahip farklı türlerde form kontrolleri vardır. Tarayıcı, type
özelliğine göre farklı kullanıcı arayüzleri oluşturur, farklı dokunmatik klavyeler gösterir, farklı doğrulama kuralları kullanır ve daha pek çok işlem yapar. Türün nasıl değiştirileceğine bakalım.
type="checkbox"
kullanıldığında tarayıcı artık metin alanı yerine onay kutusu oluşturuyor.
Onay kutusu ek özellikler de içerir.
checked
özelliğini, işaretli olarak görünecek şekilde ayarlayabilirsiniz.
Seçebileceğiniz çeşitli türler vardır. Bu konuya daha sonraki modülde ayrıntılı bir şekilde değineceğiz.
Birden fazla metin satırına izin ver
Diyelim ki kullanıcıların yorum yazabileceği bir alana ihtiyacınız var.
Bunun için birden çok metin satırı girseler harika olmaz mıydı?
<textarea>
öğesinin amacı budur.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Seçenek listesinden seçim yapın
Kullanıcılara, tercih edebilecekleri bir seçenek listesini nasıl sunarsınız?
Bunun için bir <select>
öğesi kullanabilirsiniz.
<label for="color">Color</label>
<select id="color" name="color">
<option value="orange">Orange</option>
<option value="pink">Pink</option>
</select>
İlk olarak bir <select>
öğesi eklersiniz.
Diğer tüm form kontrollerinde olduğu gibi, bunu id
özelliğiyle bir <label>
öğesine bağlar ve name
özelliğini kullanarak benzersiz bir ad verirsiniz.
<select>
öğesinin başlangıç ve bitiş etiketlerinin arasına, her biri bir seçimi temsil eden birden fazla <option>
öğesi ekleyebilirsiniz.
Her seçeneğin benzersiz bir value
özelliği vardır. Böylece, form verilerini işlerken bunları birbirinden ayırt edebilirsiniz.
Seçenek öğesinin içindeki metin, kullanıcılar tarafından okunabilir değerdir.
Seçimi değiştirmeden bu <select>
öğesini kullanarak formu gönderirseniz isteğe color=orange
dahil edilir. Peki tarayıcı hangi seçeneğin kullanılması gerektiğini nasıl biliyor?
Tarayıcı, aşağıdaki durumlar haricinde listedeki ilk seçeneği kullanır:
- Bir
<option>
öğesiselected
özelliğine sahip. - Kullanıcı başka bir seçenek belirler.
Bir seçeneği önceden belirleyin
selected
özelliğiyle önceden bir seçenek belirleyebilirsiniz.
Bu, <option>
öğelerinin tanımlandığı sıradan bağımsız olarak varsayılan ayar olur.
Gruplandırma formu kontrolleri
Bazen form kontrollerini gruplandırmanız gerekir. Bunu yapmak için <fieldset>
öğesini kullanabilirsiniz.
<fieldset>
<legend>What is your favorite web technology</legend>
<label for="html">HTML</label>
<input type="radio" name="webfeature" value="html" id="html">
<label for="css">CSS</label>
<input type="radio" name="webfeature" value="css" id="css">
</fieldset>
<fieldset>
öğesinin içindeki <legend>
öğesini fark ettiniz mi? Sizce ne için kullanılır?
Yanıtınız "form denetimleri grubunu açıklamak" ise haklısınız!
Her form kontrolünün ilişkili bir <label>
öğesine ihtiyacı olduğu gibi her <fieldset>
öğesi de bir <legend>
öğesi gerektirir.
<legend>
, <fieldset>
içindeki ilk öğe de olmalıdır.
<legend>
öğesinden sonra, grubun parçası olması gereken form kontrollerini tanımlayabilirsiniz.
Form gönderme
Form denetimlerini eklemeyi ve gruplandırmayı öğrendikten sonra, bir kullanıcının formu nasıl gönderebileceğini merak ediyor olabilirsiniz.
İlk seçenek, bir <button>
öğesi kullanmaktır.
<button>Submit</button>
Kullanıcı Gönder düğmesini tıkladıktan sonra tarayıcı, form kontrollerindeki tüm verilerle <form>
öğesinin action özelliğinde belirtilen URL'ye bir istek gönderir.
<button>
öğesi yerine type="submit"
içeren bir <input>
öğesi de kullanabilirsiniz.
Giriş, tıpkı bir <button>
gibi görünür ve davranır. <input>
özelliğini açıklamak için <label>
öğesi yerine value
özelliğini kullanın.
<input type="submit" value="Submit">
Ayrıca, bir form alanına odaklanıldığında Enter
anahtarı kullanılarak form da gönderilebilir.
Öğrendiklerinizi sınayın
Form öğeleriyle ilgili bilginizi test edin
<label>
öğesini form denetimine nasıl bağlarsınız?
<label>
tarihinde for='color'
ve <input>
tarihinde name='color'
.<label>
tarihinde for='color'
ve <input>
tarihinde id='color'
.<label>
tarihinde id='color'
ve <input>
tarihinde for='color'
.<label>
tarihinde name='color'
ve <input>
tarihinde for='color
.Çok satırlı form kontrolü için ne kullanıyorsunuz?
type='multi-line'
içeren <input>
öğesi.<text>
öğesi.<textarea>
öğesi.type='long'
içeren <input>
öğesi.Nasıl form gönderebilirsiniz?
<button>
öğesini tıklama.Enter
anahtarı kullanılıyor.type='submit'
içeren bir <input>
öğesini tıklama.