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 denetimler, denetimleri açıklayan öğeler, alanları gruplandıran öğeler ve form göndermek için 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ına ve tür ö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 doldurması gerektiğini nasıl 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ş toplamak 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> öğesini <label> öğesine bağlar. Bu örnekteki ad ve tür özelliği ne olacak?

ad özelliği

Kullanıcının denetimle girdiği verileri tanımlamak için name özelliğini kullanın. Formu gönderirseniz bu ad isteğe eklenir. Bir form denetimini mountain olarak adlandırdığınızı ve kullanıcının Gutenberg değerini girdiğini varsayalım. İstek, bu bilgileri mountain=Gutenberg olarak içerir.

Form denetiminin adını hill olarak değiştirmeyi deneyin. Bunu doğru şekilde yapar ve formu gönderirseniz URL'de hill görünür.

Giriş türü

Farklı form denetimi türleri vardır. Bunların tümü, farklı tarayıcılarda ve platformlarda çalışan kullanışlı yerleşik özelliklere sahiptir. 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ğinize bakalım.

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

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

Birden fazla 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 fazla satır metin girebilselerdi çok 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 aralarından seçim yapabilecekleri seçeneklerin listesini nasıl sunuyorsunuz? 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>

Önce bir <select> öğesi ekleyin. Diğer tüm form denetimlerinde olduğu gibi, id özelliğini kullanarak bir <label>'e 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. Böylece form verilerini işlerken bunları birbirinden ayırt edebilirsiniz. option öğesinin içindeki metin, kullanıcı tarafından okunabilir değerdir.

Seçimi değiştirmeden formu bu <select> ile gönderirseniz istek color=orange içerir. Peki tarayıcı hangi seçeneğin kullanılacağını nasıl bilir?

Aşağıdaki durumlar hariç olmak üzere tarayıcı listedeki ilk seçeneği kullanır:

  • Bir <option> öğesinde selected özelliği var.
  • Kullanıcı başka bir seçenek seçer.

Bir seçeneği önceden belirleme

selected özelliğiyle bir seçeneği önceden belirleyebilirsiniz. Bu, <option> öğelerinin tanımlanma sırasına bakılmaksızın varsayılan değer olur.

Form denetimlerini 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çinde <legend> öğesini fark ettiniz mi? Ne için kullanıldığını düşünüyorsunuz?

Yanıtınız "form denetimleri grubunu tanımlamak için" ise doğru bildiniz.

Her form denetiminin ilişkili bir <label> öğesine ihtiyaç duyması 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 denetimlerini tanımlayabilirsiniz.

Form gönderme

Form denetimlerini nasıl ekleyeceğinizi ve gruplandıracağınızı öğrendikten sonra, kullanıcıların formları nasıl gönderebileceğini merak edebilirsiniz.

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

<button>Submit</button>

Kullanıcı Gönder düğmesini tıkladıktan sonra tarayıcı, form denetimlerindeki tüm verileri <form> öğesinin işlem özelliğinde belirtilen URL'ye gönderir.

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

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

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

Öğrendiklerinizi test etme

Form öğeleriyle ilgili bilginizi test edin

<label> öğesini bir form denetimine nasıl bağlayabilirim?

<label>'da for='color', <input>'da name='color'.
Tekrar deneyin.
<label>'da for='color' ve <input>'da id='color'.
Doğru!
<label>'da id='color' ve <input>'da for='color'.
Tekrar deneyin.
<label>'da name='color' ve <input>'da for='color.
Tekrar deneyin.

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

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

Form nasıl gönderilir?

<button> öğesini tıklamak.
Doğru, bu seçeneklerden biri.
Enter tuşunu kullanarak.
Doğru, bu seçeneklerden biri.
type='submit' içeren bir <input> öğesini tıklamak
Doğru, bu seçeneklerden biri.

Kaynaklar