Bir formu etkileşimli hale getirmek için form öğeleri eklemeniz gerekir. Verileri girmek ve seçmek için denetimler, denetimleri açıklayan öğeler, öğeleri gruplandıran öğe oluşturabilirsiniz.
Form öğeleri nedir?
<input type="text">
ve <input type="file">
olmak üzere iki <input>
öğesi görüyorsunuz. Neden farklı görünüyorlar?
Öğe adına ve type özelliğine bağlı olarak, farklı kullanıcı arayüzleri gösterdiğinden, doğrulama kurallarını birçok başka özellik sunar. Uygun form denetimini kullanmak, daha iyi formlar oluşturmanıza yardımcı olur.
Form öğeleri için etiketler
Kullanıcının en sevdiği rengi girebileceği bir giriş eklemek istediğinizi varsayalım.
Bunun için formunuza bir <input>
öğesi eklemeniz gerekir.
Peki kullanıcı en sevdiği rengi doldurması gerektiğini nasıl bilecek?
Form denetimlerini açıklamak için her form kontrolünde bir <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>
özelliğini <label>
öğesine bağlar.
Bu örnekteki ad ve tür özelliği ne olacak?
Ad özelliği
Kullanıcının kontrol ile girdiği verileri tanımlamak için name
özelliğini kullanın.
Formu gönderirseniz bu ad, isteğe eklenir.
Bir form kontrolüne mountain
verdiğinizi ve kullanıcının Gutenberg
girdiğini varsayalım.
istek bu bilgileri mountain=Gutenberg
adıyla içerir.
Değiştirmeye çalışın
form kontrolünün adını hill
olarak ayarlayın.
Bunu doğru bir şekilde yapıp formu gönderirseniz URL'de hill
görünür.
Giriş türü
Birbirinden farklı
türlerinde form kontrolleri, tüm
farklı tarayıcı ve platformlarda çalışan kullanışlı yerleşik özelliklerle tanışın. type
bilgilerine göre
özelliğini kullanarak, tarayıcı farklı kullanıcı arayüzleri oluşturur, farklı dokunmatik klavyeler gösterir,
ve daha fazlası. Şimdi türü nasıl değiştireceğimize bakalım.
type="checkbox"
kullanıldığında, tarayıcı artık metin alanı yerine bir onay kutusu oluşturuyor.
Onay kutusu ek özelliklerle birlikte gelir.
checked
özelliğini işaretli olarak gösterecek şekilde ayarlayabilirsiniz.
Seçebileceğiniz başka türler de vardır. İlerleyen modülde bu konuyu ayrıntılı olarak inceleyeceğiz.
Birden çok metin satırına izin ver
Kullanıcıların yorum yazabileceği bir alana ihtiyacınız olduğunu varsayalım.
Bunun için birden çok metin satırı girmeleri harika olmaz mıydı?
Bu, <textarea>
öğesinin amacıdır.
<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>
Seçenek listesinden seçim yapın
Kullanıcılara aralarından seçim yapabilecekleri bir seçenek listesi nasıl sunabilirsiniz?
Bunu yapmak 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 onu id
özelliğiyle bir <label>
'a bağlarsınız.
ve name
özelliğini kullanarak benzersiz bir ad verin.
<select>
öğesinin başlangıç ve bitiş etiketi arasında,
her biri bir seçimi temsil eden birden çok <option>
öğesi ekleyebilirsiniz.
Her seçeneğin benzersiz bir value
özelliği vardır. Böylece, form verilerini işlerken bu seçenekleri birbirinden ayırt edebilirsiniz.
Seçenek öğesinin içindeki metin, kullanıcıların okuyabileceği değerdir.
Formu, seçimi değiştirmeden bu <select>
öğesini kullanarak gönderirseniz
istekte color=orange
bulunacak. Peki tarayıcı hangi seçeneğin kullanılması gerektiğini nasıl bilir?
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.
Önceden bir seçenek belirleyin
selected
özelliğiyle bir seçeneği önceden belirleyebilirsiniz.
Bu, <option>
öğelerinin tanımlanma sırasına bakılmaksızın varsayılan olur.
Form kontrollerini gruplandırma
Bazen form denetimlerini 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?
Cevabınız "form denetimleri grubunu açıklamak üzere" ise haklısınız.
Her <fieldset>
öğesi bir <legend>
öğesi gerektirir.
Tıpkı her form kontrolü için ilişkilendirilmiş bir <label>
öğesine ihtiyaç duyulması gibi.
<legend>
, aynı zamanda <fieldset>
içindeki ilk öğe olmalıdır.
<legend>
öğesinden sonra, grubun parçası olması gereken form denetimlerini tanımlayabilirsiniz.
Form gönderme
Form denetimlerinin nasıl ekleneceğini ve gruplandırılacağını öğrendikten sonra, kullanıcıların nasıl form 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>
öğesinin
işlem özelliği
tüm verileri için de kullanabilirsiniz.
Bir <button>
öğesi yerine type="submit"
ile bir <input>
öğesi de kullanabilirsiniz.
Giriş tıpkı <button>
gibi görünür ve davranır. Açıklama için bir <label>
öğesi kullanmak yerine
<input>
değeri yerine value
özelliğini kullanın.
<input type="submit" value="Submit">
Ayrıca form alanına odaklanıldığında Enter
tuşu kullanılarak form da gönderilebilir.
Öğrendiklerinizi sınayın
Form öğeleri hakkındaki bilginizi test edin
<label>
cihazını form kontrolüne nasıl bağlarsınız?
<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
.<label>
tarihinde for='color'
ve <input>
tarihinde name='color'
.Çok satırlı form kontrolü için ne kullanıyorsunuz?
<textarea>
öğesi.type='long'
içeren <input>
öğesi.type='multi-line'
içeren <input>
öğesi.<text>
öğesi.Nasıl form gönderebilirsiniz?
Enter
tuşunu kullanma.type='submit'
içeren bir <input>
öğesi tıklanıyor.<button>
öğesini tıklamak.