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

Formu etkileşimli hale getirmek için form öğeleri eklemeniz gerekir. Veri girmek ve seçmek için kontroller, kontrolleri açıklayan öğeler, alanları gruplandıran öğeler ve form göndermek için düğmeler bulunur.

Form öğeleri nedir?

<input>, <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ına ve type özelliğine göre farklı kullanıcı arayüzleri gösterir, farklı doğrulama kuralları kullanır ve başka birçok özellik sunar. Uygun form kontrolünü 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. Ancak kullanıcı, en sevdiği rengi girmesi gerektiğini nereden bilecek?

Form kontrollerini açıklamak için her form kontrolü için 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şiyor.

Kullanıcı girişini yakalama

Adından da anlaşılacağı gibi, <input> öğesi kullanıcılardan giriş almak için kullanılır.

<label for="color">What is your favorite color</label>
<input type="text" id="color" name="color">

Daha önce de belirtildiği gibi, id özelliği <input> ile <label> arasında bağlantı kurar. Bu örnekteki ad ve tür özelliği hakkında ne söylenebilir?

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 dahil edilir. Bir form denetimine mountain adını verdiğinizi ve kullanıcının Gutenberg girdiğini varsayalım. İstek, bu bilgiyi mountain=Gutenberg olarak içerir.

Form kontrolünün adını hill olarak değiştirmeyi deneyin. Bu işlemi doğru şekilde yapıp formu gönderirseniz URL'de hill görünür.

Giriş türü

Farklı tarayıcılar ve platformlarda çalışan, faydalı yerleşik özelliklere sahip farklı form denetimi türleri vardır. Tarayıcı, type özelliğine göre farklı kullanıcı arayüzleri oluşturur, farklı ekran klavyeleri gösterir, farklı doğrulama kuralları kullanır ve daha fazlasını yapar. Türü nasıl değiştireceğinizi öğrenin.

type="checkbox" kullanıldığında tarayıcı artık metin alanı yerine onay kutusu oluşturur. Onay kutusunda ek özellikler de bulunur. checked özelliğini işaretli olarak göstermek için ayarlayabilirsiniz.

Seçebileceğiniz başka türler de vardır. Bunu daha sonraki bir modülde ayrıntılı olarak ele alacağız.

Birden fazla metin satırına izin ver

Örneğin, kullanıcının yorum yazabileceği bir alana ihtiyacınız var. Bu durumda, birden fazla metin satırı girebilmeleri iyi olmaz mıydı? <textarea> öğesinin amacı budur.

<label for="comment">Comment</label>
<textarea id="comment" name="comment"></textarea>

Seçenek listesinden seçim yapma

Kullanıcılara seçim yapabilecekleri bir seçenek listesini nasıl sunarsınız? Bunu yapmak için <select> öğesini kullanabilirsiniz.

<label for="color">Color</label>
<select id="color" name="color">
  <option value="orange">Orange</option>
  <option value="pink">Pink</option>
</select>

Öncelikle bir <select> öğesi ekleyin. Diğer tüm form kontrollerinde olduğu gibi, <label> özelliğini kullanarak id ile bağlar ve name özelliğini kullanarak benzersiz bir ad verirsiniz.

<select> öğesinin başlangıç ve bitiş etiketi 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. Bu nedenle, form verilerini işlerken bunları birbirinden ayırt edebilirsiniz. Seçenek öğesinin içindeki metin, okunabilir değerdir.

Formu bu <select> seçeneğini değiştirmeden gönderirseniz istek color=orange içerir. Ancak tarayıcı, hangi seçeneğin kullanılacağını nasıl anlar?

Tarayıcı, listedeki ilk seçeneği kullanır. Ancak:

  • Bir <option> öğesi selected özelliğine sahip.
  • Kullanıcı başka bir seçenek belirler.

Bir seçeneği önceden belirleme

selected özelliğiyle bir seçeneği önceden belirleyebilirsiniz. Bu, <option> öğelerinin tanımlanma sırasından bağımsız olarak varsayılan olur.

Form denetimlerini gruplandırma

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? Ne için kullanıldığını düşünüyorsunuz?

Yanıtınız "form kontrolleri grubunu tanımlamak" ise doğru cevap verdiniz.

Her <fieldset> öğesi bir <legend> öğesi gerektirir. Aynı şekilde, her form kontrolü de ilişkili bir <label> öğesi gerektirir. <legend>, <fieldset> içindeki ilk öğe de olmalıdır. <legend> öğesinden sonra, gruba dahil edilmesi gereken form kontrollerini tanımlayabilirsiniz.

Form gönderme

Form kontrollerini eklemeyi ve gruplandırmayı öğrendikten sonra kullanıcıların formu nasıl gönderebileceğini merak edebilirsiniz.

İlk seçenek, <button> öğesini kullanmaktır.

<button>Submit</button>

Kullanıcı Gönder düğmesini tıkladıktan sonra tarayıcı, form kontrollerindeki tüm verilerle birlikte <form> öğesinin action özelliğinde belirtilen URL'ye bir istek gönderir.

<button> öğesi yerine type="submit" ile birlikte bir <input> öğesi de kullanabilirsiniz. Giriş, tıpkı bir <button> gibi görünür ve davranır. <input> öğesini açıklamak için <label> öğesini kullanmak yerine value özelliğini kullanın.

<input type="submit" value="Submit">

Ayrıca, bir form alanı odaklandığında Enter tuşu kullanılarak da form gönderilebilir.

Anlayıp anlamadığınızı kontrol etme

Form öğeleriyle ilgili bilginizi test edin

<label> öğesini form denetimine nasıl bağlarsınız?

<label> üzerindeki for='color' ve <input> üzerindeki name='color'.
Tekrar deneyin.
<label> üzerindeki for='color' ve <input> üzerindeki id='color'.
Doğru!
<label> üzerindeki id='color' ve <input> üzerindeki for='color'.
Tekrar deneyin.
<label> üzerindeki name='color' ve <input> üzerindeki 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 biridir.
Enter tuşunu kullanma
Doğru, bu seçeneklerden biridir.
type='submit' içeren bir <input> öğesini tıklama
Doğru, bu seçeneklerden biridir.

Kaynaklar