Çoğu site ve uygulama bir web formu içerir. Örneğin, DoWebsites<form> öğesi içinde bulunur.
HTML <form> öğesi, bilgi göndermeye yönelik etkileşimli denetimler içeren bir belge sabit işaretini tanımlar. <form> içine yerleştirilmiş, o formu oluşturan tüm etkileşimli (ve etkileşimli olmayan) form kontrollerini bulabilirsiniz.
HTML güçlüdür. Bu bölüm, HTML'nin gücüne odaklanıp HTML'nin JavaScript eklemeden neler yapabileceğini ele almaktadır. Kullanıcı arayüzünü bir şekilde güncellemek için form verilerinin istemci tarafında kullanılması, genellikle burada açıklanmayan CSS veya JavaScript'i içerir. Formları Öğrenme kursunun tamamını inceleyin. Bu bölümü burada tekrarlamayacağız ancak çeşitli form denetimleri ve bunları destekleyen HTML özelliklerini kullanıma sunacağız.
Formlarla, kullanıcıların web sitenizle veya uygulamanızla etkileşim kurmasını, girilen bilgileri doğrulamasını ve verileri bir sunucuya göndermesini sağlayabilirsiniz. HTML özellikleri, kullanıcının form denetimlerini seçmesini veya 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 veriler gerekli ölçütlerle eşleşene kadar gönderilmesini engelleyebilir. Bunların hiçbiri JavaScript olmadan. Bu özelliği de kapatabilirsiniz: <form> üzerinde novalidate özelliğini ya da daha sık olarak, bir düğmede formnovalidate özelliğini ayarlamak, form verilerini daha sonra tamamlanmak üzere kaydetmek doğrulamayı engeller.
Form gönderme
Kullanıcı, form içine yerleştirilmiş bir gönder düğmesini etkinleştirdiğinde formlar gönderilir. Düğmeler için <input> kullanıldığında "value", düğmenin etiketidir ve düğmede gösterilir. <button> kullanılırken etiket, açılış ve kapanış <button> etiketleri arasındaki metindir. 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 gönder düğmesine ihtiyacınız vardır. Ancak form göndermekten çok daha fazlası vardır.
<form> öğesinin özellikleri, formun gönderileceği HTTP yöntemini ve form gönderimini işleyen URL'yi belirler. Evet, formlar gönderilebilir, işlenebilir ve
yeni bir sayfa JavaScript olmadan yüklenebilir. <form> öğesi işte bu kadar güçlü.
<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 denetimlerindeki ad/değer çiftlerinden oluşur. Varsayılan olarak buna, form içinde iç içe yerleştirilmiş, name içeren tüm form denetimleri dahildir. Bununla birlikte, form özelliğiyle <form> dışındaki form kontrollerini eklemek ve <form> içine yerleştirilmiş form kontrollerini çıkarmak mümkündür. Form kontrollerinde ve <fieldset> üzerinde desteklenen form özelliği, ilişkilendirildiği kontrolün id değerini alır ve iç içe yerleştirildiği biçimi yansıtmayabilir. Diğer bir deyişle, form kontrollerinin bir <form> içine fiziksel olarak yerleştirilmesi gerekmez.
method özelliği, isteğin HTTP protokolünü tanımlar: genellikle GET veya POST. GET ile form verileri, action URL'sinin sonuna eklenen name=value çiftlerinden oluşan bir parametre dizesi olarak gönderilir.
POST ile veriler HTTP isteğinin gövdesine eklenir. Şifreler ve kredi kartı bilgileri gibi güvenli verileri gönderirken her zaman POST kullanın.
Ayrıca bir DIALOG yöntemi de vardır. <form method="dialog">, <dialog> içindeyse formun gönderilmesi iletişim kutusunu kapatır. Ancak veriler temizlenmez veya gönderilmez ancak gönderme etkinliği vardır. Aynı şekilde, JavaScript olmadan. Bu, iletişim bölümünde ele alınmaktadır. Ancak bu işlem formu göndermediğinden, gönder düğmesine hem formmethod="dialog" hem de formnovalidate eklemek isteyebilirsiniz.
Form düğmeleri, bu bölümün başında açıklanandan daha fazla özellik içerebilir. Düğmede formaction,
formenctype, formmethod, formnovalidate veya formtarget özelliği varsa form gönderimini etkinleştiren düğmede ayarlanan değerler, <form> bölümünde ayarlanan action, enctype, method ve target değerlerinden öncelikli olur. Kısıtlama doğrulaması, form gönderilmeden önce gerçekleşir. Ancak bu doğrulama işlemi yalnızca etkinleştirilen gönder düğmesinde formnovalidate veya <form> öğesinde novalidate yoksa gerçekleşir.
Formu gönderirken hangi düğmenin kullanıldığını öğrenmek için düğmeye name ekleyin. Ad veya değer içermeyen düğmeler, form gönderilirken form verileriyle birlikte gönderilmez.
Formu gönderdikten sonra
Kullanıcı, doldurduğu bir online form gönderdiğinde ilgili form kontrollerinin adları ve değerleri gönderilir. Ad, name özelliğinin değeridir. Değerler, value özelliğinin içeriklerinden veya kullanıcı tarafından girilen ya da seçilen değerden gelir. <textarea> değeri, iç metnidir.
<select> değeri, seçilen <option> öğesinin value değeridir veya <option> bir value özelliği içermiyorsa seçilen 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çtikten (veya tarayıcı görüntüleyip bu nedenle varsayılan olarak ilk seçenek değerini seçtiğinden hiçbir şey yapmadan) ve ardından gönder düğmesini tıkladığınızda bu sayfa yeniden yüklenir. 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çip gönder düğmesini tıkladığınızda bu sayfa yeniden yüklenir. URL şu şekilde ayarlanır:
https://web.dev/learn/html/forms?student=Blendan+Smooth
Bir form gönderildiğinde, gönderilen bilgiler, seçilmemiş onay kutuları ve seçilmemiş radyo düğmeleri hariç name öğesine sahip adlandırılmış tüm form denetimlerinin adlarını ve değerlerini ve formu gönderen düğme dışındaki düğmelerin adlarını ve değerlerini içerir. Diğer tüm form kontrolleri için form kontrolünün adı varsa ancak herhangi bir değer girilmemişse veya varsayılan olarak ayarlanmamışsa form kontrolünün name değeri boş bir değerle gönderilir.
22 giriş türü bulunduğundan tümüne değinemeyiz.
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 her zaman bir değer eklemelisiniz. Buna, hidden, radio, checkbox, submit, button ve reset türündeki giriş öğeleri için de dahildir.
Form kontrolleri için benzersiz name kullanılması, sunucu tarafındaki veri işlemeyi kolaylaştırır ve onay kutuları ile radyo düğmelerinin istisnaları olarak kabul edilmesi önerilir.
Radyo düğmeleri
Bir radyo düğmesi grubundaki radyo düğmesini seçtiğinizde, aynı anda yalnızca bir radyo düğmesinin seçilebildiğini daha önce fark ettiyseniz bunun nedeni name özelliğidir. Yalnızca bir tane seçilebilir efekti, bir gruptaki her radyo düğmesine aynı name değeri vererek oluşturulur.
Bir name, gruba özgü olmalıdır: Yanlışlıkla iki ayrı grup için aynı name öğesini kullanırsanız ikinci grupta bir radyo düğmesini seçtiğinizde, ilk grupta aynı name öğesine sahip seçimler kaldırılır.
Seçili radyo düğmesindeki value ile birlikte name formla birlikte gönderilir. Her radyo düğmesinin alakalı (ve genellikle benzersiz)
bir value içerdiğinden emin olun. Seçili olmayan radyo düğmelerinin değerleri gönderilmez.
Her biri gruba özgü bir name değerine sahip olduğu sürece, bir sayfada istediğiniz kadar radyo grubunuz olabilir. Bu grupların her biri bağımsız şekilde çalışır.
Sayfayı aynı adlı gruptaki radyo düğmelerinden biriyle yüklemek istiyorsanız checked özelliğini ekleyin.
Kullanıcı farklı bir radyo seçse bile bu radyo düğmesi, :default CSS sözde sınıfıyla eşleşir. Seçili durumdaki radyo düğmesi, :checked sözde sınıfıyla eşleşiyor.
Kullanıcının bir grup radyo düğmesi arasından bir radyo denetimi seçmesi gerekiyorsa denetimlerden en az birine required özelliğini ekleyin. Bir gruptaki radyo düğmesine required eklemek, form gönderimi için bir seçimi zorunlu kılar ancak geçerli olması için seçilen özelliğe sahip radyo olması gerekmez. Ayrıca <legend> öğesinde form kontrolünün gerekli olduğunu açıkça belirtin. Radyo düğmesi gruplarının her bir düğmeyle birlikte etiketlenmesi, daha sonra
açıklanmıştır.
Onay kutuları
Bir gruptaki tüm onay kutularında aynı name olması için geçerlidir. Yalnızca seçili onay kutularına ait name ve value
formla gönderilir. Aynı ada sahip birden fazla onay kutunuz varsa aynı ad (umarız) farklı değerlerle gönderilir. Aynı ada sahip birden fazla form kontrolünüz varsa bunların tümü onay kutuları olmasa bile hepsi "ve" işaretiyle ayrılmış olarak gönderilir.
Bir onay kutusuna value eklemezseniz seçili onay kutularının değeri varsayılan olarak on olur. Bu da büyük olasılıkla faydalı olmayacaktır. chk adında üç onay kutunuz varsa ve hepsi işaretlenmişse form gönderimi çö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 herhangi bir form kontrolü gerektiğinde kullanıcıyı her zaman bilgilendirin. Bir onay kutusuna required eklenmesi yalnızca onay kutusunu zorunlu kılar; aynı ada sahip diğer onay kutularını etkilemez.
Etiketler ve alan grupları
Kullanıcıların bir formu nasıl dolduracağını bilmesi için formun erişilebilir olması gerekir. Her form kontrolünde etiket olmalıdır.
Ayrıca form denetimi gruplarını etiketlemek istiyorsunuz. Bağımsız giriş, seçim ve metin alanları <label> ile etiketlenirken form kontrolü grupları, kendilerini gruplandıran <fieldset> <legend> içeriğinin içeriğiyle etiketlenir.
Önceki örneklerde, gönder düğmesi dışındaki her form kontrolünde <label> değerinin bulunduğunu fark etmiş olabilirsiniz. Etiketler, erişilebilir adlara sahip form denetimleri sağlar. Düğmeler, erişilebilir adlarını içeriklerinden veya değerlerinden alır. Diğer tüm form kontrolleri için ilişkilendirilmiş bir <label> gerekir. İlişkilendirilmiş 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 bir şekilde ilişkilendirmek için <label> özelliğine for özelliğini ekleyin: Değer, ilişkilendirildiği form kontrolünün id değeridir.
<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, denetime erişilebilir bir ad sağlayarak form kontrollerini ekran okuyucu kullanıcıları için erişilebilir hale getirir. Etiketler aynı zamanda "isabet alanları"dır. Alanı büyüterek, ellerini kullanma konusunda sorunları olan kullanıcılar için daha kullanışlı hale getirirler. Fare kullanıyorsanız, "Adınız" etiketinde herhangi bir yeri tıklamayı deneyin. Böylece giriş odağı bu şekilde devam eder.
Dolaylı etiketler sağlamak için form kontrolünü, açılış ve kapanış <label> etiketleri arasına ekleyin. Buna hem ekran okuyucu hem de işaretçi cihaz açısından eşit şekilde erişilebilir, ancak açık etiket gibi stil kancası sağlamaz.
<label>Your name
<input type="text" name="name">
</label>
Etiketler "isabet alanları" olduğundan, açık bir etikete veya örtülü etiketteki etiketli form kontrolü dışındaki diğer etkileşimli bileşenleri eklemeyin. Örneğin, bir etikete bağlantı eklerseniz, tarayıcı HTML'yi işlerken, bir form denetimi girmek için etiketi tıkladıklarında ancak yeni bir sayfaya yönlendirilmeleri halinde kullanıcıların kafası karışır.
<label> genellikle radyo düğmeleri ve onay kutuları haricinde form kontrolünden önce gelir. Bu zorunlu değildir.
Bu, yaygın olarak kullanılan bir kullanıcı deneyimi kalıbıdır. Formları Öğrenin serisinde form tasarımıyla ilgili bilgiler bulunur.
Etiket, radyo düğmesi ve onay kutusu gruplarında, ilişkilendirildiği form kontrolü için erişilebilir ad sağlar; ancak denetim grubu ve bunların etiketleri için de bir etiket gerekir. Grubu etiketlemek için tüm öğeleri bir <fieldset> altında gruplandırın. <legend> grubun etiketini 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 bir etiket sağlar.
<fieldset> öğesini başka bir <fieldset> içine yerleştirmek standart uygulamadır. Örneğin, bir form, alakalı soru gruplarına ayrılmış çok sayıda sorudan oluşan bir anketse "favori öğrenci" <fieldset>, "Favorileriniz" olarak etiketlenmiş başka bir <fieldset> ile iç içe yerleştirilmiş olabilir:
<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ümleri, yetersiz kullanılmasına yol açmıştır ancak <legend> ve <fieldset>'ye CSS ile stil eklenebilir.
Tüm genel özelliklere ek olarak <fieldset>, 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. name ve form özelliklerinin <fieldset> üzerinde pek bir faydası yoktur. name, alan grubuna JavaScript ile erişmek için kullanılabilir, ancak alan grubunun kendisi gönderilen verilere dahil edilmez (içine iç içe yerleştirilmiş adlandırılmış form denetimleri dahildir).
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 cihazda (ör. telefon) kullandığında, görüntülenen klavyenin türünü kullanılan giriş türü belirler. Gösterilen varsayılan klavye, gerekli giriş türü için optimize edilebilir.
Örneğin, tel türünde telefon numarası girmek için optimize edilmiş bir tuş takımı gösterilir; email içinde @ ve . yer alır. url için dinamik klavyede ise iki nokta ve eğik çizgi simgesi bulunur. Maalesef iPhone, url giriş türleri için varsayılan dinamik klavyede : iznini hâlâ içermiyor.
iPhone'da ve iki farklı Android telefonda <input type="tel"> klavyeleri:
iPhone'da ve iki farklı Android telefonda <input type="email"> klavyeleri:
Mikrofon ve kameraya erişme
<input type="file"> dosya giriş türü, formlar aracılığıyla dosya yüklemeyi etkinleştirir. Dosyalar herhangi bir türde olabilir, accept özelliğiyle tanımlanabilir ve sınırlandırılabilir. Kabul edilebilir dosya türleri listesi, virgülle ayrılmış dosya uzantıları listesi, genel bir tür veya genel türler ile uzantıların bir kombinasyonu olabilir. Örneğin, accept="video/*, .gif" tüm video dosyalarını ve animasyonlu GIF'leri kabul eder.
Ses dosyaları için "audio/*", video dosyaları için "video/*" ve resim dosyaları için "image/*" değerini kullanın.
Kullanıcının kamerası veya mikrofonu kullanılarak yeni bir medya dosyası oluşturulacaksa medya yakalama spesifikasyonunda tanımlanan numaralandırılmış capture özelliği kullanılabilir. Değeri, kullanıcılara yönelik giriş cihazları için user veya telefonun arka kamerası ya da mikrofonu için environment olarak ayarlayabilirsiniz. Genellikle capture, değer olmadan kullanılır çünkü kullanıcı, kullanmak istediği giriş cihazını seçer.
<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">
Yerleşik doğrulama
Aynı şekilde HTML, herhangi bir JavaScript olmaksızın geçersiz değerlere sahip formların gönderilmesini engelleyebilir.
HTML özelliklerinin varlığına göre form kontrolleriyle eşleşen bazı CSS seçiciler vardır. Örneğin, :required ve boole required ayarlanıp ayarlanmadığı :optional, checked sabit kodlu ise :default ve :enabled veya :disabled öğenin etkileşimli olup olmadığına bağlı olarak mevcut olmalıdır.
disabled :read-write pseudoclass, öğeleri contenteditable grubu ve number, password ve text giriş türleri (ancak onay kutusu, radyo düğmeleri veya hidden türü ile diğerlerinin yanı sıra hidden türü gibi) gibi varsayılan olarak düzenlenebilir form kontrolleriyle eşleştirir. Normalde yazılabilir bir öğede readonly özelliği ayarlanmışsa bu özellik :read-only ile eşleşir.
Kullanıcı, form kontrollerine bilgi girerken :valid,
:invalid, :in-range ve
:out-of-range gibi CSS kullanıcı arayüzü seçicileri, duruma göre açılıp kapatılır. Kullanıcı bir form kontrolünden çıktığında henüz tam olarak desteklenmeyen :user-invalid veya :user-valid sözde sınıfı eşleşir.
Kullanıcı formla etkileşimde bulunurken form kontrollerinin gerekli ve geçerli olup olmadığı hakkında ipuçları sağlamak için CSS'yi kullanabilirsiniz. CSS'yi, form geçerli olana kadar kullanıcıların gönder düğmesini tıklayabilmelerini engellemek için de kullanabilirsiniz:
form:invalid [type="submit"] {
opacity: 50%;
pointer-events: none;
}
Bu CSS snippet'i bir anti kalıptır. Kullanıcı arayüzünüz sezgisel ve net görünse de birçok kullanıcı hata mesajını etkinleştirmek için form göndermeyi dener. Gönder düğmesinin bu şekilde devre dışı bırakılması, birçok kullanıcının güvendiği bir özellik olan kısıtlama doğrulamasına izin vermez.
Uygulanan CSS, kullanıcı arayüzünün mevcut durumuna göre sürekli olarak güncellenir. Örneğin, email, number, url gibi kısıtlamalara sahip giriş türlerini ve tarih türlerini dahil ettiğinizde, değer null değilse (boş değilse) ve geçerli değer geçerli bir e-posta, sayı, URL, tarih veya saat değilse :invalid CSS sözde sınıfı eşleşme olur. Bu sürekli güncelleme, 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 sınırlama doğrulaması, yalnızca HTML özellikleriyle ayarlanan kısıtlamalarla ilgilidir. Bir öğeyi :required ve :valid/:invalid sözde sınıflarına göre biçimlendirebilirsiniz ancak required, pattern, min, max ve hatta type özelliklerine dayalı hatalardan kaynaklanan hata mesajları tarayıcı tarafından sağlanırken form gönderilir.
Formu, zorunlu favori öğrenciyi seçmeden göndermeye çalıştığımızda kısıtlama doğrulaması, validityState.valueMissing hatası nedeniyle form gönderilmesini engeller.
validityState özelliklerinden herhangi biri true değerini döndürürse gönderim engellenir ve tarayıcı, ilk yanlış form kontrolünde bir hata mesajı görüntüleyerek odağı odaklar. Kullanıcı bir form göndermeyi etkinleştirdiğinde ve geçersiz değerler varsa ilk geçersiz form kontrolü bir hata mesajı gösterir ve odak noktası alır. Gerekli bir kontrol için değer ayarlanmamışsa sayısal değer aralık dışındaysa veya bir değer type özelliği için gereken 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) olarak ayarlanır. Formu göndermeyi denediğinde kullanıcı valididityState.rangeUnderflow, validityState.rangeOverflow hatası konusunda bilgilendirilir. Değer, açık bir şekilde 1 olarak ayarlanmış veya varsayılan olarak step değerinin dışındaysa kontrol :out-of-range (ve :invalid) olur ve validityState.stepMismatch hatası olur. Hata bir balon olarak görünür ve varsayılan olarak hatanın nasıl düzeltileceği hakkında faydalı bilgiler sunar.
Değerlerin uzunluğu için benzer özellikler vardır: minlength ve maxlength özellikleri, gönderim sırasında validityState.tooLong veya validityState.tooShort ile ilgili bir hata konusunda kullanıcıyı uyarır.
maxlength, kullanıcının çok fazla karakter girmesini de engeller.
maxlength özelliğinin kullanılması, kötü bir kullanıcı deneyimine neden olabilir. Kullanıcıların izin verilen karakter uzunluğundan fazla giriş yapmalarına izin vermek genellikle daha iyi bir deneyimdir. İsteğe bağlı olarak, formla birlikte gönderilmeyen <output> öğesi biçimindedir. İzin verilen maksimum uzunluğun aşılmadığını gösterene kadar kullanıcılar metni düzenleyebilir. maxlength de HTML'nize eklenebilir. Konuştuğumuz her şey gibi, JavaScript olmadan da çalışır. Daha sonra, yükleme sırasında, JavaScript'te bu karakter sayacını oluşturmak için maxlength özelliğinin değeri kullanılabilir.
Bazı giriş türlerinde varsayılan kısıtlamalar var gibi görünür ancak yoktur. Örneğin, tel giriş türü, dinamik klavyeli cihazlarda sayısal telefon tuş takımı sağlar ancak geçerli değerleri kısıtlamaz. Bu ve diğer giriş türleri için pattern özelliği bulunur. 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 hatasına neden olmaz. Gerekirse ve boşsa kullanıcıya patternMismatch yerine varsayılan validityState.valueMissing hata mesajı gösterilir.
E-postalar söz konusu olduğunda validityState.typeMismatch, muhtemelen
ihtiyaçlarınız için fazla hoşgörülüdür. TLD'si olmayan intranet e-posta adreslerinin geçerli olarak kabul edilmediği için pattern özelliğini kullanabilirsiniz.
Desen özelliği, değerin eşleşmesi gereken bir normal ifade sağlanmasını sağlar. Dize kalıbı eşlemesi yapılmasını zorunlu kılarken,
kullanıcının neyin beklediğinin çok net olduğundan emin olun.
Tüm bunlar, tek bir JavaScript satırı olmadan yapılabilir. Ancak bir HTML API'si olarak, kısıtlama doğrulaması sırasında özel mesajlar eklemek için JavaScript'i kullanabilirsiniz. Kalan karakter sayısını güncellemek, şifre gücü için ilerleme çubuğu göstermek veya tamamlanmayı dinamik olarak iyileştirmek için çeşitli yöntemler kullanmak üzere JavaScript'i de kullanabilirsiniz.
Örnek
Bu örnekte, <dialog> içinde yer alan, iç içe yerleştirilmiş <form> içeren, üç form kontrolü ve iki gönder düğmesi içeren, net etiketler ve talimatlar içeren bir form bulunmaktadır.
İlk gönder düğmesi iletişim kutusunu kapatır. Formun varsayılan yöntemini geçersiz kılmak ve verileri göndermeden veya silmeden <dialog> öğesini kapatmak için formmethod="dialog" öğesini kullanın. formnovalidate öğesini de eklemeniz gerekir. Aksi takdirde tarayıcı, tüm zorunlu alanların bir değere sahip olup olmadığını kontrol ederek doğrulamaya çalışır. Kullanıcı, veri girmeden iletişim kutusunu ve formu kapatmak isteyebilir. Doğrulama işlemi bunu engeller. "X" bilinen bir görsel işaret olup açıklayıcı bir etiket olmadığı için aria-label="close" özelliğini dahil edin.
Form denetimlerinin tümü örtülü etiketlere sahip olduğundan id veya for özelliklerini eklemeniz gerekmez. Giriş öğelerinin her ikisi de gerekli özelliğe sahiptir ve bunları zorunlu kılar. Sayı girişinde step, step öğesinin nasıl eklendiğini gösterecek şekilde açıkça ayarlanmıştır. step varsayılan olarak 1 değerine ayarlandığı için bu özellik atlanabilir.
<select>, required özelliğini gereksiz hale getiren varsayılan bir değere sahiptir. Her seçeneğe value özelliği eklemek yerine, değer varsayılan olarak iç metne ayarlanır.
Sondaki gönder düğmesi, form yöntemini POST olarak ayarlar. Tıklandığında, her bir değerin geçerliliği kontrol edilir. Tüm değerler geçerliyse form verileri gönderilir, iletişim kutusu kapanır ve sayfa, işlem URL'si olan thankyou.php adresine yönlendirebilir. Herhangi bir değer eksikse veya sayısal değer bir adım uyuşmazlığına sahipse ya da aralık dışındaysa tarayıcı tanımlı ilgili bir hata mesajı görünür, form gönderilmez ve iletişim kutusu kapanmaz.
Varsayılan hata mesajları, validityState.setCustomValidity('message here') yöntemi ile özelleştirilebilir. Özel bir mesaj ayarlarsanız her şey geçerli olduğunda mesajın açık bir şekilde boş dizeye ayarlanması gerektiğini, aksi takdirde form gönderilmeyeceğini unutmayın.
Dikkat edilmesi gereken diğer noktalar
Bu bölümün tamamı, kullanıcılarınızın formlara doğru verileri girmelerine yardımcı olmaya ayrılmış. İyi bir kullanıcı deneyimi için 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 ele alınsa da doğrulama hem istemci hem de sunucu tarafında olmalıdır. Form tamamlanırken göze batmayan şekillerde (ör. değer doğru olduğunda onay işareti eklemek) doğrulama yapılabilir. Form kontrolü tamamlanmadan önce hata mesajı vermeyin. Kullanıcı hata yaparsa hatanın nerede olduğunu ve hatanın ne olduğunu kullanıcıya bildirin.
Form tasarlarken herkesin sizin gibi olmadığını göz önünde bulundurmak önemlidir. Bir kişinin soyadı tek bir harfi olabilir (veya soyadı belirtilmemiş), posta kodu veya üç satırlık açık adres ya da açık adres olmayabilir. Formunuzun çevrilmiş bir sürümünü görüntülüyor olabilirler.
Form denetimleri, etiketleri ve hata mesajları ekranda görünür, doğru ve anlamlı olmalı, programatik olarak belirlenebilir ve uygun form öğesi veya grubuyla programlı bir şekilde ilişkilendirilmiş olmalıdır. autocomplete özelliği, form doldurmayı hızlandırmak ve erişilebilirliği iyileştirmek için kullanılabilir ve kullanılmalıdır.
HTML, temel form kontrollerini erişilebilir hale getirmek için gereken tüm araçları sağlar. Bir form öğesi veya işlem ne kadar etkileşimli olursa odak yönetimi, gerektiğinde ARIA adlarını, rollerini ve değerlerini ve gerektiğinde ARIA canlı duyurularının ayarlanması ve güncellenmesi açısından erişilebilirliğe o kadar çok dikkat edilmelidir. Ancak, burada da öğrendiğimiz gibi, yalnızca HTML ile, ARIA veya JavaScript'e gerek kalmadan erişilebilirlik ve geçerlilik hedefinize uzun bir yol katedebilirsiniz.
Öğ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.Kullanıcıya bu form alanının ne için olduğunu bildirmek için hangi HTML öğesi kullanılır?
<h1><title><label>