Mövzunu Açan
#0
HTML5 və CSS3 ilə İnteraktiv Forma Yaradılması: Başlanğıc Səviyyəsi
Bu məqalə, HTML5 və CSS3 istifadə edərək interaktiv formalar yaratmaq üçün əsas prinsipləri izah edir. Başlanğıc səviyyəsinə uyğun olaraq, sadə və anlaşıqlı nümunələr vasitəsilə formanın strukturunu, elementlərini və stilini yaradacaqıq.
HTML5 Forması: Struktur və Elementlər
Formanın əsasını yaradan <form> elementi ilə başlayırıq. Bu element, bütün form elementlərini özündə birləşdirir. Məsələn:
HTML
1234
<form action="/submit" method="post">
<!-- Form elementləri burada yerləşdiriləcək -->
</form>
Form elementləri arasında ən çox istifadə olunanlar:
- <input>: Mətn, şifrə, e-poçt, rəqəm və s. kimi müxtəlif tiplərdə məlumat daxil etmək üçün istifadə olunur.
- <textarea>: Bir neçə sətirdən ibarət mətn daxil etmək üçün istifadə olunur.
- <select>: Siyahıdan seçim etmək üçün istifadə olunur.
- <button>: Formanı göndərmək və ya digər əməliyyatlar üçün düymə yaradır.
Məsələn, sadə mətn daxil etmək üçün <input> elementi:
HTML
123
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
CSS3 ilə Formaya Stil Verilməsi
CSS3, forma elementlərinə müxtəlif vizual effektlər verərək istifadəçi təcrübəsini yaxşılaşdırır. Məsələn, elementlərin ölçüsünü, rəngini, fonunu və s. dəyişmək mümkündür.
Məsələn, <input> elementinə stil verilməsi:
CSS
1234567891011
input[type="text"] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
font-size: 16px;
}
JavaScript ilə İnteraktivlik Əlavə Etmək
JavaScript, forma elementlərinin davranışını dəyişərək interaktivliyi artırır. Məsələn, istifadəçinin daxil etdiyi məlumatları yoxlamaq, dinamik olaraq elementləri dəyişdirmək və s.
Məsələn, sadə yoxlama funksiyası:
JAVASCRIPT
12345678
function validateForm() {
let x = document.forms["myForm"]["username"].value;
if (x == "") {
alert("İstifadəçi adı daxil edilməlidir");
return false;
}
}
Bu nümunələr vasitəsilə, HTML5, CSS3 və JavaScript istifadə edərək interaktiv formalar yaratmaq üçün əsas prinsipləri öyrənə bilərsiniz. Daha mürəkkəb formalar yaratmaq üçün bu texnologiyaları daha da dərindən öyrənmək lazımdır.