9.1 Formaların əsas hadisələri
Formaların funksionallığını təmin etmək üçün istifadəçinin forma elementləri ilə qarşılıqlı əlaqəsi zamanı baş verən hadisələri anlamaq və idarə etmək lazımdır. Aşağıda biz HTML-də formaların əsas hadisələrini, onların JavaScript-lə emalını və istifadəsinə dair nümunələri ətraflı nəzərdən keçirəcəyik.
HTML-də formalar istifadəçi ilə forma elementləri, məsələn, giriş sahələri, düymələr, qutuçuklar və radiodüymələr ilə qarşılıqlı əlaqə zamanı müxtəlif hadisələr yarada bilər. Formaların əsas hadisələri aşağıdakılardır:
- submit — formanı göndərmə hadisəsi
- reset — formanı sıfırlama hadisəsi
- focus — element diqqət aldıqda baş verən hadisə
- blur — element diqqəti itirdikdə baş verən hadisə
- change — forma elementinin dəyəri dəyişdikdə baş verən hadisə
- input — forma elementinə məlumat daxil edilən zaman baş verən hadisə
- select — forma elementində mətni seçmə hadisəsi
9.2 Submit hadisəsi
Submit hadisəsi forma göndərildikdə baş verir. Adətən bu, istifadəçinin forma daxilində "Submit" düyməsinə basması ilə olur. Bu hadisəni emal etmək, məlumatların serverə göndərilməmişdən əvvəl yoxlanmasını, giriş səhvləri zamanı formanı göndərməyin qarşısını almağı və digər əməliyyatları yerinə yetirməyə imkan verir.
Submit hadisəsinin emal olunması nümunəsi:
<form id="my-form" action="/submit" method="post">
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<button type="submit">Göndərmək</button>
</form>
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Zəhmət olmasa, istifadəçi adını daxil edin.');
event.preventDefault(); // formanın göndərilməsinin qarşısını alırıq
} else {
alert(`İstifadəçi adı alındı: ${username}`);
event.preventDefault();
}
});
const form = document.getElementById('my-form');
form.addEventListener('submit', function(event) {
const username = document.getElementById('username').value;
if (username === '') {
alert('Zəhmət olmasa, istifadəçi adını daxil edin.');
event.preventDefault(); // formanın göndərilməsinin qarşısını alırıq
}
});
9.3 Reset hadisəsi
Reset hadisəsi formanı ilkin vəziyyətinə qaytarıldıqda baş verir. Adətən bu, istifadəçi "Reset" düyməsini basdıqda baş verir. Bu hadisəni emal etmək, formanı sıfırlamaq zamanı səhv mesajlarını təmizləmək kimi əlavə tədbirlər görmək üçün faydalı ola bilər.
Reset hadisəsini emal etmək nümunəsi:
<div style="min-height: 220px">
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button id="btn" type="button">Sıfırla</button>
</div>
</form>
<p id="log"></p>
</div>
<form id="my-form">
<label for="name">Name:</label>
<br>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email:</label>
<br>
<input type="email" id="email" name="email">
<br><br>
<label for="password">Password:</label>
<br>
<input type="password" id="password" name="password">
<div style="margin-top: 10px">
<button type="reset">Sıfırla</button>
</div>
</form>
<p id="log"></p>
const form = document.getElementById('my-form');
const btn = document.getElementById('btn');
const n = document.getElementById('name');
const e = document.getElementById('email');
const p = document.getElementById('password');
const log = document.getElementById('log');
document.addEventListener('DOMContentLoaded', () => {
n.value = "John";
e.value = "john@mail.com";
p.value = "qwerty";
});
btn.addEventListener('click', () => {
n.value = "";
e.value = "";
p.value = "";
log.textContent = 'Forma sıfırlandı!';
});
const form = document.getElementById('my-form');
const log = document.getElementById('log');
form.addEventListener('reset', function () {
log.textContent = 'Forma sıfırlandı!';
});
9.4 focus və blur hadisələri
focus və blur hadisələri uyğun olaraq, forma elementi fokus alanda və ya itirəndə baş verir. Bu hadisələr tez-tez istifadəçinin forma ilə qarşılıqlı əlaqəsini yaxşılaşdırmaq üçün istifadə olunur, məsələn, ipucları və ya səhv mesajlarını göstərmək üçün.
focus hadisəsini emal edən nümunə:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Siz bu ipucunu fokus aldığınız zaman görəcəksiniz.
Fokus dəyişəndən sonra belə görünəcək.
</div>
</form>
</div>
<form id="my-form">
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<div id="username-hint" style="display: none;">
Siz bu ipucunu fokus aldığınız zaman görəcəksiniz.
Fokus dəyişəndən sonra belə görünəcək.
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('focus', function (event) {
hint.style.display = 'block';
});
const usernameInput = document.getElementById('username');
const hint = document.getElementById('username-hint');
usernameInput.addEventListener('focus', function () {
hint.style.display = 'block';
});
blur hadisəsini emal edən nümunə:
<div style="min-height: 55px">
<form id="my-form">
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Səhv yalnız fokus dəyişəndən sonra sahə boş olduqda görünəcək
</div>
</form>
</div>
<form id="my-form">
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<div id="username-error" style="display: none; color: red;">
Səhv yalnız fokus dəyişəndən sonra sahə boş olduqda görünəcək
</div>
</form>
const form = document.getElementById('my-form');
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
usernameInput.addEventListener('blur', function (event) {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
const usernameInput = document.getElementById('username');
const error = document.getElementById('username-error');
usernameInput.addEventListener('blur', function () {
error.style.display = usernameInput.value === '' ? 'block' : 'none';
});
9.5 Input hadisəsi
Input hadisəsi hər dəfə form elementinin dəyəri dəyişdikdə baş verir, elementi fokusdan çıxarıb-çıxartmamasından asılı deyil. Bu hadisə çox vaxt istifadəçinin girişini dərhal yoxlamaq üçün istifadə olunur, məsələn, real vaxtda input sahələrinin doğrulanması zamanı.
Input hadisəsinin işlənməsinə nümunə:
<html lang="az">
<head>
<style>
input {
outline: none;
}
.valid {
border-color: green;
}
.invalid {
border-color: red;
}
.wrapper-valid::after {
content: "Email düzgün";
margin-left: 5px;
color: green;
}
.wrapper-invalid::after {
content: "Email düzgün deyil";
margin-left: 5px;
color: red;
}
</style>
</head>
<body>
<form id="my-form">
<label for="email">Email:</label>
<div id="wrapper">
<input type="email" id="email" name="email">
</div>
</form>
</body>
</html>
const form = document.getElementById('my-form');
const inputWrapper = document.getElementById('wrapper');
const emailInput = document.getElementById('email');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
inputWrapper.classList.add('wrapper-valid');
inputWrapper.classList.remove('wrapper-invalid');
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
inputWrapper.classList.add('wrapper-invalid');
inputWrapper.classList.remove('wrapper-valid');
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
const emailInput = document.getElementById('email');
const inputWrapper = document.getElementById('wrapper');
emailInput.addEventListener('input', function () {
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(emailInput.value)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
}
});
9.6 Select Hadisəsi
Select hadisəsi, istifadəçi form elementində, məsələn, daxil etmə sahəsində və ya mətn sahəsində mətn seçəndə baş verir. Bu hadisə, məsələn, mətn seçildikdə, copy düyməsinin göstərilməsi kimi əməliyyatlar üçün faydalı ola bilər.
Select hadisəsinin işlənməsi nümunəsi:
<div style="min-height: 55px">
<form id="my-form">
<label for="text-input">Mətn daxil edin:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
</div>
<form id="my-form">
<label for="text-input">Mətn daxil edin:</label>
<input type="text" id="text" name="text">
<div id="select-message"></div>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Siz mətn seçdiniz!';
});
});
document.addEventListener('DOMContentLoaded', function () {
const textInput = document.getElementById('text');
const selectMessage = document.getElementById('select-message');
textInput.addEventListener('select', function () {
selectMessage.textContent = 'Siz mətn seçdiniz!';
});
});
9.7 change hadisəsi
change hadisəsi formanın elementinin dəyəri dəyişdikdə və istifadəçi elementi tərk etdikdə (fokusu itirdikdə) baş verir. Bu hadisə tez-tez forma sahələrindəki dəyişiklikləri, məsələn drop-down siyahıları və ya checkbox-ları yoxlamaq üçün istifadə olunur.
change hadisəsinin idarə edilməsinə nümunə:
<form id="my-form">
<label for="color-select">Rəngi seçin:</label>
<select id="color-select" name="color">
<option value="red">Qırmızı</option>
<option value="green">Yaşıl</option>
<option value="blue">Göy</option>
</select>
</form>
document.addEventListener('DOMContentLoaded', function () {
const form = document.getElementById('my-form');
const selectElement = document.getElementById('color-select');
form.addEventListener("submit", (event) => {
event.preventDefault();
});
selectElement.addEventListener('change', function () {
alert('Siz rəng seçdiniz: ' + selectElement.value);
});
});
document.addEventListener('DOMContentLoaded', function () {
const selectElement = document.getElementById('color-select');
selectElement.addEventListener('change', function () {
alert('Siz rəng seçdiniz: ' + selectElement.value);
});
});
GO TO FULL VERSION