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

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> öğesi selected ö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 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ıklamak.
Doğru, bu seçeneklerden biri.
Enter tuşunu kullanma.
Doğru, bu seçeneklerden biri.
type='submit' içeren bir <input> öğesi tıklanıyor.
Doğru, bu seçeneklerden biri.
Yukarıdakilerin tümü.
Doğru. Tüm yanıtlar için form gönderme seçenekleri mevcuttur.

Kaynaklar