Çoğu site ve uygulama bir web formu içerir. Şaka siteleri (ör.Web Siteleri<form> öğesi içinde yer alır.
HTML <form> öğesi, aşağıdakileri içeren bir yer işareti tanımlar
etkileşimli kontroller sunar. <form> içinde, etkileşimli (ve etkileşimsiz) olan tüm öğeleri
kontrol de ekledik.
HTML güçlüdür. Bu bölümde, HTML'nin gücüne odaklanılmaktadır ve HTML'nin JavaScript eklemeden neler yapabileceği ele alınmaktadır. Kullanıcı arayüzünü bir şekilde güncellemek için form verileri istemci tarafında kullanılması, genellikle burada açıklanmayan CSS veya JavaScript'i içerir. Tam bir Formları Öğrenme kursu mevcuttur. Bu bölümü burada kopyalamayacağız, ancak ve bunları destekleyen HTML özellikleri içerir.
Formları kullanarak kullanıcıların web sitenizle veya başvurunuzla etkileşim kurmalarını, girilen bilgileri doğrulamalarını ve web sitenizi göndermelerini sağlayabilirsiniz.
sunucuya gönderir. HTML özellikleri, kullanıcının form denetimlerini seçmesini veya bir değer girmesini zorunlu kılabilir. HTML
özellikleri, değerin geçerli olması için eşleşmesi gereken belirli ölçütleri tanımlayabilir. Kullanıcı formu göndermeye çalıştığında,
Tüm form kontrol değerleri istemci tarafı kısıtlama doğrulamasından geçer ve gönderimi engelleyebilir
Veriler gerekli ölçütleri karşılayana kadar; Üstelik bunlar JavaScript olmadan. novalidate ayarını yaparak bu özelliği kapatabilirsiniz.
özelliğini <form> veya daha sık olarak bir düğme üzerinde formnovalidate özelliğini kullanarak,
doğrulamayı engeller.
Form gönderme
Kullanıcı, formun içine yerleştirilmiş bir gönder düğmesini etkinleştirdiğinde formlar gönderilir. Düğmeler için <input> kullanılırken
"value" düğmenin etiketidir ve düğmede görüntülenir. <button> kullanılırken etiket, açılış
ve <button> etiketleri kapatılıyor. Gönder düğmesi iki şekilde yazılabilir:
<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
Çok basit bir form için, içinde bazı form girişleri bulunan bir <form> öğesine ve bir gönder düğmesine ihtiyacınız vardır. Ancak,
form göndermenin önemli bir parçasıdır.
<form> öğesinin özellikleri, HTTP yöntemini
formun gönderildiği tarih ve form gönderme işlemini işleyen URL. Evet, formlar gönderilebilir, işlenebilir ve
yeni bir sayfa herhangi bir JavaScript olmadan yüklenebilir. <form> öğesi bu kadar güçlüdür.
<form> öğesinin action ve method
özellik değerleri, sırasıyla form verilerini işleyen URL'yi ve verileri göndermek için kullanılan HTTP yöntemini tanımlar.
Varsayılan olarak form verileri geçerli sayfaya gönderilir. Aksi takdirde, action özelliğini verilerin gönderilmesi gereken URL'ye ayarlayın.
Gönderilen veriler, formun çeşitli form denetimlerinin ad/değer çiftlerinden oluşur. Varsayılan olarak bu, tüm formları ve
kontrolleri name olan bir formda iç içe yerleştirilmiş şekilde bulunur. Ancak, form özelliğiyle form kontrolleri eklemek mümkündür.
<form> içine yerleştirilmiş form kontrollerini hariç tutmak için <form> dışında bir öğe ekleyin. Form denetimlerinde ve <fieldset> üzerinde desteklenir,
form özelliği, ilişkili olduğu kontrol biçiminin id değerini alır. Bu, her zaman
iç içe yerleştirilmiştir. Bu, form denetimlerinin fiziksel olarak bir <form> içine yerleştirilmesine gerek olmadığı anlamına gelir.
method özelliği, isteğin HTTP protokolünü tanımlar: Genellikle GET veya POST. GET ile form verileri
action URL'sine eklenen name=value çiftinin parametre dizesi.
POST ile veriler, HTTP isteğinin gövdesine eklenir. Şifreler ve kredi kartı gibi güvenli veriler gönderirken
her zaman POST kullanın.
Ayrıca DIALOG yöntemi de bulunur. <form method="dialog">, <dialog> içindeyse formu gönderdiğinizde iletişim kutusu kapatılır;
veriler temizlenmez veya gönderilmese de bir gönderme etkinliği bulunuyor. Aynı şekilde, JavaScript olmadan. Bu konu
iletişim kutusu bölümünü inceleyin. Unutmayın, bu işlem formu göndermediğinden,
Gönder düğmesine hem formmethod="dialog" hem de formnovalidate ekleyin.
Form düğmeleri, bu bölümün başında açıklanan özelliklerden daha fazlasına sahip olabilir. Düğme bir formaction içeriyorsa
formenctype, formmethod, formnovalidate veya formtarget özelliği, formu etkinleştiren düğmede ayarlanan değerler
gönderime göre önceliklidir. action, enctype, method ve target
<form> üzerinde ayarlandı. Kısıtlama doğrulaması, form gönderilmeden önce, ancak
Etkinleştirilmiş gönder düğmesinde formnovalidate veya <form> üzerinde novalidate.
Formu gönderirken hangi düğmenin kullanıldığını yakalamak için
name düğmesine basın. Ad veya değer içermeyen düğmeler, form gönderildiğinde form verileriyle birlikte gönderilmez.
Formu gönderdikten sonra
Kullanıcı, çevrimiçi bir formu doldurduğunda ilgili form kontrollerinin adları ve değerleri de gönderilir. Ad, name özelliğinin değeridir. Değerler, value özelliğinin içeriğinden veya kullanıcı tarafından girilen veya seçilen değerden gelir. <textarea> değeri iç metnidir.
<select> değeri, seçilen <option> öğesinin value değeri veya <option> bir value özelliği içermiyorsa, belirlenen seçeneğin iç metnidir.
<form method="GET">
<label for="student">Pick a student:</label>
<select name="student" id="student">
<option value="hoover">Hoover Sukhdeep</option>
<option>Blendan Smooth</option>
<option value="toasty">Toasty McToastface</option>
</select>
<input type="submit" value="Submit Form">
</form>
"Hoover Sukhdeep"i seçme (veya tarayıcı görüntülendiğinden varsayılan olarak ilk seçeneğin değerini seçtiğinden) ardından gönder düğmesini tıkladığınızda bu sayfa yeniden yüklenir ve URL şu şekilde ayarlanır:
https://web.dev/learn/html/forms?student=hoover
İkinci seçenekte value özelliği bulunmadığından iç metin değer olarak gönderilir. "Blendan Smooth"u seçme
Gönder düğmesini tıkladığınızda bu sayfa yeniden yüklenir ve URL şu şekilde ayarlanır:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Form gönderildiğinde gönderilen bilgiler, name öğesi olan tüm adlandırılmış form kontrollerinin adlarını ve değerlerini içerir.
işaretli olmayan onay kutuları, işaretlenmemiş radyo düğmeleri ve düğmenin yanındaki düğmelerin adları ve değerleri hariç,
geri bildirim gönderin. Diğer tüm form denetimlerinde, form denetiminin bir adı varsa ancak herhangi bir değer girilmemişse veya varsayılan olarak ayarlanmamışsa
form kontrolünün name işlevi boş bir değerle gönderiliyor.
22 giriş türü vardır. Bu nedenle hepsini ele alamıyoruz.
Ancak, kullanıcının bilgi girmesini istediğinizde değer eklemenin isteğe bağlı olduğunu ve genellikle kötü bir fikir olduğunu unutmayın.
Kullanıcının değeri düzenleyemeyeceği <input> öğeleri için giriş de dahil olmak üzere her zaman bir değer eklemeniz gerekir.
hidden, radio, checkbox, submit, button ve reset türündeki öğeler.
Form denetimleri için benzersiz name kullanmak, sunucu tarafı veri işlemeyi basitleştirir ve onay kutuları ve
radyo düğmeleri bu kuralın istisnasıdır.
Radyo düğmeleri
Bir grup radyo düğmesinden bir radyo düğmesi seçtiğinizde, düğmeden yalnızca bir tanesinin seçilebileceğini fark ettiyseniz
bunun nedeni name özelliğidir. Bu yalnızca bir tane seçilebilir efekt, her bir radyo düğmesine atanarak oluşturulur
name ile aynı grupta yer alıyor.
name öğesi gruba özgü olmalıdır: Yanlışlıkla iki ayrı grup için aynı name öğesini kullandıysanız ve bir radyo seçtiğinizde
düğmesi, aynı name değerine sahip ilk grupta yapılan herhangi bir seçimin seçimini kaldırır.
name ve seçilen radyo düğmesinin value simgesi formla birlikte gönderilir. Her radyo düğmesinde
Alakalı (ve genellikle benzersiz) bir value. Seçili olmayan radyo düğmelerinin değerleri gönderilmez.
Bir sayfada istediğiniz sayıda radyo grubu oluşturabilirsiniz. Her grup bağımsız olarak çalışır (her grup ayrı bir radyo grubuna sahip olduğu sürece)
benzersiz-grup name.
Sayfayı, aynı adlı bir gruptaki radyo düğmelerinden biriyle yüklemek istiyorsanız checked özelliğini ekleyin.
Bu radyo düğmesi, :default CSS sözde sınıfıyla eşleşir.
kullanıcı farklı bir radyo seçse bile. Seçili olan radyo düğmesi, :checked ile eşleşiyor
sözde-sınıf.
Kullanıcının bir radyo düğmesi grubundan radyo kontrolü seçmesi gerekiyorsa required özelliğini en az bir radyo düğmesine ekleyin
seçenekleri var. Gruba bir radyo düğmesine required eklendiğinde form gönderme işlemi için bir seçim yapılması gerekir
geçerli olarak seçilen özelliğe sahip radyo olması gerekmez. Ayrıca, <legend> bölümünde açıkça belirtin
form denetiminin gerekli olduğunu doğrulayın. Her bir düğmeyle birlikte radyo düğmesi gruplarının etiketlemesi açıklanmıştır
daha sonra yapalım.
Onay kutuları
Bir gruptaki tüm onay kutularında aynı name öğesine sahip olması geçerlidir. Yalnızca seçili onay kutularında name ve value bulunur
iletişim formuyla birlikte gönderilir. Aynı adı taşıyan birden fazla onay kutunuz varsa aynı ad
farklı değerlere sahip olduğunu umuyorum. Aynı ada sahip birden fazla form denetiminiz varsa bunların tümü onay kutuları olmasa bile
hepsi "ve" işaretiyle ayrılmış olarak gönderilir.
Onay kutularına bir value eklemezseniz seçili onay kutularının değeri varsayılan olarak on olacaktır. Bu büyük olasılıkla
yararlı olur. chk adlı üç onay kutunuz varsa ve hepsi işaretlenmişse form gönderme işlemi çözülemez:
https://web.dev/learn/html/forms?chk=on&chk=on&chk=on
Onay kutusunu zorunlu kılmak için required özelliğini ekleyin. Bir onay kutusunun işaretlenmesi gerektiğinde veya
her tür form kontrolü gerekli değildir. Bir onay kutusuna required eklemek yalnızca o onay kutusunu gerekli kılar; diğerlerini etkilemez
aynı ada sahip onay kutuları var.
Etiketler ve alan kümeleri
Kullanıcıların formu nasıl dolduracağını anlaması için formun erişilebilir olması gerekir. Her form kontrolünün etiketi olmalıdır.
Form denetimi gruplarını da etiketlemek isteyebilirsiniz. Bağımsız giriş, seçim ve metin alanları <label> ile etiketlenirken,
form denetimi grupları, form kontrollerinin <legend> içeriğine göre etiketlenir
bunları gruplandıran <fieldset>.
Önceki örneklerde, gönder düğmesi hariç her form kontrolünde <label> olduğunu fark etmiş olabilirsiniz. Etiketler
erişilebilir adlarla form denetimleri sağlama. Düğmeler, erişilebilir adlarını içeriklerinden veya değerlerinden alır. Diğer tüm
Form denetimleri, ilişkili bir <label> gerektirir. İlişkili bir etiket yoksa tarayıcı form kontrollerinizi oluşturmaya devam eder.
ancak kullanıcılar hangi bilgilerin beklendiğini bilemez.
Bir form kontrolünü, <label> ile açıkça ilişkilendirmek için <label> öğesine for özelliğini ekleyin: değer
İlişkili olduğu form denetiminin id kadarı.
<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">
Etiketleri form kontrolleriyle ilişkilendirmenin çeşitli avantajları vardır. Etiketler, kontrole erişilebilir bir ad vermelidir. Etiketler aynı zamanda "isabet alanları"dır; siteyi daha kullanışlı hale getiren el becerisi konusunda sorunlar ortaya çıktı. Fare kullanıyorsanız "Adınız" etiketinin üzerinde herhangi bir yeri tıklamayı deneyin. Yapmak giriş odağı bulunur.
Örtülü etiketler sağlamak için açılış ve kapanış <label> etiketleri arasına form kontrolü ekleyin. Bu değer,
hem ekran okuyucu hem de işaretçi cihaz açısından erişilebilir, ancak
etiket.
<label>Your name
<input type="text" name="name">
</label>
Etiketler "isabet alanları" olduğundan, açık etiketlere veya başka etkileşimli bileşenlere yer vermeyin kontrolden emin olun. Örneğin, bir etikete bir bağlantı eklerseniz tarayıcı oluşturursa kullanıcılarınız, form kontrolüne girmek üzere etiketi tıkladığında kafaları karışır ancak açın.
Radyo düğmeleri ve onay kutuları olmadığı sürece <label>, genellikle form kontrolünden önce gelir. Bu zorunlu değildir.
Bu genel kullanıcı deneyiminden ibaret. Learn Formlar serisi, form tasarımı hakkında bilgi içerir.
Radyo düğmesi ve onay kutusu grupları için etiket, ilişkili olduğu form denetimi için erişilebilir ad sağlar;
ancak denetim grubunun ve etiketlerinin de bir etikete ihtiyacı vardır. Grubu etiketlemek için tüm öğeleri
<fieldset> (<legend>), grup için etiket sağlar.
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<label>
<input type="radio" value="blendan" name="machine"> Blendan Smooth
</label>
</li>
<li>
<label>
<input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
</label>
</li>
<li>
<label>
<input type="radio" value="toasty" name="machine"> Toasty McToastface
</label>
</li>
</ul>
</fieldset>
Bu örnekte, örtülü <label> her bir radyo düğmesini etiketler ve <legend>, radyo düğmesi grubu için etiket sağlar.
Bir <fieldset> öğesini başka bir <fieldset> içine yerleştirmek standart uygulamadır. Örneğin, bir form birçok sorudan oluşan bir anketse
"favori öğrenci", "favori öğrenci" adı verilen <fieldset>, şu şekilde etiketlenmiş başka bir <fieldset> içine yerleştirilmiş olabilir:
"Favorileriniz":
<fieldset>
<legend>Your favorites:</legend>
<ul start="6">
<li>
<fieldset>
<legend>Who is your favorite student?</legend>
<ul>
<li>
<!-- the rest of the code here -->
Bu öğelerin varsayılan görünümler gereğinden az kullanılmasına neden olmuştur, ancak <legend> ve <fieldset> için CSS ile stil sağlanabilir.
<fieldset>, tüm genel özelliklere ek olarak name, disabled ve form özelliklerini de destekler.
Bir alan grubunu devre dışı bıraktığınızda, iç içe yerleştirilmiş tüm form kontrolleri devre dışı bırakılır. Ne name ne de form özellikleri
<fieldset> üzerinde çok kullanılıyor. name, alan kümesine JavaScript ile erişmek için kullanılabilir ancak alan grubunun kendisi
gönderilen verilere dahil değil (iç içe yerleştirilmiş adlandırılmış form kontrolleri dahil).
Giriş türleri ve dinamik klavye
Daha önce belirtildiği gibi, 22 farklı giriş türü vardır.
Bazı durumlarda, kullanıcı yalnızca gerektiğinde görüntülenen dinamik klavyeye sahip bir cihaz (ör. telefon) kullanırken
kullanılan tür, görüntülenen klavyenin türünü belirler. Gösterilen varsayılan klavye, gerekli giriş türüne göre optimize edilebilir.
Örneğin, tel yazdığınızda telefon numaralarını girmek için optimize edilmiş bir tuş takımı gösterilir; email şunları içerir: @ ve .; ve
url için dinamik klavyede iki nokta üst üste ve eğik çizgi sembolü bulunuyor. Maalesef iPhone, : içermiyor
url giriş türü için varsayılan dinamik klavye.
iPhone ve iki farklı Android telefondaki <input type="tel"> klavyeleri:
iPhone ve iki farklı Android telefondaki <input type="email"> klavyeleri:
Mikrofon ve kameraya erişme
<input type="file"> dosya giriş türü, dosyaların formlar aracılığıyla yüklenmesini sağlar. Dosyalar herhangi bir türde, tanımlanmış ve sınırlı olabilir
accept özelliğine göre. Kabul edilebilir dosya türleri listesi; dosya uzantılarının virgülle ayrılmış listesi, genel tür,
ya da global türlerin ve uzantıların bir kombinasyonunu kullanabilirsiniz. Örneğin, accept="video/*, .gif" tüm video dosyalarını veya animasyonlu GIF'leri kabul eder.
"audio/*" etiketini kullan ses dosyaları için, "video/*" video dosyaları ve "image/*" için kullanır.
Şunda tanımlanan numaralandırılmış capture özelliği:
medya yakalama spesifikasyonu, yeni bir medya dosyası
dosyasının kullanıcının kamerası veya mikrofonu kullanılarak oluşturulması gerekir. Kullanıcılara yönelik giriş cihazları için değeri user olarak ayarlayabilirsiniz
ya da telefonun arka kamerası veya mikrofonu için environment. Genellikle, capture bir değer olmadan kullanıldığında kullanıcının
kullanmak istedikleri giriş cihazını seçecek.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Yerleşik doğrulama
Yine JavaScript eklemeden, HTML geçersiz değer içeren formların gönderilmesini engelleyebilir.
:required dahil olmak üzere HTML özelliklerinin varlığına dayalı form kontrolleriyle eşleşen bazı CSS seçiciler vardır.
ve boole değeri required ise :optional
ayarlanıp ayarlanmadığını kontrol edin; checked ise :default
sabit kodludur; ve :enabled veya :disabled,
bağlı olup olmadığına ve disabled
özelliği olmalıdır. :read-write sözde sınıfı, öğeleri
contenteditable set ve
varsayılan olarak düzenlenebilir form kontrolleri, örneğin, number, password ve text giriş türleri (onay kutusu değil,
veya hidden türü) kullanabilirsiniz. Normalde yazılabilir bir öğede readonly varsa
özellik ayarlanmışsa :read-only ile eşleşir.
Kullanıcı form kontrollerine bilgi girerken :valid dahil olmak üzere CSS kullanıcı arayüzü seçicileri
:invalid, :in-range ve
:out-of-range duruma bağlı olarak açılıp kapatılır. Kullanıcı
bir form kontrolünden (henüz tam olarak desteklenmeyen :user-invalid) veya
:user-valid sözde sınıf eşleşecek.
Kullanıcı formla etkileşimde bulunurken form kontrollerinin gerekli ve geçerli olup olmadığına dair ipuçları vermek için CSS'yi kullanabilirsiniz. Form geçerli olana kadar kullanıcıların gönder düğmesini tıklamasını engellemek için CSS bile kullanabilirsiniz:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Bu CSS snippet'i, kalıp dışı. Kullanıcı arayüzünüz sezgisel ve anlaşılır görünse de, birçok kullanıcı hata mesajlarını etkinleştirin. Bir gönder düğmesinin bu şekilde devre dışı bırakılmış olarak gösterilmesi kısıtlama doğrulamaya bir çok özelliği var.
Uygulanan CSS, kullanıcı arayüzünün mevcut durumuna göre sürekli olarak güncellenir. Örneğin,
Değer null değilse (boş değil) ve geçerli değer null değilse (boş değilse) email, number, url ve tarih türleri gibi kısıtlamalar
değeri geçerli bir e-posta, sayı, url, tarih veya saat değil. :invalid CSS sözde sınıfı bir eşleşme olacak. Bu sabit
güncelleme işlemi, yalnızca kullanıcı formu göndermeyi denediğinde gerçekleşen yerleşik HTML kısıtlama doğrulamasından farklıdır.
Yerleşik kısıtlama doğrulaması yalnızca HTML özellikleriyle ayarlanan kısıtlamalarla ilgilidir. Bir öğeyi temel alarak
:required ve :valid/:invalid sözde sınıflarında, tarayıcı,
required, pattern, min, max ve hatta type özellikleri form gönderildiğinde gelir.
Gereken favori öğrenciyi seçmeden formu göndermeye çalıştığımızda kısıtlama doğrulaması, formun gönderilmesini engeller
validityState.valueMissing hatası nedeniyle hesaplanmadı.
validityState özelliklerinden herhangi biri true sonucu döndürürse gönderim engellenir ve tarayıcı bir hata mesajı gösterir.
geçersiz kılmayı tercih eder. Kullanıcı bir form göndermeyi etkinleştirdiğinde ve geçersiz değerler olduğunda,
geçersiz olan ilk form kontrolü bir hata mesajı gösterir ve odağı alır. Gerekli bir kontrol için herhangi bir değer ayarlanmamışsa
sayısal değer aralık dışında veya değer type özelliğinin gerektirdiği türde değilse form doğrulanmaz.
gönderilmez ve bir hata mesajı görüntülenir.
number, tarih veya saat değeri minimum min değerinin altında veya maksimum max değerinin üzerindeyse kontrol :out-of-range (ve :invalid) olur ve
kullanıcı, valididityState.rangeUnderflow,
validityState.rangeOverflow hatası verdiyse
formu göndermeyi deneyin. Değer,
step değeri, açıkça 1 olarak ayarlanmış veya varsayılan olarak ayarlanmış olsa da, kontrol :out-of-range (ve :invalid) olacak ve bir
validityState.stepMismatch hatası. Hata bir baloncuk olarak görünür ve varsayılan olarak hatanın nasıl düzeltileceği hakkında faydalı bilgiler sağlar.
Değerlerin uzunluğu için benzer özellikler vardır: minlength
ve maxlength özellikleri kullanıcıyı bir hata konusunda uyarır
validityState.tooLong veya
Gönderildiğinde validityState.tooShort.
maxlength, kullanıcının çok fazla karakter girmesini de engeller.
maxlength özelliğini kullanmak, olumsuz bir kullanıcı deneyimine yol açabilir. Kullanıcının belirli bir
bir sayaç sağlayarak izin verilen karakter uzunluğundan daha fazlasını girin (isteğe bağlı olarak
<output> öğesi (formla birlikte gönderilmeyen)
Böylece çıkış, izin verilen maksimum uzunluğun aşılmadığını gösterene kadar metni düzenleyebilir. maxlength
HTML'nize eklenebilir; olduğu gibi JavaScript olmadan çalışır. Daha sonra, yükleme sırasında
maxlength özelliği, JavaScript'te bu karakter sayacını oluşturmak için kullanılabilir.
Bazı giriş türlerinde varsayılan kısıtlamalar var gibi görünse de yoktur. Örneğin, tel giriş türü sayısal bir değer sağlar
telefon tuş takımı olan ancak geçerli değerleri kısıtlamayan dinamik klavyelere sahip cihazlarda. Bunun için ve diğer giriş türlerinde
pattern özelliği var. Değerin geçerli olarak kabul edilmesi için eşleşmesi gereken bir normal ifade belirtebilirsiniz.
Bir değer boş dizeyse ve değer gerekli değilse validityState.patternMismatch değerine neden olmaz.
hatası. Gerekli ve boş olursa kullanıcıya şu yerine varsayılan hata mesajı gösterilir: validityState.valueMissing
patternMismatch.
E-postalarda validityState.typeMismatch büyük olasılıkla da
affedersiniz. pattern etiketini de ekleyebilirsiniz.
özelliği ile birlikte TLD olmayan intranet e-posta adresleri geçerli olarak kabul edilmez.
Desen özelliği, değerin eşleşmesi gereken normal bir ifadenin sağlanmasına olanak tanır. Kalıp eşleşmesi gerektiğinde
kullanıcı için ne beklendiğini çok net bir şekilde anlamalıdır.
Tüm bunlar tek bir JavaScript satırı olmadan yapılabilir. Ancak bir HTML API'sı olduğunuzdan, özel mesajlarla karşılaşabilirsiniz. Kaç karakterin kaldığını güncellemek için de JavaScript kullanabilir, şifre gücü için bir ilerleme çubuğu veya tamamlanmayı dinamik olarak iyileştirmek üzere başka çeşitli yöntemler kullanabilirsiniz.
Örnek
Bu örnekte, <dialog> içinde üç form kontrolü ve iki gönder düğmesi bulunan, iç içe yerleştirilmiş bir <form> içeren bir form vardır.
net etiketler ve talimatlar.
İlk gönder düğmesi iletişim kutusunu kapatır. Formun varsayılan yöntemini geçersiz kılmak için formmethod="dialog" kullanın ve
<dialog>. formnovalidate öğesini de eklemeniz gerekir. Aksi takdirde tarayıcı
tüm zorunlu alanlarda bir değer olup olmadığını doğrulamaya çalışın. Kullanıcı iletişim kutusunu ve formu
herhangi bir veri girerek; doğrulama bunu önleyecektir. "X" nedeniyle aria-label="close" dahil edilsin bilinen bir görsel işaret olduğu için
değil.
Form denetimlerinin tümünde örtülü etiketler olduğundan id veya for özelliklerini eklemenize gerek yoktur. Hem giriş öğeleri
gerekli özelliğe sahip olmaları gerekir. Sayı girişinde, step öğesinin nasıl olduğunu göstermek için açıkça ayarlanmış step var
dahil. step için varsayılan değer 1 olduğundan bu özellik atlanabilir.
<select>, required özelliğini gereksiz hale getiren varsayılan bir değere sahiptir. value özelliğini eklemek yerine
her seçenekte değer varsayılan olarak iç metne ayarlanır.
Sondaki gönder düğmesi form yöntemini POST olarak ayarlar. Bu düğmeyi tıkladığınızda her değerin geçerliliği kontrol edilir. Tümü
değerleri geçerliyse form verileri gönderilir, iletişim kutusu kapanır ve sayfa thankyou.php adresine yönlendirebilir.
Bu, işlem URL'sidir. Eksik değerler varsa veya sayısal değer adım uyuşmazlığıysa ya da aralık dışındaysa
tarayıcı tarafından tanımlanmış ilgili hata mesajı görünür, form gönderilmez ve iletişim kutusu kapanmaz.
Varsayılan hata mesajları validityState.setCustomValidity('message here') ile özelleştirilebilir
yöntemidir. Özel bir ileti ayarlarsanız, her şey etkinken iletinin açıkça boş dize olarak ayarlanması gerektiğini unutmayın.
geçerli olur ya da form gönderilmez.
Dikkat edilmesi gereken diğer noktalar
Tümüyle kullanıcılarınızın formlara doğru verileri girmelerine yardımcı olmaya adanmış bir bölüm vardır. İyilik kullanıcı deneyimini iyileştirmeye çalışırken, gerektiğinde talimatlar ekleyerek ve ipuçları sağlayarak kullanıcıların hata yapmasını önlemek önemlidir. Bu bölümde, tek başına HTML'nin istemci tarafında nasıl doğrulama sağlayabileceği açıklansa da doğrulama, hem istemci hem de kullanıcı tarafında olmalıdır. tarafından desteklenmektedir. Doğrulama işlemi, form doldururken rahatsız edici olmayan bir şekilde yapılabilir. Örneğin, onay işareti koyun. Ancak form kontrolü tamamlanmadan hata mesajı vermeyin. Kullanıcı hata yaptığını ve kullanıcıya hatanın nerede olduğunu ve ne yanlış yaptığını bildirir.
Form tasarlarken herkesin sizin gibi olmadığını unutmamanız önemlidir. Bir kullanıcı Soyadı olarak tek bir harften oluşabilir (veya soyadı olmadan), posta kodu olmayabilir, üç satırdan oluşan bir açık adres bulunabilir, açık adresi olmayabilir. Formunuzun çevrilmiş bir sürümünü görüntülüyor olabilirler.
Form denetimleri, etiketleri ve hata mesajları doğru ve anlamlı, programatik olarak ekranda görünür olmalıdır
ilgili form öğesi veya grupla programlanabilir biçimde ilişkilendirilir. autocomplete
özelliğinin daha hızlı doldurulması ve erişilebilirliği artırmak için kullanılabilir ve kullanılmalıdır.
HTML, temel form denetimlerini erişilebilir hale getirmek için gereken tüm araçları sağlar. Form öğesi veya süreci ne kadar etkileşimli olursa Odak yönetimi, ARIA adlarını, rollerini belirleme ve güncelleme konularında erişilebilirliğe daha çok dikkat edilmelidir. ve gerektiği durumlarda ARIA canlı duyuruları içerir. Ancak burada öğrendiğimiz gibi, yalnızca HTML kullanarak erişilebilirlik ve geçerlilik hedefinize ulaşmak için uzun yol katedersiniz.
Öğrendiklerinizi sınayın
Formlar hakkındaki bilginizi test edin.
Radyo düğmelerinin aynı grubun parçası olmasını nasıl sağlarsınız?
name özellik değerini verin.id özellik değerini verin.Bu form alanının neyle ilgili olduğunu kullanıcıya anlatmak için hangi HTML öğesi kullanılır?
<h1><title><label>