Html input element turlari va vazifalari

45. 
    Variant
    

Reja:

1. 
   HTML input element turlari va vazifalari
   
2. 
   Bootstrap da sinish nuqtalar (breakpoints) va pixel ratio tushunchasi
   
3. 
   Javascript da funksiya va ularning turlari.
   

HTMLda foydalanishimiz mumkin bo'lgan turli xil kiritish turlari:

• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  
• 
  
  

 bir qatorli matn kiritish maydonini belgilaydi :

Misol

<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>


parol maydonini belgilaydi :

Misol

<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>

forma ma'lumotlarini forma ishlov beruvchisiga yuborish tugmachasini belgilaydi .Shakl ishlov beruvchisi odatda kiritilgan ma'lumotlarni qayta ishlash uchun skriptga ega bo'lgan server sahifasidir.
Shaklni ishlovchi shakl atributida ko'rsatilgan action :

Misol

<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>
Yuborish tugmasining qiymat atributini o‘tkazib yuborsangiz, tugma standart matnni oladi:

Misol

<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>

 barcha shakl qiymatlarini standart qiymatlariga qaytaradigan qayta o'rnatish tugmachasini belgilaydi :

Misol

<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>

radio tugmani belgilaydi . Radio tugmalari foydalanuvchiga cheklangan miqdordagi tanlovdan FAQAT BIRTANI tanlash imkonini beradi:

Misol

<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>

belgilash katakchasini belgilaydi .Belgilash katakchalari foydalanuvchiga cheklangan miqdordagi tanlovdan NO yoki KO'PROQ variantlarni tanlash imkonini beradi.

Misol

<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>

tugmani belgilaydi :

Misol

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Rangni o'z ichiga olishi kerak bo'lgan kiritish maydonlari uchun ishlatiladi .Brauzer qo'llab-quvvatlashiga qarab, kiritish maydonida rang tanlash vositasi paydo bo'lishi mumkin.

Misol

<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

Sanani o'z ichiga olishi kerak bo'lgan kiritish maydonlari uchun ishlatiladi .Brauzer qo'llab-quvvatlashiga qarab, sanani tanlash vositasi kiritish maydonida paydo bo'lishi mumkin.

Misol

<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>
Shuningdek , sanalarga cheklovlar qo'shish uchun minva atributlaridan foydalanishingiz mumkin :max

Misol

<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>

Vaqt mintaqasi bo'lmagan sana va vaqtni kiritish maydonini belgilaydi .Brauzer qo'llab-quvvatlashiga qarab, sanani tanlash vositasi kiritish maydonida paydo bo'lishi mumkin.

Misol

<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

Elektron pochta manzili bo'lishi kerak bo'lgan kiritish maydonlari uchun ishlatiladi .Brauzer qo'llab-quvvatlashiga qarab, elektron pochta manzili yuborilganda avtomatik ravishda tasdiqlanishi mumkin.Ba'zi smartfonlar elektron pochta turini taniydi va elektron pochta kiritishiga mos kelish uchun klaviaturaga ".com" ni qo'shadi.

Misol

<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>

 Tasvirni yuborish tugmasi sifatida belgilaydi .Rasmga boradigan yo'l atributda ko'rsatilgan src.

Misol

<form>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>

 Faylni tanlash maydonini va fayl yuklash uchun "Browse" tugmasini belgilaydi .

Misol

<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Yashirin kiritish maydonini belgilaydi  (foydalanuvchiga ko'rinmaydi). Yashirin maydon veb-ishlab chiquvchilarga ariza topshirilganda foydalanuvchilar tomonidan ko'rilmaydigan yoki o'zgartirilmaydigan ma'lumotlarni kiritish imkonini beradi.
Yashirin maydon ko'pincha ariza topshirilganda yangilanishi kerak bo'lgan ma'lumotlar bazasi yozuvini saqlaydi.

Misol

<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>

Bu foydalanuvchiga oy va yilni tanlash imkonini beradi.
Brauzer qo'llab-quvvatlashiga qarab, sanani tanlash vositasi kiritish maydonida paydo bo'lishi mumkin.

Misol

<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>