{"id":648,"date":"2013-12-19T22:52:50","date_gmt":"2013-12-19T20:52:50","guid":{"rendered":"http:\/\/www.gencnesil.org\/?p=648"},"modified":"2014-03-20T14:29:42","modified_gmt":"2014-03-20T12:29:42","slug":"html5-input-tipleri","status":"publish","type":"post","link":"https:\/\/gncz.net\/index.php\/html5-input-tipleri.html","title":{"rendered":"HTML5 Input Tipleri"},"content":{"rendered":"<p>HTML5 ile birlikte gelen input tiplerini birlikte inceleyelim..<\/p>\n<h3>Tip: color<\/h3>\n<p>Input&#8217;u bir renk se\u00e7icisi haline getirir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<p><!--more--><\/p>\n<pre><code>Favori renginizi se\u00e7in: <input type=\"color\" name=\"favori_renk\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: date<\/h3>\n<p>Input&#8217;u bir tarih se\u00e7icisi haline getirir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>L\u00fctfen tarihi se\u00e7in: <input type=\"date\" name=\"tarih\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: datetime-local<\/h3>\n<p>Input&#8217;u bir zaman se\u00e7icisi haline getirir. Tarih ve Saat se\u00e7tirmeye olanak sa\u011flar.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>L\u00fctfen tarihi se\u00e7in: <input type=\"date\" name=\"tarih\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: email<\/h3>\n<p>Input&#8217;u ge\u00e7erli bir eposta girilecek hale getirir. HTML5 ile form kontrolleri yaparken otomatik olarak bu tipteki inputa eposta kontrol\u00fc yapacakt\u0131r.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>L\u00fctfen e-posta adresinizi girin: <input type=\"email\" name=\"eposta\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: month<\/h3>\n<p>Input&#8217;u ay ve y\u0131l girilecek hale getirir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>Tarihi se\u00e7in: <input type=\"month\" name=\"tarih\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: number<\/h3>\n<p>Input&#8217;u say\u0131 girilebilecek hale getirir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>De\u011fer belirleyin: <input type=\"number\" name=\"deger\" \/><\/code><\/pre>\n<p><strong>Ayr\u0131ca bu tip i\u00e7in \u015fu niteliklerde kullan\u0131labilir;<\/strong><br \/>\n<strong>max<\/strong> (maksimum belirlenecek say\u0131)<br \/>\n<strong>min<\/strong> (minimum belirlenecek say\u0131)<br \/>\n<strong>step<\/strong> (art\u0131\u015f say\u0131s\u0131n\u0131 belirler)<\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>De\u011fer belirleyin (minimum -10 maksimum 6 ya kadar)\r\n<input type=\"number\" max=\"6\" min=\"-10\" name=\"deger\" step=\"2\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: range<\/h3>\n<p>Input&#8217;u de\u011fer se\u00e7ilebilecek bir slider haline getirir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>De\u011fer belirleyin: <input type=\"range\" name=\"deger\" \/><\/code><\/pre>\n<p><strong>Ayr\u0131ca bu tip i\u00e7in \u015fu niteliklerde kullan\u0131labilir;<\/strong><br \/>\n<strong>max<\/strong> (maksimum belirlenecek say\u0131)<br \/>\n<strong>min<\/strong> (minimum belirlenecek say\u0131)<br \/>\n<strong>step<\/strong> (art\u0131\u015f say\u0131s\u0131n\u0131 belirler)<\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>De\u011fer belirleyin (minimum -10 maksimum 6 ya kadar)\r\n<input type=\"range\" max=\"6\" min=\"-10\" name=\"deger\" step=\"2\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: search<\/h3>\n<p>Input&#8217;un bir arama kutusu oldu\u011funu belirlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>Bir\u015feyler aray\u0131n: <input type=\"search\" name=\"kelime\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: tel<\/h3>\n<p>Input&#8217;a girilen de\u011ferin bir telefon numaras\u0131 oldu\u011fu belirlenir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>Telefon Numaran\u0131z: <input type=\"tel\" name=\"telefon\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: time<\/h3>\n<p>Input&#8217;u zaman belirlenecek hale getirir. Sadece saat ve dakika belirtilir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>Olay zaman\u0131: <input type=\"time\" name=\"zaman\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: url<\/h3>\n<p>Input de\u011ferinin bir url (link) oldu\u011fu belirlenir. HTML5 form kontrol\u00fc yap\u0131l\u0131rken bunu dikkate alacak ve girilen de\u011ferin url olup olmad\u0131\u011f\u0131 otomatik kontrol edilecektir.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>Olay zaman\u0131: <input type=\"time\" name=\"zaman\" \/><\/code><\/pre>\n<p>&#8212;&#8212;&#8212;&#8212;&#8211;<\/p>\n<h3>Tip: week<\/h3>\n<p>Input&#8217;ta y\u0131l ve hafta de\u011ferleri belirlemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n<p><strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong><br \/>\n<img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_ie.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/no_firefox.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/chrome.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/safari.gif\" \/> <img alt=\"\" src=\"http:\/\/www.prototurk.com\/browser\/opera.gif\" \/><\/p>\n<p><strong>\u00d6rnek Kullan\u0131m\u0131;<\/strong><\/p>\n<pre><code>Haftay\u0131 belirleyin: <input type=\"week\" name=\"hafta\" \/><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>HTML5 ile birlikte gelen input tiplerini birlikte inceleyelim.. Tip: color Input&#8217;u bir renk se\u00e7icisi haline getirir. Taray\u0131c\u0131 Deste\u011fi: \u00d6rnek Kullan\u0131m\u0131;<\/p>\n","protected":false},"author":1,"featured_media":748,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[51],"tags":[],"_links":{"self":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/648"}],"collection":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/comments?post=648"}],"version-history":[{"count":3,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/648\/revisions"}],"predecessor-version":[{"id":765,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/posts\/648\/revisions\/765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media\/748"}],"wp:attachment":[{"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/media?parent=648"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/categories?post=648"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gncz.net\/index.php\/wp-json\/wp\/v2\/tags?post=648"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}