Pendahuluan
Form input adalah elemen penting dalam pengembangan website. Dengan form input, pengguna dapat berinteraksi dengan situs web dan mengirimkan data. Dalam artikel ini, kita akan membahas cara membuat form input keren dengan menggunakan HTML dan CSS.
Persiapan
Sebelum kita mulai, pastikan Anda memiliki pengetahuan dasar tentang HTML dan CSS. HTML adalah bahasa markup yang digunakan untuk membuat struktur dan konten website, sementara CSS adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan layout website.
Anda juga perlu memiliki editor teks yang dapat digunakan untuk menulis kode. Beberapa editor teks populer yang dapat digunakan antara lain Sublime Text, Visual Studio Code, atau Notepad++.
Membuat Struktur Form
Form input terdiri dari beberapa elemen utama, seperti <form>, <label>, <input>, dan <button>. Mari kita bahas fungsi masing-masing elemen tersebut.
<form> – Elemen ini digunakan untuk mengelompokkan elemen-elemen form. Setiap form harus memiliki atribut action yang menentukan URL tujuan pengiriman data form, dan atribut method yang menentukan metode pengiriman data form. Metode yang umum digunakan adalah GET dan POST.
<label> – Elemen ini digunakan untuk memberikan label pada form input. Label ini membantu pengguna memahami jenis data yang diharapkan saat mengisi form.
<input> – Elemen ini digunakan untuk membuat kotak input. Terdapat beberapa jenis input yang dapat digunakan, seperti text, email, password, number, dan banyak lagi. Setiap input harus memiliki atribut type yang sesuai dengan jenis data yang diharapkan.
<button> – Elemen ini digunakan untuk membuat tombol submit. Ketika tombol ini ditekan, data yang diisi oleh pengguna akan dikirim ke server.
Berikut adalah contoh struktur dasar form:
<form action="/proses" method="POST"><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><label for="email">Email:</label><input type="email" id="email" name="email">
<button type="submit">Kirim</button></form>
Styling Form dengan CSS
Sekarang, kita akan mengubah tampilan form input dengan menggunakan CSS. CSS memungkinkan kita mengatur warna, ukuran, font, dan layout elemen-elemen form.
Anda dapat menambahkan CSS secara internal di dalam elemen <style>, atau menggunakan file eksternal dengan ekstensi .css. Dalam contoh ini, kita akan menggunakan CSS internal.
Langkah-langkah untuk mengatur tampilan form dengan CSS adalah sebagai berikut:
- Tentukan elemen form yang akan diubah tampilannya. Anda dapat menggunakan selektor elemen, ID, atau kelas CSS.
- Tentukan properti CSS yang ingin diubah. Contoh properti CSS yang sering digunakan antara lain
background-color,color,font-size,padding, danborder. - Tentukan nilai properti CSS yang diinginkan. Nilai ini dapat berupa warna dalam format HEX atau RGB, ukuran dalam piksel, atau jenis font.
Berikut adalah contoh CSS dasar untuk mempercantik form:
form {width: 300px;margin: 0 auto;padding: 20px;background-color: #f2f2f2;border-radius: 5px;}label {display: block;margin-bottom: 10px;font-weight: bold;}
input[type="text"],input[type="email"] {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 3px;}
button {padding: 10px 20px;background-color: #4CAF50;color: #fff;border: none;border-radius: 3px;}
Anda dapat menyesuaikan kode CSS di atas sesuai dengan kebutuhan Anda. Selain properti CSS tersebut, masih banyak properti lain yang dapat digunakan untuk mengubah tampilan form sesuai dengan preferensi desain Anda.
Menerapkan Validasi Form
Validasi form adalah proses memastikan bahwa data yang dimasukkan oleh pengguna sesuai dengan format yang diharapkan. Validasi form sangat penting untuk memastikan data yang dikirimkan ke server akurat dan dapat diproses dengan benar.
Terdapat dua jenis validasi form yang umum digunakan, yaitu validasi di sisi klien (client-side validation) dan validasi di sisi server (server-side validation). Validasi di sisi klien dilakukan menggunakan JavaScript sehingga dapat memberikan umpan balik langsung kepada pengguna saat pengisian form.
Validasi di Sisi Klien
Validasi di sisi klien dapat dilakukan dengan menggunakan fitur bawaan HTML5 seperti atribut required, type, dan pattern. Anda juga dapat menggunakan JavaScript untuk validasi yang lebih kompleks.
Contoh validasi sederhana pada form email menggunakan atribut type="email":
<form><label for="email">Email:</label><input type="email" id="email" name="email" required><button type="submit">Kirim</button></form>
Pada contoh di atas, atribut required menandakan bahwa kolom email wajib diisi sebelum form dapat dikirim. Selain itu, jenis input email juga memeriksa apakah nilai yang dimasukkan oleh pengguna sesuai dengan format email yang benar.
Jika pengguna mencoba mengirimkan form dengan email yang tidak valid, browser akan menampilkan pesan kesalahan secara otomatis.
Validasi di Sisi Server
Validasi di sisi server tidak boleh diabaikan meskipun validasi di sisi klien telah dilakukan. Validasi di sisi server memastikan bahwa data yang dikirimkan benar-benar valid dan aman sebelum diproses lebih lanjut.
Untuk melakukan validasi di sisi server, Anda perlu menggunakan bahasa pemrograman server-side seperti PHP, Python, atau Ruby. Pada contoh ini, kita akan menggunakan PHP.
Contoh validasi sederhana pada form email menggunakan PHP:
<?php$email = $_POST['email'];if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {echo "Mohon masukkan email yang valid.";}?>
Pada contoh di atas, kita menggunakan fungsi filter_var dengan parameter FILTER_VALIDATE_EMAIL untuk memeriksa apakah email yang dikirimkan oleh pengguna sesuai dengan format email yang benar. Jika tidak valid, pesan kesalahan akan ditampilkan.
Anda dapat mengkombinasikan validasi di sisi klien dan di sisi server untuk memberikan pengalaman pengguna yang lebih baik dan menjaga keamanan data.
Penutup
Dalam artikel ini, kita telahmembahas secara detail tentang cara membuat form input keren menggunakan HTML dan CSS. Dengan mengikuti langkah-langkah yang telah dijelaskan, Anda dapat membuat form input yang menarik dan fungsional untuk situs web Anda.
Pentingnya Form Input dalam Pengembangan WebsiteForm input merupakan elemen yang penting dalam pengembangan website. Dengan adanya form input, pengguna dapat berinteraksi dengan situs web dan mengirimkan data seperti nama, email, password, dan lainnya. Form input digunakan dalam berbagai konteks, mulai dari formulir pendaftaran, komentar, pengisian data, hingga proses pembayaran.
Persiapan Sebelum Membuat Form InputSebelum memulai pembuatan form input, ada beberapa persiapan yang perlu dilakukan. Pertama, pastikan Anda memiliki pengetahuan dasar tentang HTML dan CSS. HTML digunakan untuk membuat struktur dan konten website, sedangkan CSS digunakan untuk mengatur tampilan dan layout website. Jika Anda belum familiar dengan HTML dan CSS, ada banyak sumber belajar online yang dapat membantu meningkatkan pemahaman Anda.
Selain itu, Anda juga perlu memiliki editor teks yang dapat digunakan untuk menulis kode. Beberapa editor teks yang populer dan sering digunakan oleh pengembang web antara lain Sublime Text, Visual Studio Code, Atom, atau Notepad++. Pilihlah editor teks yang sesuai dengan preferensi Anda dan pastikan Anda sudah menginstalnya sebelum memulai.
Membuat Struktur Dasar Form InputLangkah pertama dalam membuat form input adalah menciptakan struktur dasarnya. Struktur dasar form terdiri dari beberapa elemen utama, yaitu <form>, <label>, <input>, dan <button>.
Elemen <form> digunakan untuk mengelompokkan elemen-elemen form input. Setiap form harus memiliki atribut action yang menentukan URL tujuan pengiriman data form, dan atribut method yang menentukan metode pengiriman data form, seperti GET dan POST.
Setiap input dalam form harus memiliki label yang sesuai agar pengguna tahu jenis data yang diharapkan saat mengisi form. Elemen <label> digunakan untuk memberikan label pada form input. Label ini biasanya ditempatkan sebelum elemen input.
Elemen <input> adalah elemen yang digunakan untuk membuat kotak input. Terdapat berbagai jenis input yang dapat Anda gunakan, seperti input teks (text), input email (email), input password (password), input angka (number), dan lain-lain. Setiap input harus memiliki atribut type yang sesuai dengan jenis data yang diharapkan.
Terakhir, elemen <button> digunakan untuk membuat tombol submit. Tombol ini akan mengirimkan data yang diisi oleh pengguna ke server.
Setelah Anda mengetahui fungsi masing-masing elemen form input, Anda dapat mencoba membuat struktur dasar form dengan kode HTML seperti contoh di bawah ini:
<form action="/proses" method="POST"><label for="nama">Nama:</label><input type="text" id="nama" name="nama"><label for="email">Email:</label><input type="email" id="email" name="email">
<button type="submit">Kirim</button></form>
Styling Form Input dengan CSSSetelah Anda membuat struktur dasar form input, saatnya untuk mengubah tampilannya agar terlihat lebih menarik dan keren. CSS (Cascading Style Sheets) adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan layout elemen-elemen dalam HTML.
Untuk mempercantik form input, Anda dapat menggunakan beberapa properti CSS seperti warna (color), ukuran font (font-size), jarak antar elemen (margin, padding), dan lain-lain. Anda juga dapat menggunakan properti CSS lainnya seperti background-color, border, dan border-radius untuk memberikan efek visual yang lebih menarik.
Untuk mengatur tampilan form input dengan CSS, Anda perlu menentukan elemen form yang akan diubah tampilannya menggunakan selektor CSS. Anda dapat menggunakan selektor elemen, ID, atau kelas CSS untuk menargetkan elemen form yang ingin diubah tampilannya.
Berikut adalah contoh CSS dasar untuk mempercantik form input:
form {width: 300px;margin: 0 auto;padding: 20px;background-color: #f2f2f2;border-radius: 5px;}label {display: block;margin-bottom: 10px;font-weight: bold;}
input[type="text"],input[type="email"] {width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 3px;}
button {padding: 10px 20px;background-color: #4CAF50;color: #fff;border: none;border-radius: 3px;}
Pada contoh di atas, properti CSS seperti width, margin, padding, background-color, border, dan border-radius digunakan untuk mengatur tampilan form menjadi lebih menarik dan bersih. Anda dapat menyesuaikan kode CSS di atas sesuai dengan preferensi desain Anda.
Menerapkan Validasi Form InputValidasi form input adalah proses memastikan bahwa data yang dimasukkan oleh pengguna sesuai dengan format yang diharapkan. Validasi form sangat penting untuk menghindari kesalahan pengisian data yang dapat mengganggu proses pengolahan data lebih lanjut.
Ada dua jenis validasi form yang umum digunakan, yaitu validasi di sisi klien (client-side validation) dan validasi di sisi server (server-side validation). Validasi di sisi klien dilakukan menggunakan JavaScript sehingga dapat memberikan umpan balik langsung kepada pengguna saat pengisian form. Validasi di sisi server dilakukan menggunakan bahasa pemrograman server-side seperti PHP, Python, atau Ruby untuk memastikan data yang dikirimkan benar-benar valid dan aman sebelum diproses lebih lanjut.
Validasi di Sisi KlienValidasi di sisi klien dapat dilakukan dengan menggunakan fitur bawaan HTML5 seperti atribut required, type, dan pattern pada elemen input. Atribut required digunakan untuk menandakan bahwa kolom input harus diisi sebelum form dapat dikirim. Atribut type digunakan untuk membatasi jenis data yang dapat dimasukkan oleh pengguna, misalnya email, angka, atau tanggal. Atribut pattern digunakan untuk memeriksa apakah nilai yang dimasukkan sesuai dengan pola yang diinginkan.
Contoh validasi sederhana pada form email menggunakan atribut type=”email”:
<form><label for="email">Email:</label><input type="email" id="email" name="email" required><button type="submit">Kirim</button></form>
Pada contoh di atas, atribut required menandakan bahwa kolom email harus diisi sebelum form dapat dikirim. Selain itu, jenis input email juga memeriksa apakah nilai yang dimasukkan oleh pengguna sesuai dengan format email yang benar. Jika pengguna mencoba mengirimkan form dengan email yang tidak valid, browser akan menampilkan pesan kesalahan secara otomatis.
Validasi di Sisi ServerValidasi di sisi server dilakukan setelah data dikirimkan dari form input ke server. Validasi di sisi server sangat penting karena tidak dapat diakali oleh pengguna. Data yang dikirimkan dari form input harus diperiksa kembali kebenarannya sebelum diproses lebih lanjut.
Untuk melakukan validasi di sisi server, Anda perlu menggunakan bahasa pemrograman server-side seperti PHP, Python, atau Ruby. Pada contoh ini, kita akan menggunakan PHP sebagai contoh.
Contoh validasi sederhana pada form email menggunakan PHP:
<?php$email = $_POST['email'];if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {echo "Mohon masukkan email yang valid.";}?>
Pada contoh di atas, kita menggunakan fungsi filter_var dengan parameter FILTER_VALIDATE_EMAIL untuk memeriksa apakah email yang dikirimkan oleh pengguna sesuaidengan format email yang benar. Jika email tidak valid, maka pesan kesalahan akan ditampilkan kepada pengguna.
Dalam contoh ini, kita menggunakan variabel $_POST[’email’] untuk mengambil nilai email yang dikirimkan melalui metode POST. Kemudian, kita menggunakan fungsi filter_var dengan parameter FILTER_VALIDATE_EMAIL untuk memeriksa apakah nilai email tersebut sesuai dengan format email yang benar. Jika tidak sesuai, maka pesan kesalahan akan ditampilkan.
Anda dapat mengkombinasikan validasi di sisi klien dan di sisi server untuk memberikan pengalaman pengguna yang lebih baik dan menjaga keamanan data. Validasi di sisi klien memberikan umpan balik langsung kepada pengguna saat mereka mengisi form, sementara validasi di sisi server memastikan data yang dikirimkan benar-benar valid sebelum diproses lebih lanjut.
PenutupDalam artikel ini, kita telah membahas secara detail tentang cara membuat form input keren menggunakan HTML dan CSS. Form input merupakan elemen penting dalam pengembangan website yang memungkinkan pengguna berinteraksi dengan situs web dan mengirimkan data. Dengan mengikuti langkah-langkah yang telah dijelaskan, Anda dapat membuat form input yang menarik, fungsional, dan sesuai dengan desain situs web Anda.
Pentingnya persiapan sebelum memulai pembuatan form input adalah untuk memastikan bahwa Anda memiliki pengetahuan dasar tentang HTML dan CSS, serta memiliki editor teks yang dapat digunakan untuk menulis kode. Dalam proses pembuatan form input, kita perlu membuat struktur dasar form dengan menggunakan elemen seperti ,
Validasi form input juga merupakan langkah penting dalam pembuatan form input. Validasi di sisi klien dapat dilakukan dengan menggunakan atribut HTML5 seperti required, type, dan pattern pada elemen input. Validasi di sisi server dilakukan setelah data dikirimkan dari form input ke server dan memastikan bahwa data yang dikirimkan benar-benar valid dan aman.
Dengan menggabungkan pengetahuan tentang HTML, CSS, dan validasi form, Anda dapat menciptakan form input yang menarik, fungsional, dan aman untuk situs web Anda. Selamat mencoba!
