HTML Giriş Türleri
<input>Bu bölüm, HTML öğesinin farklı türlerini açıklar .
HTML Giriş Türleri
HTML'de kullanabileceğiniz farklı giriş türleri şunlardır:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
İpucu: Özelliğin varsayılan değeri type"metin"dir.
Giriş Türü Metin
<input type="text">
tek satırlık bir metin giriş alanı tanımlar :
Örnek
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
İlk adı:Soyadı:
Giriş Tipi Şifre
<input type="password">bir şifre alanı tanımlar :
Örnek
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Kullanıcı adı:Parola:
Parola alanındaki karakterler maskelenir (yıldız veya daire olarak gösterilir).
Giriş Türü Gönder
<input type="submit">form işleyicisine form verilerini
göndermek için bir düğme tanımlar .
Form işleyici tipik olarak giriş verilerini işlemek için bir komut dosyası içeren bir sunucu sayfasıdır.
Form işleyici, formun action
özniteliğinde belirtilir:
Örnek
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Gönder düğmesinin değer özelliğini atlarsanız, düğme varsayılan bir metin alır:
Örnek
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit">
</form>
Giriş Tipi Sıfırlama
<input type="reset">
tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar :
Örnek
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Giriş değerlerini değiştirirseniz ve ardından "Sıfırla" düğmesini tıklarsanız, form verileri varsayılan değerlere sıfırlanacaktır.
Giriş Tipi Radyo
<input type="radio">bir radyo düğmesi tanımlar .
Radyo düğmeleri, kullanıcının sınırlı sayıda seçenekten YALNIZCA BİRİNİ seçmesine izin verir:
Örnek
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Giriş Türü Onay Kutusu
<input type="checkbox">bir onay kutusu tanımlar .
Onay kutuları, kullanıcının sınırlı sayıda seçenek arasından SIFIR veya DAHA FAZLA seçeneğini seçmesine olanak tanır.
Örnek
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Giriş Türü Düğmesi
<input type="button">bir düğme tanımlar :
Örnek
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Yukarıdaki HTML kodu bir tarayıcıda şu şekilde görüntülenecektir:
Giriş Tipi Renk
Bir <input type="color">renk içermesi gereken giriş alanları için kullanılır.
Tarayıcı desteğine bağlı olarak, giriş alanında bir renk seçici görünebilir.
Örnek
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Giriş Tipi Tarih
Tarih <input type="date">içermesi gereken giriş alanları için kullanılır.
Tarayıcı desteğine bağlı olarak, giriş alanında bir tarih seçici görünebilir.
Örnek
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
Tarihlere kısıtlamalar eklemek için minve özniteliklerini de kullanabilirsiniz :max
Örnek
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
Girdi Türü Tarihsaat-yerel
Saat <input type="datetime-local">dilimi olmayan bir tarih ve saat giriş alanı belirtir.
Tarayıcı desteğine bağlı olarak, giriş alanında bir tarih seçici görünebilir.
Örnek
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Giriş Türü E-posta
E <input type="email">-posta adresi içermesi gereken giriş alanları için kullanılır.
Tarayıcı desteğine bağlı olarak, e-posta adresi gönderildiğinde otomatik olarak doğrulanabilir.
Bazı akıllı telefonlar e-posta türünü tanır ve e-posta girişiyle eşleşmesi için klavyeye ".com" ekler.
Örnek
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Giriş Türü Dosyası
<input type="file">
Dosya yüklemeleri için bir dosya seçme alanı ve bir "Gözat" düğmesi tanımlar .
Örnek
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Giriş Türü Gizli
Gizli <input type="hidden">
bir giriş alanı tanımlar (kullanıcı tarafından görülmez).
Gizli bir alan, web geliştiricilerinin bir form gönderildiğinde kullanıcılar tarafından görülemeyen veya değiştirilemeyen verileri içermesine izin verir.
Gizli bir alan genellikle form gönderildiğinde güncellenmesi gereken hangi veritabanı kaydını depolar.
Not: Değer, sayfanın içeriğinde kullanıcıya gösterilmese de, herhangi bir tarayıcının geliştirici araçları veya "Kaynağı Görüntüle" işlevi kullanılarak görülebilir (ve düzenlenebilir). Gizli girdileri bir güvenlik biçimi olarak kullanmayın!
Örnek
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
Girdi Türü Ay
Kullanıcının <input type="month">bir ay ve yıl seçmesini sağlar.
Tarayıcı desteğine bağlı olarak, giriş alanında bir tarih seçici görünebilir.
Örnek
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Giriş Tipi Numarası
Sayısal bir
giriş alanı <input type="number">tanımlar .
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |