HTML Forms

1.

Reja:
HTML Forms
Label va Input elementlari
Input element turlari
Select elementi
Textarea elementi

HTML Forms
HTML formasi - bu foydalanuvchi ma'lumotlarini veb-serverda,
interaktiv boshqaruv yordamida saqlaydigan hujjat. HTML formada
foydalanuvchi nomi, parol, aloqa raqami, elektron pochta identifikatori
va boshqalar kabi har xil ma'lumotlar mavjud.
HTML shaklida ishlatiladigan elementlar bular: check box, input box,
radio buttons, submit tugmachalari va boshqalar. Ushbu
elementlardan foydalanib veb-serverda foydalanuvchi ma'lumotlari
joylashtiriladi.
HTML Formasini yaratish uchun <form> tegidan foydalaniladi.

3.

HTML Forms
<body>
<form>
Username:<br>
<input type="text" name="username">
<br> Email id:<br>
<input type="text" name="email_id"> <br><br>
<input type="submit" value="Submit">
</form>
</body>

4.

<label>
The <label> Element
<label> elementi ko'plab shakldagi elementlar uchun hisoblanadi.
<label> elementi ekrandagi yozuvlarni o’qish uchun foydalidir.
<label> elementi juda kichik mintaqalarni (masalan, radio tugmalari
yoki tasdiqlash qutilarini) bosishda qiyinchiliklarga duch keladigan
foydalanuvchilarga yordam beradi - chunki foydalanuvchi <label>
elementidagi matnni bosganda, radio tugmachasini / tasdiqlash
qutisini o'zgartiradi.
<label> tegining for atributi ularni bir-biriga bog'lash uchun <input>
elementining id atributiga teng bo'lishi kerak.

5.

Input Elements
<body>
<form>
<label for="EMAIL ID">Email Id:</label><br>
<input type="text" name="Email id" id="Email id">
</form>
</body>

6.

Input Element
HTML <input> elementi eng ko'p ishlatiladigan elementlardandir.
<input> elementi atributiga qarab ko'p jihatdan o’zining shakli
o’zgargan holatda paydo bo’lishi mumkin. Mana ba'zi misollar:
Type
Description
<input type="text">
Displays a single-line text input field
<input type="radio">
Displays a radio button (for selecting one of
many choices)
<input type="checkbox">
Displays a checkbox (for selecting zero or
more of many choices)
<input type="submit">
Displays a submit button (for submitting the
form)
<input type="button">
Displays a clickable button

7.

Input Element
1. <input type="button">
12.<input type="password">
2. <input type="checkbox">
13.<input type="radio">
3. <input type="color">
14.<input type="range">
4. <input type="date">
15.<input type="reset">
5. <input type="datetime-local">
16.<input type="search">
6. <input type="email">
17.<input type="submit">
7. <input type="file">
18.<input type="tel">
8. <input type="hidden">
19.<input type="text">
9. <input type="image">
20.<input type="time">
10.<input type="month">
21.<input type="url">
11.<input type="number">
22.<input type="week">

8.

Input Text
<Input type = "text"> matn kiritish uchun bitta qatorli maydonni
belgilaydi.
<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>

9.

Input Radio
<Input type = "radio"> radio tugmachasini belgilaydi. Radio tugmalari
foydalanuvchiga cheklangan miqdordagi tanlovlardan birini tanlashga
imkon beradi.
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>

10.

Input Checkbox
<Input type = "checkbox"> belgilash (checkbox) katagini belgilaydi. Belgilash
katakchalari foydalanuvchiga cheklangan miqdordagi tanlovning variantlarini
tanlashga imkon beradi.
<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>

11.

Input Submit
<Input type = "submit"> forma ma'lumotlarini forma ishlov beruvchiga (formhandler) topshirish tugmachasini belgilaydi. Forma ishlovchisi odatda
serverdagi kirish ma'lumotlarini qayta ishlash skriptiga ega fayldir. Forma ishlov
beruvchisi formaning action atributida ko'rsatilgan.
<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>

12.

Input Action
Action atributi ariza topshirilganda bajariladigan amalni belgilaydi. Odatda, ariza
ma'lumotlari foydalanuvchi yuborish tugmachasini bosganda serverdagi faylga
yuboriladi. Quyidagi misolda ariza ma'lumotlari "action_page.php" nomli faylga
yuboriladi. Ushbu fayl shakl ma'lumotlarini boshqaradigan server tomonidagi
skriptni o'z ichiga oladi:
<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>

13.

Select Element
<select> elementi ochiladigan ro'yxatni belgilaydi.
<option> elementlari tanlanishi mumkin bo'lgan variantni belgilaydi.
Odatiy holatda, ochiladigan ro'yxatdagi birinchi element avtomatik ravishda
tanlangan bo’ladi.
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option> <option value="audi">Audi</option>
</select>

14.

Select Element
Foydalanuvchiga bir nechta qiymatni tanlashga ruxsat berish uchun multiple
atributdan foydalanish kerak:
<label for="cars">Choose a car:</label>
<select id="cars" name="cars“ size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

15.

Textarea Element
<textarea> elementi ko'p satrli kirish maydonini (textarea) belgilaydi.
Rows atributasi matn sohasidagi ko'rinadigan qatorlar sonini belgilaydi.
Cols atributasi matn maydonining ko'rinadigan kengligini belgilaydi.
Misol uchun:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

16.

Button Element
<button> elementi bosiladigan tugmani paydo qilishda ishlatiladi.
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>

English Русский Rules