Formalar, input va saytni internetga chiqarish
Oddiy formalar yaratish, input turlari, iframe orqali tashqi sahifa qo'shish va Netlify yordamida saytni bepul internetga joylash.
Formalar, input va Netlify
Ma'lumot yig'ish uchun formalar yasaysiz va birinchi saytingizni internetga chiqarasiz.
Dars rejasi
4 ta mavzu1. Forma — <form>
Forma — bu foydalanuvchidan ma'lumot olish uchun maydon. Masalan: ro'yxatdan o'tish, login, izoh yozish, buyurtma berish — bularning hammasi forma orqali bajariladi.
Formaning ichiga input (kiritish maydoni), tugma va matn joylashtiriladi:
1<form>2 <label>Ismingiz:</label>3 <input type="text">4 <button>Yuborish</button>5</form>2. <input> va uning turlari
<input> — bir qator matn, raqam, parol yoki boshqa ma'lumot kiritish maydoni. Uning ko'rinishi type atributi orqali boshqariladi.
Eng ko'p ishlatiladigan turlari:
- type="text" — oddiy matn (ism, shahar).
- type="password" — parol (harflar • bilan yashirin).
- type="number" — faqat raqam.
- type="email" — email manzil (brauzer tekshiradi).
- type="tel" — telefon raqam.
- type="date" — sana tanlash.
- type="checkbox" — belgilab qo'yish (ha/yo'q).
- type="radio" — bir nechta variantdan bittasini tanlash.
1<form>2 <label>Ism:</label>3 <input type="text" placeholder="Ismingiz">4
5 <label>Parol:</label>6 <input type="password">7
8 <label>Yosh:</label>9 <input type="number" min="1" max="120">10
11 <label>Email:</label>12 <input type="email" required>13
14 <button type="submit">Ro'yxatdan o'tish</button>15</form>Radio va checkbox
Radio — bir nechta variantdan faqat bittasini tanlash. Checkbox — bir nechtasini birga tanlash. Radio guruhida hamma inputning name bir xil bo'lishi kerak:
1<p>Jinsingiz:</p>2<label><input type="radio" name="jins" value="erkak"> Erkak</label>3<label><input type="radio" name="jins" value="ayol"> Ayol</label>4
5<p>Qiziqishlaringiz:</p>6<label><input type="checkbox"> Sport</label>7<label><input type="checkbox"> Musiqa</label>8<label><input type="checkbox"> Dasturlash</label>3. <iframe> — boshqa sahifa qo'yish
<iframe> — sizning sahifangiz ichida boshqa sahifani ko'rsatish uchun ishlatiladi. Masalan, YouTube videosi, Google Map yoki boshqa sayt.
1<iframe2 src="https://www.youtube.com/embed/dQw4w9WgXcQ"3 width="560"4 height="315">5</iframe>4. Saytni internetga chiqarish — Netlify
Hozirgacha saytingiz faqat sizning kompyuteringizda ishlayapti. Boshqalar uni ko'ra olishi uchun saytni internetga «yuklash» kerak. Buning uchun Netlify — eng oson va BEPUL xizmat.
Qanday qilib yuklanadi?
- https://app.netlify.com/drop saytiga kiring.
- Saytingiz joylashgan butun papkani (masalan, my-site) oynadagi «Drag and drop» joyiga sudrab tashlang.
- Netlify avtomatik havola beradi, masalan: amazing-cat-123.netlify.app
- Shu havolani do'stlaringizga jo'nating — ular saytingizni ko'radi!
Kichik test
0 / 51.Parol kiritish uchun input qaysi turga ega bo'lishi kerak?
2.Bir nechta variantdan FAQAT bittasini tanlash uchun qaysi input ishlatiladi?
3.Inputni majburiy to'ldiriladigan qilish uchun qaysi atribut qo'shiladi?
4.Netlify Drop bilan saytni joylashda papkada albatta qaysi fayl bo'lishi kerak?
5.<iframe> nima uchun ishlatiladi?