HTML ile Girdi Do\u011frulama: Basit ve Etkili Y\u00f6ntemler<\/p>\n
Web geli\u015ftirmede form do\u011frulama olmazsa olmazd\u0131r. Kullan\u0131c\u0131lar\u0131n do\u011fru bilgileri girmelerini sa\u011flamak, veritaban\u0131 b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc korumak ve hatalar\u0131 \u00f6nlemek i\u00e7in olduk\u00e7a \u00f6nemlidir. JavaScript kullanmadan, sadece HTML5’in sundu\u011fu \u00f6zelliklerle bunu nas\u0131l yapabilece\u011finizi bu makalede ele alaca\u011f\u0131z. Bu y\u00f6ntemler, \u00f6zellikle basit formlar i\u00e7in h\u0131zl\u0131 ve pratik bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n
HTML5, \u00e7e\u015fitli girdi t\u00fcrleri i\u00e7in yerle\u015fik do\u011frulama \u00f6zellikleri sa\u011flar. \u00d6rne\u011fin, A\u015fa\u011f\u0131daki \u00f6rnekte, kullan\u0131c\u0131dan e-posta adresi alan bir form g\u00f6receksiniz. HTML5’in yerle\u015fik do\u011frulama \u00f6zelli\u011fi sayesinde, ge\u00e7ersiz bir e-posta giri\u015fi yap\u0131ld\u0131\u011f\u0131nda, taray\u0131c\u0131 otomatik olarak bir hata mesaj\u0131 g\u00f6sterir:<\/p>\n Burada dikkat etmeniz gereken nokta \u015eimdi de say\u0131sal bir girdi i\u00e7in do\u011frulama \u00f6rne\u011fine bakal\u0131m. Bu \u00f6rnekte, kullan\u0131c\u0131 0 ile 120 aras\u0131nda bir de\u011fer girmek zorundad\u0131r. Di\u011fer de\u011ferler girilmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda taray\u0131c\u0131 yine hata mesaj\u0131 g\u00f6sterir. Bu \u00f6zellik, ya\u015f, fiyat gibi say\u0131sal alanlar i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n HTML5’in yerle\u015fik do\u011frulama \u00f6zellikleri, basit formlar i\u00e7in yeterli olabilir. Ancak daha karma\u015f\u0131k do\u011frulama kurallar\u0131na ihtiya\u00e7 duydu\u011funuzda, JavaScript kullanman\u0131z gerekebilir. \u00d6rne\u011fin, \u015fifre karma\u015f\u0131kl\u0131\u011f\u0131 kontrol\u00fc, \u00f6zel karakter do\u011frulamas\u0131 gibi i\u015flemler i\u00e7in JavaScript’in g\u00fc\u00e7l\u00fc y\u00f6nlerinden yararlanman\u0131z daha mant\u0131kl\u0131 olacakt\u0131r.<\/p>\n Daha fazla bilgi i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz. Ayr\u0131ca, daha detayl\u0131 bilgi i\u00e7in buraya<\/a> bakabilirsiniz.<\/p>\n Sonu\u00e7 olarak, HTML5’in sundu\u011fu yerle\u015fik do\u011frulama \u00f6zellikleri, basit formlar i\u00e7in h\u0131zl\u0131 ve etkili bir \u00e7\u00f6z\u00fcm sunmaktad\u0131r. Ancak, karma\u015f\u0131k do\u011frulama senaryolar\u0131 i\u00e7in JavaScript’in g\u00fcc\u00fcnden faydalanmak daha uygun olacakt\u0131r. Do\u011frulama i\u015flemlerini do\u011fru yapmak, kullan\u0131c\u0131 deneyimini iyile\u015ftirmenin yan\u0131 s\u0131ra, verilerinizin g\u00fcvenli\u011fini de sa\u011flar. Bu konuda s\u00fcrekli \u00f6\u011frenmek ve g\u00fcncel kalmak olduk\u00e7a \u00f6nemlidir.<\/p>\n #Etiketler: HTML do\u011frulama, form do\u011frulama, input do\u011frulama, HTML5 do\u011frulama, form validasyonu, web geli\u015ftirme, girdi do\u011frulama, e-posta do\u011frulama, say\u0131sal do\u011frulama<\/p>\n <\/body><input type=\"email\"><\/code> ile bir e-posta adresi beklerken, taray\u0131c\u0131 otomatik olarak ge\u00e7erli bir e-posta format\u0131n\u0131 kontrol eder. Benzer \u015fekilde, <input type=\"number\"><\/code> say\u0131sal girdi i\u00e7in, <input type=\"url\"><\/code> URL girdisi i\u00e7in, <input type=\"tel\"><\/code> telefon numaras\u0131 girdisi i\u00e7in otomatik do\u011frulama ger\u00e7ekle\u015ftirilir. Bu sayede, kod yazmadan temel do\u011frulamalar yapabilirsiniz.<\/p>\n\u00d6rnek: E-posta Do\u011frulama<\/h3>\n
\n<form>\n <label for=\"email\">E-posta:<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n <button type=\"submit\">G\u00f6nder<\/button>\n<\/form>\n<\/code><\/pre>\nrequired<\/code> \u00f6zniteli\u011fidir. Bu, alan\u0131n doldurulmas\u0131n\u0131n zorunlu oldu\u011funu belirtir. E\u011fer kullan\u0131c\u0131 bu alan\u0131 doldurmadan g\u00f6nder butonuna t\u0131klarsa, taray\u0131c\u0131 ona bir hata mesaj\u0131 g\u00f6sterir.<\/p>\n\u00d6rnek: Say\u0131sal Girdi Do\u011frulama<\/h3>\n
<input type=\"number\"><\/code> etiketi, sadece say\u0131sal de\u011ferlerin girilmesini sa\u011flar. Ayr\u0131ca, min<\/code> ve max<\/code> \u00f6znitelikleri ile minimum ve maksimum de\u011ferleri belirleyebilirsiniz:<\/p>\n\n<form>\n <label for=\"age\">Ya\u015f\u0131n\u0131z:<\/label>\n <input type=\"number\" id=\"age\" name=\"age\" min=\"0\" max=\"120\" required>\n <button type=\"submit\">G\u00f6nder<\/button>\n<\/form>\n<\/code><\/pre>\nDaha Geli\u015fmi\u015f Do\u011frulama \u0130\u00e7in<\/h2>\n
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"HTML ile Girdi Do\u011frulama: Basit ve Etkili Y\u00f6ntemler Web geli\u015ftirmede form do\u011frulama olmazsa olmazd\u0131r. Kullan\u0131c\u0131lar\u0131n do\u011fru bilgileri girmelerini…","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-6771","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n