Örnek
iki farklı giriş tipleri ile bir HTML formu; metin ve gönderin:
<form action="demo_form.asp">
Username: <input type="text" name="usrname"><br>
<input type="submit" value="Submit">
</form>
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
type niteliği türünü belirtir <input> görüntülemek için eleman.
Varsayılan türüdür: text .
Tip: Bu gerekli bir özellik değildir, ancak biz bunu her zaman içermelidir düşünüyorum.
Tarayıcı Desteği
| nitelik | |||||
|---|---|---|---|---|---|
| type | Evet | Evet | Evet | Evet | Evet |
Not: type niteliği belli başlı tüm tarayıcılarda çalışır. Ancak, tüm değişik ölçüm metodu tüm büyük tarayıcılarda çalışır.
Her bir giriş türü için tarayıcı desteği görmek için aşağıdaki bakın.
HTML 4.01 ve HTML5 Arasındaki Farklar
: HTML5 aşağıdaki yeni giriş tipleri vardır color, date, datetime, datetime-local, month, week, time, email, number, range, search, tel ve url .
Sözdizimi
<input type=" Özellik Değerleri değer Açıklama button Tıklanabilir düğme tanımlar (mostly used with a JavaScript to activate a script) checkbox bir onay kutusu tanımlar color bir renk seçici tanımlar date Bir tarih kontrolü tanımlar (year, month and day (no time) ) datetime Giriş tipi datetime HTML standardı kaldırıldı. yerine datetime-yerel kullanın. datetime-local Saniyenin tarih ve saat kontrolü (yıl, ay, gün, ikinci saat, dakika ve fraksiyonu tanımlar (no time zone) email Bir e-posta adresi için bir alan tanımlar file Bir dosya seçme alanını ve tanımlar "Browse..." butonuna (for file uploads) hidden Gizli bir giriş alanı tanımlar image Gönder düğmesini gibi bir resim tanımlar month Bir ay ve yıl kontrolünü tanımlar (no time zone) number Bir numara girmek için bir alan tanımlar password Bir şifre alanı tanımlar (characters are masked) radio Bir radyo düğmesini tanımlar range Bunun tam değeri numarasını girmek için bir kontrol önemli değildir tanımlar (like a slider control) reset Bir reset düğmesi tanımlar (resets all form values to default values) search Bir arama dizesini girmek için bir metin alanı tanımlar submit Gönder düğmesi tanımlar tel Bir telefon numarası girmek için bir alan tanımlar text Varsayılan. Tek-hat metin alanını tanımlar (default width is 20 characters) time Bir saat girişi için bir denetim tanımlar (no time zone) url Bir URL girmek için bir alan tanımlar week Bir hafta ve yıl kontrolünü tanımlar (no time zone)
Örnekler
Giriş türü: button
Örnek
o tıklandığında JavaScript aktive bir tıklanabilir düğme,:
<input type="button" value="Click me" onclick="msg()">
Kendin dene "
Giriş türü: checkbox
Örnek
Onay kutuları, bir kullanıcı seçenekleri sınırlı sayıda bir veya daha fazla seçenek seçmenize olanak tanır:
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car
Kendin dene "
Giriş türü: color
Örnek
Bir renk seçiciden bir renk seçin:
Select your favorite color: <input type="color" name="favcolor"> Kendin dene "
Giriş türü: date
Giriş türü: datetime
Örnek
Bir tarih ve saat kontrolü tanımlayın (with time zone) :
Birthday (date and time): <input type="datetime" name="bdaytime"> Kendin dene " Giriş tipi datetime HTML standardı kaldırıldı. yerine datetime-yerel kullanın.
Giriş türü: datetime-local
Örnek
Bir tarih ve saat kontrolü tanımlayın (no time zone) :
Birthday (date and time): <input type="datetime-local" name="bdaytime"> Kendin dene "
Giriş türü: email
Örnek
Bir e-posta adresi için bir alan tanımlayın (will be automatically validated when submitted) :
E-mail: <input type="email" name="usremail"> Kendin dene " Tip: iPhone'da Safari E-posta türünü tanır ve bunu eşleştirmek için ekran klavyesini değiştirir (adds @ and .com options) .
Giriş türü: file
Örnek
Bir dosya seçme alanını ve tanımla "Browse..." düğmesine (for file uploads) :
Select a file: <input type="file" name="img">
Kendin dene "
Giriş türü: hidden
Örnek
Gizli bir alan tanımlayın (not visible to a user) .
Gizli bir alan genellikle varsayılan bir değer depolayan veya değeri bir JavaScript tarafından değişmiş olabilir:
<input type="hidden" name="country" value="Norway">
Kendin dene "
Giriş türü: image
Örnek
Bir gönderme düğmesi gibi bir görüntü tanımlayın:
<input type="image" src="img_submit.gif" alt="Submit">
Kendin dene "
Giriş türü: month
Örnek
Bir ay ve yıl kontrolünü tanımlayın (no time zone) :
Birthday (month and year): <input type="month" name="bdaymonth"> Kendin dene "
Giriş türü: number
Örnek
Bir numara girmek için bir alan tanımlayın (You can also set restrictions on what numbers are accepted) :
Quantity (between 1 and 5): <input type="number" name="quantity" min="1"
max="5"> Kendin dene " Kullanın following kısıtlamalar belirtmek için özelliklerini:
- max - izin verilen maksimum değer belirtir
- min - izin verilen minimum değer belirtir
- step - Yasal sayı ara belirtir
- value - varsayılan değeri belirtir
Giriş türü: password
Örnek
Bir şifre alanı tanımlayın (characters are masked)
<input type="password" name="pwd">
Kendin dene "
Giriş türü: radio
Örnek
Radyo düğmeleri Kullanıcının seçimler sınırlı sayıda sadece bir seçelim:
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other">
Other
Kendin dene "
Giriş türü: range
Örnek
Bunun tam değeri önemli olmayan bir sayı girmek için bir kontrol tanımlama (like a slider control) . Ayrıca numaraları kabul edilir şeylere kısıtlamalar ayarlayabilirsiniz:
<input type="range" name="points" min="0" max="10"> Kendin dene " Kullanın following kısıtlamalar belirtmek için özelliklerini:
- max - izin verilen maksimum değer belirtir
- min - izin verilen minimum değer belirtir
- step - Yasal sayı ara belirtir
- value - varsayılan değeri belirtir
Giriş türü: reset
Örnek
Bir sıfırlama düğmesine tanımlayın (resets all form values to default values) :
<input type="reset"> Kendin dene " Tip: dikkatle sıfırlama düğmesini kullanın! Bu yanlışlıkla reset düğmesine aktive kullanıcılar için can sıkıcı olabilir.
Giriş türü: search
Örnek
Bir arama alanını tanımlayın (like a site search, or Google search) :
Search Google: <input type="search" name="googlesearch"> Kendin dene "
Giriş türü: submit
Giriş türü: tel
Örnek
Bir telefon numarası girmek için bir alan tanımlayın:
Telephone: <input type="tel" name="usrtel"> Kendin dene "
Giriş türü: text
Örnek
Bir kullanıcı metin girmek iki tek satırlı metin alanları tanımlayın:
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
Kendin dene "
Giriş türü: time
Örnek
Bir süre girmek için bir denetim tanımlayın (no time zone) :
Select a time: <input type="time" name="usr_time"> Kendin dene "
Giriş türü: url
Örnek
Bir URL girmek için bir alan tanımlayın:
Add your homepage: <input type="url" name="homepage"> Kendin dene " Tip: iPhone'da Safari url giriş tipini tanır ve bunu eşleştirmek için ekran klavyesini değiştirir (adds .com option) .
Giriş türü: week
Örnek
Bir hafta ve yıl kontrolünü tanımlayın (no time zone) :
Select a week: <input type="week" name="week_year"> Kendin dene "