Cara menggunakan css form template

Pada tutorial kali ini saya akan menjelaskan secara detail bagaimana mendesain berbagai jenis form menggunakan teknik Grid dalam CSS. Dalam setiap contoh, saya akan tunjukkan terlebih dahulu bagaimana suatu form biasanya ditata menggunakan properti Float, setelah itu saya akan tunjukkan bagaimana caranya menghasilkan desain form yang sama menggunakan teknik Grid CSS.

Jika Anda belum paham tentang apa itu CSS Grid, anda bisa mempelajari modul berseri kami Memahami CSS Grid Layout. Mari kita mulai.

1. Form Sign Up Sederhana 

Dalam layout berikut kita akan membagi form ke dalam dua kolom sehingga nantinya kita biasa memposisikan label-label di sebelah kiri dan komponen-komponen input di sebelah kanan.

Menggunakan CSS "Tradisional"

Cara tradisional ini biasanya memanfaatkan properti Float untuk memisahkan komponen-komponen ke dalam kolom-kolom. Perhatikan bahwa di sini kita tidak menggunakan wraper/wadah penampung untuk komponen form sebelumnya, kita akan secara langsung menata label-label dan komponen-komponen input yang ada.

1

<form>

2

    <label for="firstName" class="first-name">First Name</label>

3

    <input id="firstName" type="text">

4

5

    <label for="lastName" class="last-name">Last Name</label>

6

<form>

<form>

<form>

<form>

<form>

<form>

1

<form>

2

<form>

3

2

4

5

2

6

2

<form>

2

<form>

    <label for="firstName" class="first-name">First Name</label>

<form>

2

    <label for="firstName" class="first-name">First Name</label>

    <label for="firstName" class="first-name">First Name</label>

    <label for="firstName" class="first-name">First Name</label>

    <label for="firstName" class="first-name">First Name</label>

2

    <label for="firstName" class="first-name">First Name</label>

    <label for="firstName" class="first-name">First Name</label>

3

2

3

3

3

3

3

3

    <label for="firstName" class="first-name">First Name</label>

3

2

Pada kode program di atas saya menggunakan perintah

<form>

Berikut adalah hasil desainnya, dengan sedikit tambahan desain untuk memperindah tampilan.

Menggunakan Layout Grid CSS

Tujuan kita memakai "Grid" di sini adalah agar kita bisa membuat dua kolom, lalu menempatkan masing-masing komponen ke dalam kolom yang sesuai.

Sebagai langkah pertama, kita akan mendefinisikan grid di dalam elemen

<form>

1

<form>

2

    <input id="firstName" type="text">

3

2

Lalu kita bagi grid tersebut menggunakan

<form>

1

<form>

2

    <input id="firstName" type="text">

3

4

4

2

Berdasarkan kode CSS di atas, kolom pertama akan memiliki lebar tetap

<form>

<form>

Berikutnya kita definisikan posisi komponen-komponen label dan input menggunakan properti

<form>

Untuk memahami lebih lanjut tentang garis-garis pada grid, silahkan pelajari tip singkat berikut:

• 

  

  

  Tip Kilat: Menamakan Garis Pada Grid CSS Bila Diperlukan

  Pada Grid CSS masing-masing garis memiliki nomor indeks yang dapat dijadikan acuan dalam kita menempatkan komponen ke dalam grid. Garis-garis tersebut dapat juga diberi nama, ini membuat...

  

  

  

  Ian Yates09 Des 2016

  CSS

Berdasarkan indeks garis grid di atas, kita akan menerapkan aturan berikut ini terhadap komponen-komponen label, input dan button

1

2

2

4

3

2

4

5

5

6

3

<form>

5

<form>

2

Komponen-komponen label akan menempati kolom antara garis 1 dan garis 2. Komponen-komponen input dan button akan menempati kolom di antara garis 2 dan garis 3.

Terakhir kita gunakan

<form>

1

<form>

2

    <input id="firstName" type="text">

3

4

4

    <label for="lastName" class="last-name">Last Name</label>

5

2

2. Form Kontak 

Dalam layout kali ini, yang akan kita lakukan adalah:

1. Tinggi kedua kolom harus sama, sehingga sidebar dan form  memiliki tinggi yang sama nantinya.
2. Selanjutnya kita akan membagi lagi form (kolom sebelah kanan) ke dalam dua kolom, dengan komponen button yang ada akan menempati kedua kolom sekaligus.

Layout seperti ini tentu saja bisa dibuat menggunakan properti floats. Tetapi kita perlu mengisi properti

<form>

Menggunakan CSS "Tradisional"

Secara ringkas, kita menggunakan floats sebagai berikut:

1. Atur

   <form>
   

   79 untuk kolom sebelah kiri.
2. Atur contact dan wrapper form sehingga displaynya Float. 
3. Tambahkan

   <form>
   

   81 untuk memastikan wrapper memiliki tinggi.
4. Atur elemen-elemen dalam form agar memiliki display float dan memiliki margin antar elemen.
5. Atur ulang floating untuk

   <form>
   

   82 dan tombol send, kemudian buat agar keduanya memiliki lebar penuh.

Cukup banyak yang harus dikerjakan bukan?

Cara yang lebih baik adalah dengan menggunakan entah teknik Flexbox atau Grid. Kusus untuk kasus ini, saya memilih menggunakan teknik Grid karena disini kita perlu mengatur susunan elemen-elemen baik secara horisontal maupun secara vertikal. 

Layout dengan Grid CSS

Kita mulai dengan mendeklarasikan grid di dalam wrapper dan membaginya dalam dua kolom.

1

6

2

    <input id="firstName" type="text">

3

6

4

2

Elemen form juga perlu dideklarasikan sebagai grid:

1

<form>

2

    <input id="firstName" type="text">

3

<form>

4

<form>

5

2

Setelah mengaplikasikan css di atas, hasilnya akan seperti berikut.

Kita perlu mengatur agar dua elemen terakhir memiliki lebar yang penuh dengan memposisikan keduanya mulai dari garis grid 1 sampai garis 3.

1

<form>

2

<form>

3

2

3. Form Profil

Akhirnya kita sampai di layout form yang terakhir. Di sini kita menyertakan satu inputan khusus agar pengguna bisa mengunggah foto profil mereka. Tempatnya harus di bagian kanan atas.

Dengan CSS "Tradisional"

Kita gunakan markup berikut:

1

<form>

2

<form>

3

<form>

4

<form>

5

<form>

6

<form>

<form>

<form>

<form>

<form>

<form>

<form>

    <label for="firstName" class="first-name">First Name</label>

<form>

    <label for="firstName" class="first-name">First Name</label>

<form>

    <label for="firstName" class="first-name">First Name</label>

<form>

    <label for="firstName" class="first-name">First Name</label>

<form>

3

<form>

3

<form>

3

<form>

3

<form>

Secara ringkas dengan cara tradisional, langkah-langkah berikut yang akan dikerjakan:

1. Tambahkan

   <form>
   

   83 untuk elemen-elemen form.
2. Posisikan file input absolut di sebelah kanan atas
3. Tambahkan padding untuk form dengan lebar sama dengan lebar file input.
4. Tentukan lebar tetap untuk file input.

Layout Dengan Grid CSS

Kita tidak perlu membahas cara tradisional lebih detail. Dengan Grid, kita akan membagi form dalam dua kolom seperti berikut:

Kolom pertama akan memiliki lebar dua kali kolom pertama, yang akan kita realisasikan dengan menggunakan

<form>

1

<form>

2

<form>

3

<form>

4

<form>

5

2

Grid sudah dibuat, selanjutnya kita tempatkan elemen-elemen dalam form di antara garis grid 1 dan 2: 

1

<form>

2

<form>

3

2

Langkah berikut adalah menempatkan file input di kolom kedua. Untuk melakukan itu, kita tempatkan file input tersebut di antara garis grid 2 dan 3. Secara vertikal juga, kita tempatkan di antara garid grid 1 dan 2.

1

<form>

2

<form>

3

<form>

4

2

Kesimpulan

Selesai! Kita sudah membahas beberapa contoh penggunaan Grid CSS untuk membuat form web. Seperti yang ada lihat, kita mempersingkat waktu dan usaha dengan menulis lebih sedikit kode ketimbang bila kita menggunakan cara tradisional. Anda bisa menggunakan semua contoh diatas, berkat CSS

<form>

• 

  

  

  Tip Kilat: Menambahkan File CSS @supports di Latihan CodePen anda. 

  Bila latihan-latihan CodePen anda menggunakan teknologi CSS terbaru sebaiknya anda mengingatkan pengguna. Berikan notifikasi ketika browser tidak mendukung latihan-latihan dari kami, menggunakan ...  

  

  

  

  Ian Yates10 Oktober 2016

  CodePen

Anda punya saran untuk meningkatkan layout-layout diatas? Perkenankan kami mengetahuinya lewat kolom komentar dibawah ini!