Ç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>