Fieldset Box v1

Fieldset Box v1 ini menggunakan title versi teks. Ianya juga boleh menggunakan style align kiri, kanan, dan tengah bagi title. Kalau diikutkan default align bagi title memang disebelah kiri. Jadi jika kita nak mengubah kedudukan title. Kita cuma perlu menambah code style pada code legend.

Fieldset Code

Jika u all nak menggunakan fieldset box. U all just copy and paste code dibawah ni sahaja. Yang di dalam kotak tu. Terdapat 3 pilihan, pilihlah mana yang u all berkenan.

Title Left

<fieldset>

<legend>Title</legend>

Your Content Here. You can put text or any code in here

</fieldset>

Title Right

<fieldset>

<legend style='text-align:right;'>Title</legend>

Your Content Here. You can put text or any code in here

</fieldset>

Title Center

<fieldset>

<legend style="text-align: center;">Title</legend>

Your Content Here. You can put text or any code in here

</fieldset>

Anda boleh meletakkan teks ataupun code widget di dalam fieldset. U all cuma perlu menggantikan "Your Content Here. You can put text or any code in here" dengan apa-apa teks mahupun code widget. Terpulang pada citarasa u all sendiri.

Tapi kalau u all nak menggunakan teks pada body fieldset dan u all nak teks tu kelihatan menarik. U all boleh sahaja menambah code style pada code fieldset.

<fieldset style='CSS-Code-Here'>

Title fieldset (legend) pun u all boleh cantikkan dengan menambah code style dengan menggunakan CSS Code dibawah.

<legend style='CSS-Code-Here'>

CSS Code

Antara CSS Code yang u all boleh tambah untuk mencantikkan fieldset box u all tu.

text-align:justify;
text-align:center;
font-weight:bold;
font-size:14px;
color:#000000;
border: 2px dashed #000000;
border: 2px dotted #000000;
border: 6px groove #000000;
border: 4px double #000000;
border: 2px solid #000000;
background:#000000;
background:url(image-url);

Keterangan CSS Code:

• text-align = Tujuan CSS Code ini adalah untuk mengemaskan lagi penampilan teks di dalam fieldset box.
• font-weight = Ketebalan font.
• font-size = Size tulisan.
• color = warna tulisan.
• border = Bentuk kotak fieldset.
• Background = Latar Belakang Fieldset box. Terdapat 2 jenis, 1 menggunakan warna sebagai latar dan 1 lagi menggunakan imej sebagai latar. Terpulang pada citarasa masing-masing.

Code warna di dalam CSS Code diatas. Semuanya adalah berwarna hitam. Kalau u all nak warna lain. Sila tukar #000000 dengan code warna yang u all mahukan.

u/p: untuk DEMO versi live. u all boleh lihat pada related post dibawah. Kotak komen juga menggunakan code fieldset, tapi u all kena tahu dimana nak meletakkan code fieldset jika hendak mengimplementasikannya pada kotak komen.