Cara Membuat Form Input Atraktif Dengan CSS dan langkah

Halo teman – teman kembali lagi dengan saya Hernowo di tips dan trik Dumet School, pada kesempatan yang baik ini lagi – lagi saya akan memberikan tips dan trik nya untuk kalian semua yang saat ini sedang mendalami ilmu html dan css yaitu tentang Cara Membuat Form Input Atraktif Dengan CSS dimana sebuah form memiliki 2 placeholder yang hanya akan di buat dengan html dan css. Di bawah ini adalah screenshoot nya yang nanti kita akan buat latihan

Ketika di klik salah satu form maka placeholder pertama akan di minimize dan akan tampil placeholder ke dua

Semua akan di atur oleh css, sekarang kita akan implementasikan tentang Cara Membuat Form Input Atraktif Dengan CSS dan membuatnya persis seperti gambar di atas ini, langkah pertama teman – teman siapkan text editornya dan teman – teman download terlebih dahulu kumpulan css yang saya sediakan, Bisa klik di link ini, lalu siapkan folder untuk project nya untuk menaruh semua file termasuk kumpulan css yang teman – teman download. Kemudian copy script html nya di bawah ini

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Cara Membuat Form Input Atraktif Dengan CSS</title>
</head>
<body>
  <fieldset>
    <legend>Sign up</legend>
    <div class="input-group">
    <div class="has-float-label">
      <input id="first" type="text" placeholder="Name"/>
      <label for="first">First</label>
    </div>
    <div class="has-float-label">
      <input id="last" type="text" placeholder="Surname"/>
      <label for="last">Last</label>
    </div>
    </div>
    <label class="has-float-label">
      <input type="email" placeholder="email@example.com"/>
      <span>Email</span>
    </label>
    <label class="has-float-label">
      <input type="password" placeholder="•••••••"/>
      <span>Password</span>
    </label>

    <div class="input-group">
    <label class="has-float-label">
      <select>
        <option>United States</option>
        <option>Canada</option>
      </select>
      <span>Country</span>
    </label>
    <div class="has-float-label">
      <select id="state">
        <option>New York</option>
        <option>Texas</option>
      </select>
      <label for="state">State</label>
    </div>
    </div>
    <label class="has-float-label">
      <textarea placeholder="No newsletter please!"></textarea>
      <span>Notes</span>
    </label>
    <input type="submit" placeholder="•••••••" value="Sign up" />
  </fieldset>
</body>
</html>

Lalu save dengan nama index.html, berikutnya kita panggil css yang tadi teman – teman download

Jika sudah, save dan jalankan pada browsernya, maka hasilnya seperti gambar di bawah ini

Maka hasilnya belum menyerupai seperti contoh, langkah terakhir kita tambahkan css nya untuk membuat tampilannya sama seperti contoh. Dan kita berikan css secara internal saja, atau kita letakkan di dalam tag <head> yang di apit tag <style>

<style>
    * {
      box-sizing: border-box;
    }
    body {
      position: relative;
      max-width: 20rem;
      background: #eee;
      margin: 2rem auto;
    }
    fieldset {
      padding: 1.5rem;
      background: white;
    }
    input, select {
      width: 100%;
      margin-bottom: .5rem;
    }
    input[type=submit]{
      background: #333;
      color: white;
      border: 0;
      padding: .5em 1em;
      margin-top: 1rem;
    }
    .input-group {
      display: table;
      width: 100%;
    }
    .input-group > * {
      display: table-cell;
      width: 50%;
    }
  </style>

Jika sudah save dan refresh pada browsernya, maka hasilnya sudah seperti contoh di atas

Dan mempunyai dua placeholder, yang membuatnya lebih atraktif.

Baik, cukup sekian artikel kali ini tentang Cara Membuat Form Input Atraktif Dengan CSS kita berjumpa kembali pada artikel yang akan datang.

Semoga bermanfaat, terimakasih dan sampai jumpa.

Cara Membuat Form Input Atraktif Dengan CSS

Kategori