Formlar

Çoğu site ve uygulama bir web formu içerir. Şaka siteleri (ör.Web SiteleriGerektirmek)Tam OlarakAynıAynıTarayıcı formu bulunmayabilir, ancak bir 1 Nisan şakası olarak ortaya çıkan MachineLearningWorkshop.com'un (MLW) bile bir biçimi var. ancak sahte bir hesap olsun. MLW'nin ana "harekete geçirici mesajı" makinelerin atölyeye kaydolmasını sağlayan bir kayıt formudur. Bu form <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 klavyesi, giriş type=tel olarak gösteriliyor. Android klavyesinde giriş türü=tel gösteriliyor. Android klavyesinde giriş türü=tel gösteriliyor.

iPhone ve iki farklı Android telefondaki <input type="email"> klavyeleri:

iPhone klavyesinde giriş türü=e-posta gösteriliyor. Android klavyesinde giriş türü=e-posta gösteriliyor. Android klavyesinde giriş türü=e-posta gösteriliyor.

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.

Çoklu seçim alanının zorunlu olduğunu belirten bir hata mesajı.

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?

Hepsini bir alan kümesinin içine yerleştirin.
Tekrar deneyin.
Tümüne aynı name özellik değerini verin.
Doğru!
Tümüne aynı id özellik değerini verin.
Tekrar deneyin.

Bu form alanının neyle ilgili olduğunu kullanıcıya anlatmak için hangi HTML öğesi kullanılır?

<h1>
Tekrar deneyin.
<title>
Tekrar deneyin.
<label>
Doğru!