HTML girdi türleri
- Önceki Sayfa HTML Form Elemanları
- Sonraki Sayfa HTML Giriş Özellikleri
Bu bölüm <input> elementinin girdi türünü tanımlar.
Girdi türü: text
<input type="text"> Tedarik etmek içinMetin girdisiTek satırlık girdi alanı:
Örnek
<form> Adı:<br> <input type="text" name="firstname"> <br> Soyadı:<br> <input type="text" name="lastname"> </form>
Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:
Girdi türü: password
<input type="password"> TanımlamaParola alanı：
Örnek
<form> Kullanıcı adı:<br> <input type="text" name="username"> <br> Kullanıcı parolası:<br> <input type="password" name="psw"> </form>
Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:
Açıklama:password alanındaki karakterler maskelenir (yıldız veya dolu daire olarak gösterilir).
Girdi türü: submit
<input type="submit"> TanımlamaGönderForm verileriniForm işleyicidğnı.
Form işleyici (form-handler) genellikle girdi verilerini işleyen betik içeren sunucu sayfasıdır.
Formun action özelliğinde form işleyicisini (form-handler) belirler:
Örnek
<form action="action_page.php"> Adı:<br> <input type="text" name="ad" value="Mickey"> <br> Soyadı:<br> <input type="text" name="soyad" value="Mouse"> <br><br> <input type="submit" value="Gönder"> </form>
Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:
Eğer gönderme düğmesinin value özelliğini atarsanız, düğme varsayılan metni alır:
Örnek
<form action="action_page.php"> Adı:<br> <input type="text" name="ad" value="Mickey"> <br> Soyadı:<br> <input type="text" name="soyad" value="Mouse"> <br><br> <input type="submit"> </form>
Input Türü: radio
<input type="radio"> Radyo düğmesini tanımlar.
Radyo düğmeleri, kullanıcının sınırlı sayıda seçenekten yalnızca birini seçmesine izin verir:
Örnek
<form> <input type="radio" name="cinsiyet" value="erkek" checked>Erkek <br> <input type="radio" name="cinsiyet" value="kadın">Kadın </form>
Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:
Input Türü: checkbox
<input type="checkbox"> Onay kutusunu tanımlar.
Onay kutuları, kullanıcıya sınırlı sayıda seçenek arasında sıfır veya daha fazla seçenek seçmesine izin verir.
Örnek
<form> <input type="checkbox" name="araç" value="Bisiklet">Bir bisikletim var <br> <input type="checkbox" name="araç" value="Araba">Bir arabam var </form>
Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:
Input Türü: button
<input type="button"> TanımlamaDüğme。
Örnek
<input type="button" onclick="alert('Merhaba Dünya!')" value="Tıkla Beni!">
Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:
HTML5 Giriş Türleri
HTML5, birçok yeni giriş türü eklemiştir:
- renk
- tarih
- datetime
- datetime-local
- eposta
- ay
- sayı
- aralık
- arama
- tel
- zaman
- url
- hafta
Açıklama:Eski web tarayıcıları tarafından desteklenmeyen giriş türleri, text türü olarak algılanır.
Giriş türü: number
<input type="number"> Sayısal değer içeren giriş alanları için kullanılır.
Sayıları sınırlayabilirsiniz.
Tarayıcı desteklerine göre, sınırlamalar giriş alanlarına uygulanabilir.
Örnek
<form> Miktar (1 ile 5 arasında): <input type="number" name="quantity" min="1" max="5"> </form>
Giriş Sınırlamaları
Aşağıda bazı yaygın giriş sınırlamaları listelenmiştir (bazıları HTML5'te yeni eklenmiştir):
| Özellik | Açıklama |
|---|---|
| disabled | Giriş alanının devre dışı bırakılmasını belirler. |
| max | Giriş alanının en fazla değerini belirler. |
| maxlength | Giriş alanının en fazla karakter sayısını belirler. |
| min | Giriş alanının en küçük değerini belirler. |
| pattern | Giriş değerlerini kontrol eden düzenli ifadeyi belirler. |
| readonly | Giriş alanının salt okunur olduğunu (değiştirilemez) belirler. |
| required | Giriş alanının zorunlu olduğunu (doldurulması gerekli) belirler. |
| size | Giriş alanının genişliğini (karakter olarak) belirler. |
| step | Giriş alanlarının geçerli sayı aralığını belirler. |
| value | Giriş alanlarının varsayılan değerini belirler. |
Bir sonraki bölümde daha fazla giriş sınırlaması hakkında öğreneceksiniz.
Örnek
<form> Miktar: <input type="number" name="points" min="0" max="100" step="10" value="30"> </form>
Giriş türü: date
<input type="date"> Tarih içeren giriş alanları için kullanılır.
Tarayıcı desteğine göre, tarih seçici giriş alanında görünecektir.
Örnek
<form> Doğum günü: <input type="date" name="bday"> </form>
Girişe sınırlamalar ekleyebilirsiniz:
Örnek
<form> 1980-01-01 öncesinde bir tarih girin: <input type="date" name="bday" max="1979-12-31"><br> 2000-01-01'den sonra bir tarih girin: <input type="date" name="bday" min="2000-01-02"><br> </form>
Giriş türü: color
<input type="color"> Rengi içeren giriş alanları için kullanılır.
Tarayıcı desteğine göre, renk seçici giriş alanında görünecektir.
Örnek
<form> En sevdiğiniz rengi seçin: <input type="color" name="favcolor"> </form>
Giriş türü: range
<input type="range"> Belirli bir aralıkta değer içeren giriş alanları için kullanılır.
Tarayıcı desteğine göre, giriş alanı kaydırma kontrolü olarak görünebilir.
Örnek
<form> <input type="range" name="points" min="0" max="10"> </form>
Aşağıdaki özellikleri kullanarak sınırlamalar belirleyebilirsiniz: min, max, step, value。
Giriş türü: month
<input type="month"> Kullanıcıya ay ve yıl seçme izni verilir.
Tarayıcı desteğine göre, tarih seçici giriş alanında görünecektir.
Örnek
<form> Doğum günü (ay ve yıl): <input type="month" name="bdaymonth"> </form>
Giriş türü: week
<input type="week"> Kullanıcıya hafta ve yıl seçme izni verilir.
Tarayıcı desteğine göre, tarih seçici giriş alanında görünecektir.
Örnek
<form> Bir hafta seçin: <input type="week" name="week_year"> </form>
Giriş türü: time
<input type="time"> Kullanıcıya zamanı (uzaktan bölgelerle) seçme izni verilir.
Tarayıcı desteğine göre, zaman seçici giriş alanında görünecektir.
Örnek
<form> Bir zaman seçin: <input type="time" name="usr_time"> </form>
Giriş türü: datetime
<input type="datetime"> Kullanıcıya tarih ve zamanı (uzaktan bölgelerle) seçme izni verilir.
Tarayıcı desteğine göre, tarih seçici giriş alanında görünecektir.
Örnek
<form> Doğum günü (tarih ve zaman): <input type="datetime" name="bdaytime"> </form>
Giriş türü: datetime-local
<input type="datetime-local"> Kullanıcıya tarih ve zamanı (uzaktan bölgelerle) seçme izni verilir.
Tarayıcı desteğine göre, tarih seçici giriş alanında görünecektir.
Örnek
<form> Doğum günü (tarih ve zaman): <input type="datetime-local" name="bdaytime"> </form>
Giriş Türü: email
<input type="email"> E-posta adresini içermesi gereken giriş alanları için kullanılır.
Tarayıcı desteğine göre, sunucuya gönderilirken e-posta adresi otomatik olarak doğrulanabilir.
Bazı akıllı telefonlar e-posta türünü tanır ve klavyeye ".com" ekler, böylece e-posta girişine uyum sağlar.
Örnek
<form> E-posta: <input type="email" name="email"> </form>
Giriş Türü: search
<input type="search"> Arama alanları (arama alanlarının görünümü normal metin alanlarına benzer).
Örnek
<form> Google Arama: <input type="search" name="googlesearch"> </form>
Giriş Türü: tel
<input type="tel"> Telefon numarasını içermesi gereken giriş alanları için kullanılır.
Şu anda sadece Safari 8 tel türünü destekler.
Örnek
<form> Telefon: <input type="tel" name="usrtel"> </form>
Giriş Türü: url
<input type="url"> URL adresini içermesi gereken giriş alanları için kullanılır.
Tarayıcı desteğine göre, sunucuya gönderilirken URL alanı otomatik olarak doğrulanabilir.
Bazı akıllı telefonlar URL türünü tanır ve klavyeye ".com" ekler, böylece URL girişine uyum sağlar.
Örnek
<form> Ana sayfanızı ekleyin: <input type="url" name="homepage"> </form>
- Önceki Sayfa HTML Form Elemanları
- Sonraki Sayfa HTML Giriş Özellikleri
