Lompat ke konten Lompat ke sidebar Lompat ke footer

Desain Form Keren dengan HTML dan CSS

Halo Selamat Datang Kembali teman teman, Pada kesempatan ini kita akan membahas mengenai , Bagaimana Cara Membuat Form Keren dengan HTML dan CSS. Pada pembahasan sebelumnya kita sudah mempelajari tentang CSS dan HTML, pada bagian HTML ada yang sudah membahas mengenai Form , nih silahkan cek jika teman teman lupa...
Membuat Form Keren
Membuat Form Keren
BELAJAR HTML | Membuat Form di HTML

Sekilas Tentang Form

Form merupakan salah satu elemen dalam HTML yang digunakan untuk menerima input dari pengunjung. Melalui form pengunjung sebuah halaman web dapat melakukan interaksi dengan web. 

Baik teman teman, jika teman teman sudah mengetahui dasar nya, mari langsung kita coba untuk membuat Form nya, sebelumnya siapkan Text Editor serta Kopi Hitam,,


<html>
    <head>
        <meta charset="UTF-8" />
        <title>Membuat Form Keren</title>
        <style>
            legend {
                color: white;
                padding: 5px;
                background: #006f6b;
                border-radius: 5px;
            }
            fieldset {
                max-width: 400px;
                border-radius: 10px;
                border-color: #4fffa5;
                background: #007b65;
            }
            label {
                float: left;
            }
            input {
                border: none;
                border-radius: 3px;
                height: 30px;
            }
            input:hover {
                background: #7affce;
            }
            button {
                cursor: pointer;
                color: white;
                background: #ff5f5f;
                width: 100px;
                height: 25px;
                border-radius: 4px;
                border: none;
            }
            button:hover {
                background: #ff2e2e;
            }
            label {
                color: white;
            }
        </style>
    </head>
    <body>
        <div align="center">
            <form>
                <fieldset>
                    <legend>Personal Information</legend>
                    <p>
                        <label for="full-name"> Full Name </label>
                        <input
                            required
                            placeholder="Input Name"
                            id="full-name"
                            name="fullName"
                            type="text"
                        />
                    </p>
                    <p>
                        <label for="email" style="margin-right: 25px;">
                            Email
                        </label>
                        <input
                            required
                            placeholder="Email"
                            id="email"
                            name="email"
                            type="email"
                        />
                    </p>
                    <p>
                        <label for="telpon" style="margin-right: 10px">
                            No Telp
                        </label>
                        <input
                            required
                            placeholder="Telp"
                            id="telpon"
                            name="telpon"
                            type="number"
                        />
                    </p>
                    <p>
                        <label for="berkas" style="margin-right: 34px">
                            Masukan CV
                        </label>
                        <input id="berkas" name="berkas" type="file" />
                    </p>
                    <p>
                        <button type="submit">Submit</button>
                    </p>
                </fieldset>
            </form>
        </div>
    </body>
</html>

Teman teman, jika kita mencoba untuk view hasil dari syntak HTML dan CSS kita diatas, maka hasilnya adalah seperti ini..

Form Keren HTML dan CSS
Form Keren HTML dan CSS
Jika teman teman penasaran dengan hasilnya, teman teman bisa melihat nya Disini.

Oiya teman teman, berikut ini sekilas penjelasan tentang Syntak HTML yang kita buat diatas,

  • Fieldset : kumpulan atau koleksi input field yang memiliki tujuan yang sama
  • legend : penjelasan tentang simbol atau elemen form, seperti label untuk fieldset
  • label : pada widget spesifik, label untuk input
  • input : kontrol interaktif (interactive controls) dengan berbagai tipe atribut seperti (text, file, number, date, dll)
  • button : tombol aksi (action button) yang bisa diklik, sebuah tombol yang dapat diklik untuk menjalankan tindakan tertentu.


Form Dengan Data List

Baik teman teman, untuk selanjutnya adalah kita akan membuat Form yang berisi Data List
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Membuat Form Keren</title>
        <style>
            legend {
                color: white;
                padding: 5px;
                background: #216A68;
                border-radius: 5px;
            }
            fieldset {
                max-width: 400px;
                border-radius: 10px;
                border-color: #4fffa5;
                background: #007b65;
            }
            label {
                float: left;
            }
            input {
                border: none;
                border-radius: 3px;
                height: 30px;
                margin-top: 20px;
            }
            button {
                cursor: pointer;
                color: white;
                background: #ff5f5f;
                width: 100px;
                height: 30px;
                border-radius: 4px;
                border: none;
            }
            button:hover {
                background: #ff2e2e;
            }
            label {
                color: white;
            }
        </style>
    </head>
    <body>
        <div align="center">
            <form>
                <fieldset align="left">
                    <legend>Data List</legend>
                    <p>
                        <label for="programing">
                            Bahasa Pemrograman Yang Di Kuasai?</label
                        >
                        <input
                            placeholder="Input Language"
                            type="text"
                            name="programing"
                            list="programingLangs"
                        />
                        <datalist id="programingLangs">
                            <select name="altprogramingLangs">
                                <option value="javascript"> JavaScript </option>
                                <option value="java"> Java </option>
                                <option value="ruby"> Ruby </option>
                                <option value="python"> Python </option>
                            </select>
                        </datalist>
                        <button type="submit">Submit</button>
                    </p>
                </fieldset>
            </form>
        </div>
    </body>
</html>

Hasil yang akan terlihat adalah seperti ini

Form Data List
Form Data List
Pada pembuatan Form Data List diatas kita menggunakan, tag datalist.

  • datalist : daftar dari data atau nilai yang telah diatur, yang digunakan untuk menulis data sebuah daftar pilihan input.

Baiklah teman teman, mungkin cukup sekian untuk sharing kita tentang desain form hehe, terimakasih sudah berkunjung.
Salam Semangat!!

6 komentar untuk "Desain Form Keren dengan HTML dan CSS"

  1. Wah sangat menarik dan mudah dipahami. Lanjutkan kakak 😬

    BalasHapus
  2. Saya Rama, artikelnya mudah dimengerti dan sangat membantu, Terima kasih

    BalasHapus
    Balasan
    1. saya wahyu, terimakasih sudah berkunjung, semoga bermanfaat ya.

      Hapus
  3. Kak boleh minta contoh buat form input + bisa di approve atau ga di approve dari data inputan tersebut

    BalasHapus
    Balasan
    1. beberapa mungkin bisa dibantu dengan artikel ini kak, Pencarian tag PHP

      Hapus