Menü Kapat
Input-lar istifadəçilərdən məlumat almaq üçün istifadə edilən sahələrdir. İstifadəçilərdən fərqli məlumatları almaq üçün müxtəlif giriş tipləri vardır.
HTML5 ilə form-larda istifadə etdiyimiz inputlara bir çox yeni məlumat tipi əlavə olunmuşdur.
Aşağıdakı siyahıda inputlar üçün istifadə edilən tiplər verilmişdir.
• text
• button
• checkbox
• password
• radio
• reset
• submit
Input tiplərini nəzərdən keçirək:

Text

<input type = “text”> bir sətirli mətn daxilini təyin edir:

<!DOCTYPE html>
<html>
<body><h2>Mətn Girişi Input</h2><form>
Ad:<br>
<input type=”text” name=”Ad”>
<br>
Soyad:<br>
<input type=”text” name=”Soyad”>
</form>
</body>
</html>

Nəticə:


Button
 (düymə)
<!DOCTYPE html>
<html>
<body><h2>Button düyməsi</h2><input type=”button” value=”Kliklə!”>

</body>
</html>

Brauzerdə bu kod belə görünəcək

Checkbox

<input type = “checkbox”> bir yoxlama qutusunu təyin edir.

Yoxlama qutuları ilə bir istifadəçi, məhdud sayda seçimi seçməsinə və ya daha çox variantları seçməsinə icazə verir.

<!DOCTYPE html>
<html>
<body><h2>Yoxlama Qutuları</h2>
<form action=”/action_page.php”>
<input type=”checkbox” value=”Velosiped”>Mənim velosipedim var
<br>
<input type=”checkbox”value=”Maşın”>Mənim maşınım var
<br><br></form>

</body>
</html>

Brauzerdə bu kod belə görünəcək:

Password

<input type = “passüord”> parol sahəsini müəyyən edir:

<!DOCTYPE html>
<html>
<body><form action=””>
İstifadəçi ad:<br>
<input type=”text” name=”userid”>
<br>
İstifadəçi parolu:<br>
<input type=”password” name=”psw”>
</form></body>
</html>

Brauzerdə bu kod belə görünəcək:

Radio

<input type = “radio”> radio düyməsini müəyyən edir.

Radyo düymələri bir istifadəçinin məhdud sayda seçimi seçilməsinə imkan verir:

<!DOCTYPE html>
<html>
<body>
<form>
<input type=”radio” name=”cins” value=”Kişi” checked> Kişi<br>
<input type=”radio” name=”cins” value=”Qadın”> Qadın<br>
</form>
</body>
</html>

Brauzerdə bu kod belə görünəcək:

Reset

<input type = “reset”> bütün form dəyərlərini default dəyərlərinə sıfırlayan bir sıfırlama düyməsini müəyyən edir:

<!DOCTYPE html>
<html>
<body><form action=”/action_page.php”>
Ad:<br>
<input type=”text” name=”Ad”>
<br>
Soyad:<br>
<input type=”text” name=”Soyad”>
<br><br>
<input type=”reset” value=”Sıfırla”>
</form>
</body>
</html>

Brauzerdə bu kod belə görünəcək:

Submit

<input type = “submit”> forma verilərini form-sahibinə təqdim etmək üçün bir düyməni müəyyən edir.Göndərmə düyməsi Form-işləyicisi adətən giriş məlumatlarının işlənməsi üçün bir skriptə malik bir server səhifəsidir

<!DOCTYPE html>
<html>
<body>
<form action=”/action_page.php”>
Ad:<br>
<input type=”text” name=”Ad” value=”Samir”><br>
Soyad:<br>
<input type=”text” name=”Soyad” value=”Nurlan”><br><br>
<input type=”submit” value=”Göndər”>
</form>
</body>
</html>

Brauzerdə bu kod belə görünəcək:

HTML5 added several new input types:

  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • tel
  • time
  • url
  • week
color (rəng seçimi üçün istifadə edilir)
<input type="color">
date (gün, ay və il ifadə etmək üçün tarix)
<input type=”date” name=”tarix”>

 

datetime (tarixə əlavə olaraq saat məlumatını da verə bilərsiniz)
<input type=“datetime”>

 

datetime-local (yerli istifadəçilər üçün saat və tarix ilə zaman seçməyi təmin edir)
<input type=”datatime-local”>

 

email (yalnız e-mail ünvanı daxil etməyə icazə verir)
<input type="email">

 

file (fayl seçmək üçün istifadə olunur)
<input type="file">

 

hidden (gizli dəyər üçündür)
<input type="hidden">

 

image (şəkil əlavəsi etiketi)
<input type="image" src="sekil.jpg" alt="sekil" width="50" height="50">

 

month (seçdiyiniz ay və ili göstərir)
<input type="month">
number (rəqəm daxil etmək üçün istifadə edilir, minimum dəyər üçün “min”, maksimum dəyər üçün “max”, ədədin artma və azalma addımları üçün də “step” istifadə edilir)
<input type="number" min="0" max="100" step="10">
tel (telefon nömrələrini yazmaq üçün istifadə edilir)
<input type="tel">

 

time (saatı ifadə etmək üçün istifadə edilir)
<input type="time">

 

url (link daxil etmək üçün istifadə edilir)
<input type="url">

 

week (həftə məlumatı vermək üçün istifadə edilir. Seçilən günün hansı ilin neçənci həftəsi olduğu barədə məlumat verir)
<input type="week">