ПрограммированиеПохожие презентации:
Biz bilan birga yuksaling
1.
Biz bilan birga yuksaling.2.
Reja:HTML Forms
Label va Input elementlari
Input element turlari
Select elementi
Textarea elementi
CSS Float va Opacity
3.
HTML FormsHTML 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.
4.
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>
5.
<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.
6.
Input Elements<body>
<form>
<label for="EMAIL ID">Email Id:</label><br>
<input type="text" name="Email id" id="Email id">
</form>
</body>
7.
Input ElementHTML <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
8.
Input Element1. <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">
9.
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>
10.
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>
11.
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>
12.
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>
13.
Input ActionAction 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>
14.
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>
15.
Select ElementFoydalanuvchiga 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>
16.
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>
17.
Button Element<button> elementi bosiladigan tugmani paydo qilishda ishlatiladi.
<button type="button" onclick="alert('Hello World!')">
Click Me!
</button>
18.
CSS FloatFloat - bu CSS fayliga yoki to'g'ridan-to'g'ri element uslubida yozilgan CSS
xususiyatidir. Float xususiyati contentning yo’nalishini belgilaydi. Quyida float
ning turlarini ko’rishimiz mumkin:
• float: left - Element floats on left side of the container.
• float: right - Element floats on right side of container.
• float: inherit - Element inherits floating property of it’s parent (div, table
etc…).
• float: none - Element is displayed as it is (Default).
19.
CSS Float<body>
<div class=“test” style=“font-size:40px; color:#006400;
float:right;>
<p>Float is a CSS property written in CSS file or
directly in the style of an element.</p>
</div>
</body>
20.
CSS OpacityOpacity - bu elementning shaffofligini tavsiflovchi xususiyatdir.
Image Opacity: Opacity xususiyati rasmda shaffoflikni tasvirlash uchun
ishlatiladi.
Shaffoflikning qiymati 0,0 dan 1,0 gacha, bu yerda past qiymat yuqori
shaffoflikni va yuqori qiymat past shaffoflikni anglatadi.
Shaffoflik darajasi Opacity% = Opacity * 100 deb hisoblanadi.
21.
CSS Opacity<style>
.forest { opacity: 0.5; } p { font-size:25px; font-weight:bold; margin-bottom:5px; }
.opacity { text-align:center; }
</style>
<body>
<div class = "opacity">
<p>Image with 100% opacity (original image)</p> <img src= “./1.png"
class="forest1">
<br><br>
<p>Image with 50% opacity</p> <img src= “./1.png" class="forest">
</div>
</body>
22.
CSS OpacityImage Hover Opacity: Opacity uchun ishlatiladigan hover property,
rasmda sichqoncha rasm ustiga borganda hover effektini tasir qildirish
uchun ishlatiladi.
Shaffoflikning qiymati xiralikni avval yuqori qiymat sifatida belgilab,
so'ngra uning ustiga o'tsa tushirganda, jarayonni osongina teskari
yo'naltirishi mumkin:
.hightolow { opacity: 1.0; }
.hightolow:hover { opacity: 0.5; }
23.
CSS Opacity<style>
.forest { opacity: 0.5; } p { font-size:25px; font-weight:bold; margin-bottom:5px; }
.opacity { text-align:center; }
</style>
<body>
<div class = "opacity">
<p>Image with 100% opacity (original image)</p> <img src= “./1.png"
class="forest1">
<br><br>
<p>Image with 50% opacity</p> <img src= “./1.png" class="forest">
</div>
</body>