Borang | CokiaCSS

Butang <button>

Tag HTML

<button>

Deskripsi

Merupakan butang interaktif bagi tindakan pengguna, sebagai contoh membolehkan pengguna menghantar sesuatu borang, mengawal atau mengubah paparan alatan atau antaramuka dan sebagainya.

Jenis-jenis

Terdapat 5 jenis butang yang boleh di gunakan untuk pelbagai keperluan sama ada semata-mata untuk paparan/kosmetik semata ataupun lebih dari itu.

                                    <button>Lazim</button>

Butang lazim tanpa sebarang kelas di tetapkan.

                                    <button disabled>
                                        Nyahdaya
                                    </button>

Butang nyah daya dengan atribut disabled di tetapkan.

                                    <button class="perdana">
                                        Perdana
                                    </button>

Butang perdana dengan atribut kelas di tetapkan sebagai perdana.

                                    <button class="sekunder">
                                        Sekunder
                                    </button>

Butang sekunder dengan atribut kelas di tetapkan sebagai sekunder.

                                    <button class="alternatif">
                                        Alternatif
                                    </button>

Butang alternatif dengan atribut kelas di tetapkan sebagai alternatif.

Butang dengan ikon

Bidang input <input>

Tag HTML

<input>

Merupakan bidang input yang membolehkan pengguna memasukkan sesuatu nilai data.

Atribut

                                data-kod="semua"
                                data-kod="malaysia"

Di tetapkan pada kotak pilihan(<select>) untuk mendapatkan senarai data kod negara dan/atau kod kawasan nombor telefon. Di mana jika nilai ditetapkan sebagai semua, ia akan menghasilkan senarai kod negara. Manakala jika ditetapkan sebagai nama negara(cth: Malaysia), ia akan menghasilkan senarai kod kawasan bagi negara terbabit.

Kelas

```
class="bidang"
```
Di gunakan untuk mengumpulkan bidang input ke dalam satu kumpulan dengan menetapkan kelas bidang ini pada elemen parent.
```
class="katalaluan"
```
Di gunakan untuk menghasilkan ikon tunjuk kata laluan yang di masukkan pada bidang input kata laluan. Ia perlu di tetapkan pada elemen parent dan di gunakan bersama kelas bidang.
```
class="nombor"
```
Di gunakan untuk menghasilkan butang -(menurun) dan +(menaik) pada bidang input terbabit. Ia perlu di tetapkan pada elemen parent dan di gunakan bersama kelas bidang.
```
class="telefon"
```
Di gunakan untuk mengasingkan nombor telefon kepada kod negara, kod kawasan dan nombor telefon ke bidang input berlainan. Ia perlu di tetapkan pada elemen parent dan di gunakan bersama kelas bidang.
```
class="ikon"
```
Di gunakan untuk menghasilkan ikon pada bidang input terbabit. Ia perlu di tetapkan pada elemen parent dan di gunakan bersama kelas bidang.
```
class="terbalik"
```
Di gunakan untuk mengubah kedudukan elemen/kandungan secara terbalik iaitu meletakkan elemen/kandungan awal ke kedudukan pengakhiran dan sebaliknya.
```
class="kanan"
```
Di gunakan untuk meletakkan ikon pada kedudukan kanan/akhir bidang input. Ia mestilah di tetapkan pada bidang input(<input>).
```
class="pengguna"
```
Di gunakan untuk menghasilkan ikon bersesuaian. Ia mestilah di tetapkan pada bidang input(<input>).

Jenis nilai data

Atribut type boleh digunakan bagi menentukan jenis/format nilai data bagi sesuatu bidang input.

Teks(Lalai)

Ianya menerima sebarang nilai yang di masukkan oleh pengguna dan merupakan jenis lalai.

Kata Laluan

Di gunakan untuk menerima kata laluan daripada pengguna.

Alamat Email

Menerima nilai alamat email sahaja dengan menetapkan atribut type sebagai email.

Alamat Laman Sesawang

Menerima nilai alamat web sahaja dengan menetapkan atribut type sebagai url.

Nombor

Menerima nilai nombor sahaja dengan menetapkan atribut type sebagai nombor.
Tetapkan juga atribut min dan/atau max untuk menerima nombor di dalam julat tersebut.
Manakala atribut step boleh digunakan bagi menentukan jarak langkau nilai data terbabit.
Letakkan tag <input type="number"> di dalam elemen yang mempunyai kelas bidang dan nombor bagi mendapatkan butang tambah dan tolak secara automatik.

Nombor Telefon

Menerima nombor telefon sahaja dengan menetapkan atribut type sebagai tel. Manakala atribut pattern digunakan untuk menentukan corak nombor telefon yang dibenarkan(dalam bentuk format regular expressions).

Poskod

Menerima nombor poskod Malaysia sahaja dengan menetapkan atribut pattern kepada \d{5}.

Dengan Paparan Ikon

Ikon di bahagian kiri

Tetapkan atribut class="pengguna" pada tag input untuk menghasilkan ikon pengguna secara automatik. Tag input ini juga perlu berada di dalam elemen yang mempunyai kelas bidang ikon.

Ikon di bahagian kanan

Tetapkan atribut class="pengguna kanan" pada tag input untuk menghasilkan ikon pengguna pada bahagian kanan bidang input.

Ikon dengan bidang input yang mempunyai ikon tersendiri

Tetapan asas, di mana pertambahan ikon di bahagian kiri/permulaan.

Untuk tetapan ikon di bahagian kanan, ikon akan terletak sebelum ikon tersendiri bidang input terbabit.

Gunakan kelas terbalik pada elemen utama bagi mengubah kedudukan ikon berlawanan dari asal/biasa.

Ikon kolum

Semak nilai dan mesej ralat

Tetapkan atribut data-semakan untuk membuat semakan dan pengesahan nilai data yang diberikan. Manakala untuk atribut aria-errormessage pula ditetapkan sebagai mesej ralat, bagi memaparkan mesej ralat secara automatik.

Asas

Mesej ralat akan dipaparkan hanya apabila pengguna menetapkan nilainya dan tiada sebarang ralat/kesalahan pada data tersebut.

Tetapan wajib(required)

Tetapkan atribut required bagi memastikan tetapan ini diisi oleh pengguna.

Semakan format alamat email

Format alamat email akan diperiksa untuk menentukan ianya berada dalam format yang betul.

Begitupun, ia tidak memeriksa akan kewujudan alamat email tersebut.

Selain itu, ia juga tidak akan memeriksa sama ada nama domain yang diberi itu wujud atau tidak.

Semakan format alamat laman sesawang

Format alamat laman sesawang akan diperiksa untuk menentukan ianya berada dalam format yang betul.

Sepertimana pengesahan alamat email, ciri ini juga tidak akan memeriksa kewujudan domain yang diberikan.

Semakan Nilai Nombor

Tag <input type="number"> perlu mempunyai nama id yang unik bagi membolehkan butang tambah dan tolak tersebut berfungsi.

Semakan Nombor Telefon

Bidang teks berbilang baris <textarea>

Tag HTML

<textarea>

Deskripsi

Merupakan bidang teks berbilang baris.

Jenis nilai data

Butang pilihan radio <input type="radio">

Tag HTML

<input>

Deskripsi

Membolehkan pengguna memilih salah satu daripada butang pilihan yang ada.

Butang pilihan semak <input type="check">

Tag HTML

<input>

Deskripsi

Membolehkan pengguna memilih pilihan(satu atau pelbagai) yang ada.

Kotak pilihan <select>

Tag HTML

<input>

Deskripsi

Merupakan kotak yang mempunyai senarai pilihan.

Bidang muat naik fail <input type="file">

Tag HTML

<input type="file">

Deskripsi

Membolehkan pengguna memilih fail untuk di muat naik ke pelayan laman.