FORM DI HTML5

Oleh : Delifiya Zahira, Dwina Yolla 

A. FORM DI HTML5

Form dapat digunakan untuk meminta input pengunjung tentang apapun :

  • Formulir atau form dalam dunia digital memiliki berbagai fungsi penting untuk mengumpulkan informasi dari pengunjung website atau aplikasi. Salah satu penggunaan form yang umum adalah untuk angket atau kuesioner, di mana pengunjung diminta memberikan jawaban atas serangkaian pertanyaan terstruktur. Angket ini bisa mencakup berbagai topik dan biasanya menggunakan kombinasi pertanyaan pilihan ganda, isian singkat, atau jawaban panjang untuk mengumpulkan data yang komprehensif.

  • Polling merupakan bentuk form yang lebih sederhana namun tidak kalah pentingnya. Berbeda dengan angket yang biasanya memiliki banyak pertanyaan, polling umumnya hanya berisi satu atau dua pertanyaan singkat untuk mengetahui pendapat umum tentang suatu topik tertentu. Hasil polling biasanya ditampilkan dalam bentuk statistik atau persentase yang mudah dipahami.

  • Guestbook atau buku tamu digital adalah jenis form yang memungkinkan pengunjung meninggalkan jejak kunjungan mereka di sebuah website. Melalui guestbook, pengunjung dapat menuliskan nama, informasi kontak, serta pesan atau kesan mereka tentang website tersebut. Form ini sangat berguna untuk membangun interaksi dengan pengunjung dan mendapatkan feedback yang berharga.
  • Form pembelian barang merupakan komponen vital dalam e-commerce atau toko online. Form ini memuat berbagai field yang diperlukan untuk transaksi, mulai dari data pribadi pembeli, detail pesanan, hingga informasi pengiriman dan pembayaran. Keakuratan dan kelengkapan data dalam form pembelian sangat penting untuk memastikan transaksi berjalan lancar dan barang sampai ke tujuan yang tepat.

Semua jenis form ini memiliki peran masing-masing dalam memfasilitasi interaksi antara website dan pengunjungnya. Desain form yang baik harus memperhatikan kemudahan penggunaan, kejelasan instruksi, dan efektivitas dalam mengumpulkan informasi yang dibutuhkan. Form yang well-designed akan meningkatkan user experience dan mendorong pengunjung untuk berpartisipasi aktif dalam mengisi informasi yang diminta.


B. HTML5 INPUT TYPES 

HTML5 memiliki beberapa jenis type input baru untuk suatu form selain text. Fitur baru ini memungkinkan kontrol input yang lebih baik dan penggunaan validasi, selain itu juga memudahkan programmer. Jenis input baru tersebut antara lain :

  • `<input type="button">`- Membuat tombol yang dapat diklik oleh pengguna untuk melakukan aksi tertentu.
  • `<input type="checkbox">` - Menciptakan kotak centang yang memungkinkan pengguna memilih beberapa opsi sekaligus.
  • `<input type="color">` - Menampilkan pemilih warna yang memungkinkan pengguna memilih warna spesifik.
  • `<input type="date">` - Menampilkan pemilih tanggal dengan format yang sesuai.
  • `<input type="datetime-local">` - Memungkinkan pemilihan tanggal dan waktu lokal secara bersamaan.
  • `<input type="email">` - Kolom khusus untuk memasukkan alamat email dengan validasi format email.
  • `<input type="file">` - Menciptakan tombol untuk mengunggah file dari perangkat pengguna.
  • `<input type="month">` - Memungkinkan pemilihan bulan dan tahun.
  • `<input type="number">` - Kolom khusus untuk memasukkan angka dengan tombol naik/turun.
  • `<input type="password">` - Kolom untuk memasukkan kata sandi dengan karakter tersembunyi.
  • `<input type="radio">` - Membuat tombol radio untuk memilih satu opsi dari beberapa pilihan.
  • `<input type="range">` - Menciptakan slider untuk memilih nilai dalam rentang tertentu.

  • `<input type="reset">` - Tombol untuk mengembalikan semua nilai form ke default.
  • `<input type="search">` - Kolom pencarian dengan fitur tambahan seperti tombol hapus.
  • `<input type="submit">` - Tombol untuk mengirim data form ke server.
  • `<input type="tel">` - Kolom untuk memasukkan nomor telepon.
  • `<input type="text">` - Kolom teks dasar untuk memasukkan teks bebas.
  • `<input type="time">` - Memungkinkan pemilihan waktu spesifik.
  • `<input type="url">` - Kolom untuk memasukkan alamat website dengan validasi format URL.
  • `<input type="week">` - Memungkinkan pemilihan minggu dalam setahun.

OUTPUT JENIS INPUT BARU 





CONTOH PENGGUNAAN FORM





PENGGUNAAN FORM NAMA, EMAIL, ALAMAT





PENGGUNAAN FORM GOLONGAN DARAH DAN HOBI





TUGAS

SOURCE CODE

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Input Biodata</title>
            <style>
                body {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    min-height: 100vh;
                    margin: 0;
                    padding: 20px;
                    background-color: #f0f0f0;
                }
                
                .container {
                    border: 5px solid green;
                    padding: 10px;
                    background-color: white;
                }
        
                .inner-container {
                    border: 5px solid green;
                    margin: 10px;
                }
        
                .title {
                    text-align: center;
                    margin: 20px 0;
                    font-size: 24px;
                    font-weight: bold;
                    border-bottom: 5px solid green;
                    padding-bottom: 20px;
                }
        
                .submit-btn {
                    background-color: #4CAF50;
                    color: white;
                    padding: 10px 20px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    margin-right: 10px;
                    font-weight: bold;
                }
        
                .reset-btn {
                    background-color: #f44336;
                    color: white;
                    padding: 10px 20px;
                    border: none;
                    border-radius: 5px;
                    cursor: pointer;
                    font-weight: bold;
                }
        
                .submit-btn:hover {
                    background-color: #45a049;
                }
        
                .reset-btn:hover {
                    background-color: #da190b;
                }
            </style>
        </head>
        
        <body>
            <div class="container">
                <div class="inner-container">
                    <div class="title">Input Biodata</div>
                    <form name="fm-input" style="padding: 20px;">
                        <table width="800">
                            <tr>
                                <td width="200"><label for="nama">Nama Lengkap</label></td>
                                <td width="20">:</td>
                                <td><input type="text" size="40" name="nama" id="nama" /></td>
                            </tr>
                            <tr>
                                <td><label for="tll">Tempat, Tanggal Lahir</label></td>
                                <td>:</td>
                                <td>
                                    <input type="text" size="30" name="tempat" placeholder="Tempat Lahir"/>
                                    <input type="date" name="tanggal_lahir" style="width: 200px;" />
                                </td>
                            </tr>
                            <tr>
                                <td><label for="alamat">Alamat</label></td>
                                <td>:</td>
                                <td><textarea name="alamat" id="alamat" cols="50" rows="3"></textarea></td>
                            </tr>
                            <tr>
                                <td><label for="telp">No. Telp/HP</label></td>
                                <td>:</td>
                                <td><input type="text" size="40" name="telp" id="telp" /></td>
                            </tr>
                            <tr>
                                <td><label for="jkl">Jenis Kelamin</label></td>
                                <td>:</td>
                                <td>
                                    <input type="radio" name="jkl" value="Laki-Laki" id="laki" />
                                    <label for="laki">Laki-Laki</label>
                                    <input type="radio" name="jkl" value="Perempuan" id="perempuan" />
                                    <label for="perempuan">Perempuan</label>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="agama">Agama</label></td>
                                <td>:</td>
                                <td>
                                    <select name="agama" id="agama" style="width: 200px;">
                                        <option value="">-- Pilih Agama --</option>
                                        <option value="islam">Islam</option>
                                        <option value="kristen">Kristen</option>
                                        <option value="katolik">Katolik</option>
                                        <option value="hindu">Hindu</option>
                                        <option value="buddha">Buddha</option>
                                        <option value="konghucu">Konghucu</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td><label for="hoby">Hoby</label></td>
                                <td>:</td>
                                <td>
                                    <input type="checkbox" name="hoby[]" id="bacabuku" value="Baca Buku" />
                                    <label for="bacabuku">Baca Buku</label>
                                    <input type="checkbox" name="hoby[]" id="olahraga" value="Olah Raga" />
                                    <label for="olahraga">Olah Raga</label>
                                    <input type="checkbox" name="hoby[]" id="maingame" value="Main Game" />
                                    <label for="maingame">Main Game</label>
                                    <input type="checkbox" name="hoby[]" id="koding" value="Koding" />
                                    <label for="koding">Koding</label>
                                </td>
                            </tr>
                            <tr>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td>
                                    <input type="submit" name="submit" value="Submit" class="submit-btn"/>
                                    <input type="reset" name="reset" value="Clear!" class="reset-btn"/>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </body>
        </html>

PROGRAM







PENJELASAN

Berikut adalah penjelasan komponen-komponen dalam program ini:

1. Struktur Umum HTML
  • <!DOCTYPE html>: Menyatakan bahwa ini adalah dokumen HTML5.
  • <html lang="id">: Elemen root yang menyatakan bahwa bahasa halaman adalah Bahasa Indonesia.
  • <head>: Bagian ini berisi metadata tentang dokumen, termasuk pengaturan karakter dan judul halaman.
  • <body>: Bagian ini berisi konten yang akan ditampilkan di halaman web.
2. Judul
  • <meta charset="UTF-8">: Mengatur encoding karakter ke UTF-8.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Memastikan halaman responsif pada perangkat mobile.
  • <title>Input Biodata</title>: Judul halaman yang ditampilkan di tab browser.
3. Gaya CSS
  • Gaya CSS ditulis di dalam tag <style> di dalam elemen <head>.
  • body: Menggunakan Flexbox untuk pusat konten dan memberikan latar belakang abu-abu muda.
  • container dan inner-container: Mengatur batas, padding, dan latar belakang putih untuk membedakan area input.
  • title: Mengatur teks judul agar terpusat dengan garis bawah berwarna hijau.
  • Tombol Submit dan Reset: Gaya untuk tombol dengan warna hijau dan merah, yang berubah saat hover.
4. Form Input Biodata
  • <form name="fm-input">: Formulir untuk mengumpulkan data biodata pengguna.
  • <table>: Menggunakan tabel untuk mengatur elemen input dengan rapi.
- Input Fields:
  • Nama Lengkap: Input teks untuk nama lengkap.
  • Tempat, Tanggal Lahir: Input teks untuk tempat lahir dan input tanggal untuk tanggal lahir.
  • Alamat: Area teks untuk mengisi alamat.
  • No. Telp/HP: Input teks untuk nomor telepon.
  • Jenis Kelamin: Radio buttons untuk memilih antara Laki-Laki dan Perempuan.
  • Agama: Dropdown untuk memilih agama.
  • Hobi: Checkbox untuk memilih hobi dari beberapa opsi.                                                               
- Tombol Submit dan Reset:
  • Submit: Mengirim data yang diisi dalam formulir.
  • Reset: Menghapus semua input di formulir.
5. Elemen Tambahan
  • <tr> dan <td>: Digunakan untuk membuat baris dan sel di dalam tabel, membuat form lebih terstruktur.
  • Label: Setiap input memiliki label yang menjelaskan fungsi dari input tersebut.
  • Placeholder dan ukuran: Beberapa input memiliki placeholder dan ukuran yang diatur untuk memudahkan pengguna.


THANK YOU <3


Komentar

Posting Komentar

Postingan populer dari blog ini

ANALISA KEUANGAN DAN PENGARUHNYA TERHADAP AKUNTANSI KEUANGAN DI INDONESIA

1. Analisa Keuangan dengan Keadaan Ekonomi Indonesia Saat Ini dan Pengaruhnya pada Mata Kuliah Akuntansi Keuangan Saat ini kondisi ekonomi indonesia masih mengalami naik turun karena dipengaruhi banyak faktor, seperti kenaikan harga barang, inflasi, nilai tukar rupiah, pajak dan perkembangan teknologi digital. Banyak perusahaan harus lebih pintar mengatur keuangan supaya bisnis tetap berjalan stabil. Harga kebutuhan pokok yang naik juga membuat masyarakat lebih berhati-hati dalam mengeluarkan uang. Dalam kondisi seperti ini, akuntansi keuangan menjadi sangat penting karena perusahaan membutuhkan laporan keuangan yang jelas untuk mengetahui untung, rugi, pengeluaran dan kondisi usaha meraka. Melalui mata kuliah akuntansi keuangan, mahasiswa belajar bagaimana cara mencatat transaksi, membuat jurnal, buku besar, laporan laba rugi, neraca dan analisis keuangan perusahaan. Pengaruh ekonomi saat ini terhadap akuntansu keuangan sangat besar, karena perusahaan harus membuat laporan keuangan ya...
Baca selengkapnya

Laporan Arus Kas, Kegiatan Investasi, dan Kegiatan Pembiayaan

NPM           : 202333500671 NAMA        : Delifiya Zahira Versi Video https://drive.google.com/file/d/1x60BUtxYxY1Kll8Zny9neicdWPWdrhv7/view?usp=sharing A. Laporan Arus Kas Pengertian Laporan Arus Kas (Cash Flow Statement) adalah laporan keuangan yang menyajikan informasi penerimaan dan pengeluaran kas suatu perusahaan selama satu periode akuntansi. Laporan ini merupakan salah satu dari empat laporan keuangan utama yang disusun berdasarkan PSAK 2. Tujuan dan Manfaat Laporan Arus Kas memiliki empat manfaat utama bagi pengguna laporan keuangan: Likuiditas Riil  : menunjukkan kas aktual yang tersedia, bukan sekadar laba di atas kertas Kualitas Laba  : mengungkap apakah laba berasal dari operasi nyata atau penyesuaian non-kas Prediksi Arus Kas  : membantu investor dan kreditur menilai kemampuan menghasilkan kas di masa depan Solvabilitas  : menunjukkan kemampuan perusahaan memenuhi kewajiban jangka panjan...
Baca selengkapnya