Formalar, input va saytni internetga chiqarish

DarslarWeb dasturlash

Formalar, input va saytni internetga chiqarish

Oddiy formalar yaratish, input turlari, iframe orqali tashqi sahifa qo'shish va Netlify yordamida saytni bepul internetga joylash.

30 daqiqa
HTML — Dars 4

Formalar, input va Netlify

Ma'lumot yig'ish uchun formalar yasaysiz va birinchi saytingizni internetga chiqarasiz.

<form><input><iframe>Netlify

Dars rejasi

4 ta mavzu
  1. 01Forma nima — <form>
  2. 02<input> va uning turlari
  3. 03<iframe> — boshqa sahifa qo'yish
  4. 04Saytni Netlify'ga joylash

1. 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>
Ro'yxatdan o'tish formasini sinang
Natijajonli

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<iframe
2 src="https://www.youtube.com/embed/dQw4w9WgXcQ"
3 width="560"
4 height="315">
5</iframe>
YouTube video qo'shib ko'ring
Natijajonli

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?

  1. https://app.netlify.com/drop saytiga kiring.
  2. Saytingiz joylashgan butun papkani (masalan, my-site) oynadagi «Drag and drop» joyiga sudrab tashlang.
  3. Netlify avtomatik havola beradi, masalan: amazing-cat-123.netlify.app
  4. Shu havolani do'stlaringizga jo'nating — ular saytingizni ko'radi!

Kichik test

0 / 5

1.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?

Mustaqil ish

0 / 6