Kullanıcıların formlara veri girmelerine yardımcı olun

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> öğesi selected ö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'.
Tekrar deneyin.
<label> tarihinde for='color' ve <input> tarihinde id='color'.
Doğru.
<label> tarihinde id='color' ve <input> tarihinde for='color'.
Tekrar deneyin.
<label> tarihinde name='color' ve <input> tarihinde for='color.
Tekrar deneyin.

Çok satırlı form kontrolü için ne kullanıyorsunuz?

type='multi-line' içeren <input> öğesi.
Tekrar deneyin.
<text> öğesi.
Tekrar deneyin.
<textarea> öğesi.
🎉
type='long' içeren <input> öğesi.
Tekrar deneyin.

Nasıl form gönderebilirsiniz?

Bir <button> öğesini tıklama.
Doğru, bu seçeneklerden biri.
Enter anahtarı kullanılıyor.
Doğru, bu seçeneklerden biri.
type='submit' içeren bir <input> öğesini tıklama.
Doğru, bu seçeneklerden biri.
Yukarıdakilerin tümü
Doğru. Tüm yanıtlar olası form gönderme seçenekleridir.

Kaynaklar