Teg Fieldset dalam HTML

Teg set medan dalam HTML ialah sesuatu yang membantu kita mendapatkan elemen tertentu, beberapa elemen berkaitan bersama-sama di dalam satu tempat, biasanya Borang. tag kumpulan elemen berkaitan kami berdasarkan logik. Teg set medan, apabila digunakan, mencipta blok atau sempadan di sekeliling elemen berkaitan kami yang dinyatakan di atas. Teg ini membantu memecahkan bahagian borang kepada beberapa bahagian yang logik.

Dalam erti kata lain, tag membantu mentakrifkan reka letak, dengan itu menyusun dan membahagikan borang ke dalam medan logik tanpa menggunakan jadual atau cara lain seperti pembahagian. Teg set medan mempunyai teg yang digunakan untuk mentakrifkan teks, seperti kapsyen untuk bahagian yang dipecahkan.

Apakah Sintaks untuk menggunakan

Elemen?

Ia sebenarnya mudah digunakan untuk

tag atau elemen. Seperti semua teg HTML yang lain,

tag juga mempunyai tag pembuka dan tag tutup. Teg pembuka ditulis sebagai

dan teg penutup mempunyai garis miring hadapan biasa sebelum nama teg, seperti

. Semak sintaks untuk tag.

Sintaks:

<form>
<fieldset>
</fieldset>
</form>

Perhatikan petikan kod ringkas yang memberikan contoh dan di bawah:

<form>
<fieldset style="background:#e1eff2;">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
</form>

Output:

Seperti yang dibincangkan di atas, elemen yang digunakan dalam kod di atas menyediakan kumpulan dalam bentuk HTML. Perhatikan kapsyen di bahagian atas set medan, dibuat menggunakan

elemen.

Satu lagi penggunaan

dan elemen adalah bersama-sama dengan jenis input 'kotak semak' atau 'radio', terutamanya apabila menjadi sukar untuk menyediakan konteks kolektif untuk pilihan yang berbeza dan dikaitkan dengan setiap satu daripadanya.

Atribut Teg Fieldset dalam HTML

elemen menyokong banyak atribut global yang menyokong atribut tambahan yang dinyatakan di bawah.

1. kurang upaya

Atribut 'disabled' menggunakan 'disabled' sebagai nilainya. Apabila atribut ini digunakan, ini menunjukkan bahawa kumpulan elemen yang digunakan atribut ini akan dilumpuhkan.

Di bawah ialah petikan contoh kod menggunakan elemen set medan dengan salah satu atributnya, 'dilumpuhkan'.

Kod:

<fieldset style="background:#e1eff2;" disabled="disabled">
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>

Output:

Perhatikan bahawa memandangkan kami menetapkan nilai atribut untuk 'dilumpuhkan' sebagai 'dilumpuhkan', semua elemen kanak-kanak dinyahdayakan iaitu, tidak boleh diedit.

2. borang

Atribut ‘form’ digunakan untuk memasukkan satu atau lebih pengecam bentuk yang berbeza. Ia mentakrifkan pengecam ini yang akan menjadi milik atau milik kumpulan elemen berkaitan kami. Atribut 'form' menggunakan ID borang untuk mentakrifkan borang. Jika terdapat lebih daripada satu pengecam borang, kesemuanya disertakan dan dipisahkan dengan ruang.

Dalam erti kata lain, ini ialah atribut yang mengambil nilainya daripada atribut 'id' bagi elemen bentuk/bentuk untuk menjadikan set medan bahagiannya, walaupun apabila set medan ditakrifkan di luar borang.

Atribut borang hanya disokong dalam Opera 12 dan versi terdahulu.

3. nama

Atribut 'nama' mentakrifkan nama untuk item yang dikumpulkan atau menyertai kumpulan elemen. Atribut ini menggunakan 'teks' sebagai nilainya. 'Nama' ini tidak dipaparkan dalam penyemak imbas; penggunaannya terhad kepada kerja skrip.

Di bawah ialah contoh set medan dengan atribut 'nama'.

Kod:

<form>
<fieldset style="background:#e1eff2;" name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

Perhatikan, semasa kami memberikan set medan kami atribut, 'nama' dan nilai sebagai 'Maklumat Peribadi; Ia tidak dipaparkan dalam penyemak imbas. Tetapi kami menggunakan atribut nama bagi elemen di latar belakang untuk kerja skrip.

Apabila kami mengklik butang yang menyatakan "Tukar warna latar belakang set medan", borang tersebut bertindak balas seperti berikut:

Teg Set Medan HTML dalam Penggayaan CSS

Seperti mana-mana elemen HTML lain,

elemen juga boleh diubah untuk kesan visual. Teg atau elemen HTML boleh mengandungi satu atau lebih sifat. Atribut atau sifat tambahan ini memberikan penyemak imbas lebih banyak data atau maklumat tentang kesan elemen. Atribut biasanya terdiri daripada nama harta dan nilai yang ditetapkan, contohnya;

<strong>style="color:black";</strong>

Sifat yang boleh digunakan untuk mengubah rupa dan rasa termasuk gaya fon, keluarga fon, saiz, berat, antara lain.

Below is another example using the above-mentioned properties. CSS can do wonders. Observe the before and after-effects.

Without CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

With CSS

Code:

<form>
<fieldset style="background:#e1eff2"; name="PersonalInformation" >
<legend>Personal Information:</legend>
<div><label>Name:</label><input type="text"></div>
<div><label>Email:</label><input type="text"></div>
<div><label>DOB:</label><input type="text"></div>
<div><label>Place:</label><input type="text"></div>
</fieldset>
<br />
<button type = "button" onclick="form.PersonalInformation.style.backgroundColor='LIGHTSALMON'"> Change background color of fieldset</button>
</form>

Output:

Conclusion

The and

tags are the most underused tags while creating web forms. The

tag allows every radio or checkbox or text box grouped together to be labeled as a whole while also being separately labeled. The

and

elements are helpful when assisting technology like JAWS is being used. It’s known that many screen readers read legend text first and then the label texts.

Atas ialah kandungan terperinci Teg Fieldset dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!