<form>,name,actionvemethod'un rolünü açıklamak- Alanları
<label>ile doğru şekilde ilişkilendirmek - Göreve uygun
type,<select>,<textarea>, radyo düğmeleri ve onay kutularını seçmek required,min,max,minlengthvepatternile doğrulama eklemek
Bir kulübe kaydolduğunda, video aradığında ya da pizza sipariş ettiğinde her seferinde bir form doldurursun. Formlar, bir sayfanın insanlardan bilgi toplama yoludur. Bu derste alan yazıları, farklı alan türleri ve yerleşik doğrulaması olan bir form kuracaksın; tek satır JavaScript yazmadan.
Form ve alanları
<form> öğesi alanları bir araya toplar. action özniteliği verinin nereye gönderileceğini, method ise nasıl gönderileceğini söyler: get veriyi adres çubuğuna yazar (aramalar için kullanışlıdır), post ise veriyi adreste değil, isteğin içinde gönderir (şifreler ve kişisel veriler için). Her alanın bir name özniteliği olmalıdır: sunucu veriyi name=value çiftleri hâlinde alır.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
label { display: block; margin-top: 10px; font-weight: 600; }
input { font: inherit; padding: 6px 8px; margin-top: 4px; width: 240px; }
button { margin-top: 14px; padding: 8px 18px; font: inherit; color: white;
background: #4f46e5; border: 0; border-radius: 6px; }
</style>
<form action="/signup" method="post">
<label for="name">Your name</label>
<input id="name" name="name" type="text" placeholder="Aysel">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="aysel@example.com">
<label for="pass">Password</label>
<input id="pass" name="pass" type="password">
<button type="submit">Sign up</button>
</form>action adresine giderdi.`<label>`: alanı adlandırmak
<label>, bir alanın ne için olduğunu söyler. Onu for özniteliğiyle alanın id'sine bağla: <label for="email"> ve <input id="email">. Böylece bu yazıya tıklamak imleci alana götürür (ya da onay kutusunu işaretler) ve alan odaklandığında ekran okuyucu onun adını okur. Diğer yol, alanı doğrudan <label>'ın içine yazmaktır.
Alan türleri
<input> öğesinin type özniteliği alanın türünü değiştirir. Telefonda klavyeyi de değiştirir: email için @ tuşu, tel için ise rakam klavyesi görünür.
type | Ne işe yarar |
|---|---|
text | tek satırlık metin |
email | e-posta adresi; biçimi denetlenir |
password | karakterler noktalarla gizlenir |
number | oklu sayı alanı; min, max, step |
date | tarih seçmek için takvim |
checkbox | onay kutusu; birkaçı işaretlenebilir |
radio | aynı name'e sahip gruptan tek bir seçim |
range, color | kaydırıcı ve renk seçici |
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
fieldset { border: 1px solid #cbd5e1; border-radius: 8px; }
p { margin: 10px 0; }
</style>
<form>
<fieldset>
<legend>Favorite subject</legend>
<label><input type="radio" name="subject" value="math"> Math</label>
<label><input type="radio" name="subject" value="art"> Art</label>
<label><input type="radio" name="subject" value="music"> Music</label>
</fieldset>
<p><label><input type="checkbox" name="news"> Send me news</label></p>
<p><label for="city">City</label>
<select id="city" name="city">
<option>Baku</option><option>Ganja</option><option>Sumgait</option>
</select></p>
<p><label for="level">Level</label> <input id="level" name="level" type="range" min="1" max="10">
<label for="color">Color</label> <input id="color" name="color" type="color" value="#4f46e5"></p>
<p><label for="msg">Message</label><br>
<textarea id="msg" name="msg" rows="3" cols="30"></textarea></p>
</form><label> sayesinde tıklama alanı seçer. Aynı name'e sahip radyo düğmelerinden yalnızca biri seçilebilir.<fieldset> birbiriyle ilgili alanları gruplar, <legend> ise gruba bir başlık verir. <select> ile <option> açılır liste, <textarea> ise çok satırlı metin alanı oluşturur. Radyo düğmeleri ve onay kutularında value özniteliği sunucuya neyin gönderileceğini belirler.
Yerleşik doğrulama
Tarayıcı veriyi göndermeden önce kendisi denetleyebilir; JavaScript'e gerek yoktur. Bunun için öznitelikler vardır:
required— alan boş bırakılamaz.minlengthvemaxlength— metnin izin verilen en kısa ve en uzun uzunluğu.min,maxvestep— sayılar ve tarihler için sınırlar ve adım.pattern— değerin uyması gereken bir kalıp (düzenli ifade). Örneğinpattern="AZ[0-9]{4}", Azerbaycan posta kodlarındaki gibi “AZ” ve ardından dört rakam ister: AZ1000.type="email"vetype="url"biçimi otomatik olarak denetler.
Bir alan kurala uymuyorsa, gönder düğmesine basıldığında tarayıcı bir mesaj gösterir ve formu göndermez. CSS'teki :valid ve :invalid sözde sınıfları ise geçerli ve geçersiz alanları farklı renklerle göstermeni sağlar.
<style>
body { font-family: system-ui, sans-serif; padding: 12px; }
label { display: block; margin-top: 8px; }
input { font: inherit; padding: 6px; border: 2px solid #cbd5e1; border-radius: 6px; }
input:valid { border-color: #16a34a; }
input:invalid { border-color: #f59e0b; }
</style>
<form>
<label for="user">Username (3–12 characters)</label>
<input id="user" name="user" required minlength="3" maxlength="12">
<label for="age">Age (10–99)</label>
<input id="age" name="age" type="number" min="10" max="99" required>
<label for="mail">Email</label>
<input id="mail" name="mail" type="email" required>
<label for="zip">Postal code, e.g. AZ1000</label>
<input id="zip" name="zip" pattern="AZ[0-9]{4}" required>
</form>AZ1000, sonra az1000 yazmayı dene.Önemli noktalar
<form>alanları toplar;actionnereye,method(get/post) nasıl gönderileceğini söyler; her alana birnamegerekir.<label for="id">yazıyı alana bağlar: tıklama alanı seçer, ekran okuyucu adını okur.typealanın türünü ve telefondaki klavyeyi değiştirir:email,number,date,checkbox,radiove diğerleri.required,minlength,min,maxvepattern, tarayıcıya veriyi göndermeden önce denetlemesini söyler.- Tarayıcı doğrulaması kolaylık içindir; sunucu veriyi yine de kendisi denetlemelidir.
Kendini test et
10 soru. Her doğru cevap XP kazandırır.
<label> yazısına tıklamanın imleci alana götürmesi için ne gerekir?