4.1 <fieldset> elementi
Forma elementlərinin qruplaşdırılması əlaqəli elementləri məntiqli şəkildə birləşdirməyə imkan verir, bu da formanı strukturlaşdırılmış edir və istifadəçilər üçün daha rahatdır. HTML forma elementlərinin qruplaşdırılması üçün iki element təqdim edir: <fieldset> və <legend>.
<fieldset> elementi forma daxilində əlaqəli elementləri qruplaşdırmaq üçün istifadə olunur. Vizual olaraq, bu element adətən qruplaşdırılmış elementlərin ətrafında çərçivə kimi görsənir, bu da istifadəçi üçün hansı sahələrin bir qrupa aid olduğunu anlamağa kömək edir.
İstifadə nümunəsi:
Bu nümunədə biz iki forma elementi qrupu görürük: "Personal Information" və "Account Details", hər biri <fieldset> elementi ilə çərçivələnmiş və <legend> başlığı ilə təmin olunmuşdur.
HTML
<form action="/submit" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Ad:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-poçt:</label>
<input type="email" id="email" name="email" required>
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username" required>
<label for="password">Şifrə:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit" id="submit">Göndər</button>
</form>
<script>
const inputs = document.getElementsByTagName("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
const values = [];
let allValid = true;
for (let input of inputs) {
if (!input.validity.valid) {
allValid = false;
break;
}
values.push(input.value);
}
if (allValid) {
alert(
"Şəxsi məlumatlar:\n" +
`Ad: ${values[0]}\n` +
`E-poçt: ${values[1]}\n\n` +
"Hesab detalları:\n" +
`İstifadəçi adı: ${values[2]}\n` +
`Şifrə: ${values[3]}`
);
} else {
alert("Zəhmət olmasa bütün sahələri doldurun");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Ad:</label>
<input type="text" id="name" name="name">
<label for="email">E-poçt:</label>
<input type="email" id="email" name="email">
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<label for="password">Şifrə:</label>
<input type="password" id="password" name="password">
</fieldset>
<input type="submit" value="Göndər">
</form>
<fieldset> elementinin əsas atributları:
disabled atributu: <fieldset> daxilindəki bütün elementləri istifadəçi üçün əlçatmaz edir (onlar dəyişdirilə bilməz və serverə göndərilməz).
HTML
<fieldset disabled>
<legend>Disabled Group</legend>
<label for="disabled-field">Bu sahə deaktivdir:</label>
<input type="text" id="disabled-field" name="disabled-field">
</fieldset>
4.2 <legend> elementi
<legend> elementi <fieldset> vasitəsilə yaradılan elementlər qrupuna başlıq əlavə etmək üçün istifadə olunur. Bu, istifadəçiyə forma sahələrinin məqsədini və kontekstini anlamağa kömək edir.
İstifadə nümunəsi:
HTML
<fieldset>
<legend>Əlaqə Məlumatları</legend>
<label for="phone">Telefon Nömrəsi:</label>
<input type="tel" id="phone" name="phone">
<label for="address">Ünvan:</label>
<input type="text" id="address" name="address">
</fieldset>
<legend> elementinin xüsusiyyətləri:
- Yer:
<legend>elementi hər zaman<fieldset>daxilində yerləşir, və onun mövqeyi adətən çərçivənin yuxarı hissəsində olur. - Mətn:
<legend>daxilindəki mətn forma sahələrinin qrupunu təsvir edir, bu da istifadəçilərin formaya tez uyğunlaşmasına kömək edir.
<fieldset> və <legend> istifadəsi üzrə faydalı məsləhətlər
- Loji qruplaşdırma: Forma elementlərini loji olaraq qruplaşdırmaq üçün
<fieldset>və<legend>istifadə edin — bu, formanın daha təşkilatlanmış və istifadəçi üçün anlaşılan olmasını təmin edəcək - Əlçatanlıq:
<fieldset>və<legend>elementləri formanın əlçatanlığını yaxşılaşdırır, yardımçı texnologiyalardan istifadə edən istifadəçilərə formanın strukturunu və məzmununu anlamlarına kömək edir - Stil və dizayn: Formanın görünüşünü yaxşılaşdırmaq üçün
<fieldset>və<legend>elementlərini CSS ilə tərtib edin
4.3 <fieldset> və <legend>-dən istifadə nümunələri
Sahələrin qruplaşdırılması ilə qeydiyyat forması:
HTML
<form form action="/submit" method="post">
<fieldset>
<legend>Şəxsi Məlumatlar</legend>
<label for="fname">Ad:</label>
<input type="text" id="fname" name="fname" required>
<label for="lname">Soyad:</label>
<input type="text" id="lname" name="lname" required>
</fieldset>
<fieldset>
<legend>Giriş Məlumatları</legend>
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username" required>
<label for="password">Şifrə:</label>
<input type="password" id="password" name="password" required>
</fieldset>
<button type="submit" id="submit">Göndər</button>
</form>
<script>
const inputs = document.getElementsByTagName("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
const values = [];
let allValid = true;
for (let input of inputs) {
if (!input.validity.valid) {
allValid = false;
break;
}
values.push(input.value);
}
if (allValid) {
alert(
"Şəxsi Məlumatlar:\n" +
`Ad: ${values[0]}\n` +
`Soyad: ${values[1]}\n\n` +
"Giriş məlumatları:\n" +
`İstifadəçi adı: ${values[2]}\n` +
`Şifrə: ${values[3]}`
);
} else {
alert("Xahiş olunur, bütün sahələri doldurun");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Şəxsi Məlumatlar</legend>
<label for="fname">Ad:</label>
<input type="text" id="fname" name="fname">
<label for="lname">Soyad:</label>
<input type="text" id="lname" name="lname">
</fieldset>
<fieldset>
<legend>Giriş Məlumatları</legend>
<label for="username">İstifadəçi adı:</label>
<input type="text" id="username" name="username">
<label for="password">Şifrə:</label>
<input type="password" id="password" name="password">
</fieldset>
<input type="submit" value="Qeydiyyatdan keç">
</form>
Müxtəlif məlumat növlərilə forma:
HTML
<form action="/auth" method="post">
<fieldset>
<legend>Əlaqə Məlumatları</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Telefon nömrəsi:</label>
<input type="tel" id="phone" name="phone" required>
</fieldset>
<fieldset>
<legend>Tərcihlər</legend>
<label for="newsletter">Xəbərlər bülleteninə abunə olun:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="updates">Yeniləmələri alın:</label>
<input type="checkbox" id="updates" name="updates">
</fieldset>
<button type="submit" id="submit">Göndər</button>
</form>
<script>
const form = document.querySelector("form");
const inputs = form.querySelectorAll("input");
const submit = document.getElementById("submit");
submit.addEventListener("click", (e) => {
e.preventDefault();
let email = "";
let phone = "";
let newsletter = 0;
let updates = 0;
let allValid = true;
inputs.forEach((input) => {
if (input.type === "email" && (!input.validity.valid)) {
allValid = false;
} else if (input.type === "tel" && (!input.validity.valid)) {
allValid = false;
}
if (input.type === "email") {
email = input.value;
} else if (input.type === "tel") {
phone = input.value;
} else if (input.type === "checkbox") {
if (input.id === "newsletter") {
newsletter = input.checked ? 1 : 0;
} else if (input.id === "updates") {
updates = input.checked ? 1 : 0;
}
}
});
if (allValid) {
alert(
"Əlaqə Məlumatları\n" +
`Email: ${email}\n` +
`Telefon nömrəsi: ${phone}\n\n` +
"Tərcihlər\n" +
`Xəbərlər bülleteninə abunə olun: ${newsletter}\n` +
`Yeniləmələri alın: ${updates}`
);
} else {
alert("Email və Telefon sahələri doldurulmalıdır");
}
});
</script>
HTML
<form>
<fieldset>
<legend>Əlaqə Məlumatları</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Telefon nömrəsi:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<fieldset>
<legend>Tərcihlər</legend>
<label for="newsletter">Xəbərlər bülleteninə abunə olun:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="updates">Yeniləmələri alın:</label>
<input type="checkbox" id="updates" name="updates">
</fieldset>
<input type="submit" value="Göndər">
</form>
CSS
fieldset {
border: 2px solid #ccc;
padding: 20px;
}
legend {
font-weight: bold;
padding: 0 10px;
}
GO TO FULL VERSION