Belajar CSS Part 30 - Desain Form dengan CSS

CSS Form

Form atau bisa juga disebut sebagai daftar isian merupakan salah satu elemen yang digunakan untuk memasukan atau menginput data pada sebuah website.

Form sangat berguna dalam sebuah website, karena dengan adanya form sebuah halaman web menjadi web interaktif dan dinamis. Form juga merupakan satu-satunya sarana bagi pengembang website untuk mendapatkan informasi dari pengguna.

Tampilan form pada HTML dapat didesain dengan menggunakan CSS sehingga memperoleh tampilan yang menarik.

Contoh

input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

div {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

<!DOCTYPE html>
<html>
<body>

<h3>Menggunakan CSS untuk menerapkan styling pada Form di HTML</h3>
<div>
  <form>
    <label for="nama_depan">Nama Depan</label>
    <input type="text" id="nama_depan" name="nama_depan" placeholder="Nama depan...">
    <label for="nama_belakang">Nama Belakang</label>
    <input type="text" id="nama_belakang" name="nama_belakang" placeholder="Nama belakang...">

    <label for="negara">Negara</label>
    <select id="negara" name="negara">
      <option value="indonesia">Indonesia</option>
      <option value="brunei">Brunei Darussalam</option>
      <option value="malaysia">Malaysia</option>
    </select>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

Hasilnya:

Memberikan Efek pada Kolom Input

Gunakan properti width untuk menentukan lebar pada kolom input.

Contoh

input {
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input dengan lebar full:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
</form>

</body>
</html>

Hasilnya:

Contoh di atas berlaku untuk semua elemen <input>. Jika kita hanya ingin menerapkan efek pada jenis kolom input tertentu, kita dapat menggunakan atribut selector:

input[type=text] - hanya akan memilih kolom teks
input[type=password] - hanya akan memilih kolom kata sandi
input[type=number] - hanya akan memilih kolom dengan tipe nomor / angka

Menambahkan Ruang pada Kolom Input

Gunakan properti padding untuk menambahkan ruang di dalam kolom teks. Bila ingin menambahkan ruang di luar kolom teks, gunakan properti margin.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Menambahkan ruang pada kolom input:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang">
</form>

</body>
</html>

Hasilnya:

Menambahkan dan mengubah Tampilan Border pada Kolom Input

Gunakan properti border untuk mengubah ukuran perbatasan (border) dan warna, dan menggunakan properti border-radius untuk menambahkan lengkungan pada sudut kotak kolom input ataupun button (tombol).

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input yang memiliki border:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang">
</form>

</body>
</html>

Hasilnya:

Jika kita hanya ingin menambahkan border bawah, gunakan properti border-bottom.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input yang hanya memiliki border sisi bawah:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang">
</form>

</body>
</html>

Hasilnya:

Menambahkan Warna pada Kolom Input

Gunakan properti background-color untuk menambahkan warna latar belakang pada kolom input, dan properti color untuk mengubah warna teks.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Mewarnai kolom input:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan" value="Okta">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="nama_belakang" name="nama_belakang" value="Hasan">
</form>

</body>
</html>

Hasilnya:

Membuat Kolom Input agar Terfokus

Secara default, beberapa browser akan menambahkan garis biru di sekitar kolom input pada saat kita mengklik kolom input. Kita dapat menghapus garis biru tersebut dengan menambahkan outline: none;input.

Gunakan selector :focus agar kolom input ketika diklik akan terfokus.

Contoh

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}
input[type=text]:focus {
  background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<title>Form</title>
</head>
<body>

<p>Dalam contoh ini menggunakan selector :fokus untuk menambahkan warna latar belakang ke kolom input saat kolom diklik:</p>

<form>
  <label for="nama_depan">Nama Depan</label>
  <input type="text" id="nama_depan" name="nama_depan" value="Okta">
  <label for="nama_belakang">Last Name</label>
  <input type="text" id="nama_belakang" name="nama_belakang" value="Hasan">
</form>

</body>
</html>

Hasilnya:

Kolom Input Menggunakan Icon / Gambar

Jika kita ingin sebuah ikon berada dalam kolom input, gunakan properti background-image dan atur posisinya dengan menggunakan properti background-position.

Juga perhatikan bahwa kita menambahkan padding pada sisi kiri dengan ukuran lebih besar sehingga ruang ikon dalam kolom tidak ditempati oleh teks.

Contoh

input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("https://img.icons8.com/metro/26/000000/search.png");
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Kolom input memiliki icon gambar:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Hasilnya:

Animasi pada Kolom Input

Dalam contoh ini kita menggunakan properti CSS transition untuk mengaktifkan lebar kolom input pencarian ketika diklik.

Contoh

input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url("https://img.icons8.com/metro/26/000000/search.png");
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Animasi pada kolom pencarian:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

Hasilnya:

Menerapkan Efek pada Textarea

Secara default, teks area memiliki "grabber" pada pojok kanan bawah. Grabber ini adalah untuk mengubah ukuran teks area pada saat kita arahkan mouse, kemudian klik, tahan dan geser (scroll).

Gunakan properti resize untuk mencegah / menonaktifkan grabber di pojok kanan bawah teks area.

Contoh

textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p><strong>Tips:</strong> Gunakan properti resize untuk mencegah / menonaktifkan grabber di pojok kanan bawah teks area.: </p>

<form>
  <textarea>Some text...</textarea>
</form>

</body>
</html>

Hasilnya:

Menambahkan Efek pada Menu Pilihan

Contoh

select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;


<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Menerapkan styling pada menu pilihan.</p>

<form>
  <select id="negara" name="negara">
  <option value="id">Indonesia</option>
  <option value="bn">Brunei Darussalam</option>
  <option value="my">Malaysia</option>
  </select>
</form>

</body>
</html>

Hasilnya:

Menambahkan Efek pada Tombol Input (Button)

Contoh

input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
/* Tips: gunakan width: 100%; untuk menerapkan ukuran lebar tombol (button) menjadi full halaman */

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<p>Menambahkan Efek pada Tombol Input (Button):</p>

<input type="button" value="Button">
<input type="reset" value="Reset">
<input type="submit" value="Submit">

</body>
</html>

Hasilnya:

Form Responsif

Ubah ukuran jendela browser untuk melihat efeknya. Contoh berikut menggunakan query media untuk membuat formulir responsif.

Contoh

* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Menghapus float setelah kolom */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - Saat layar kurang dari 600px, maka kolom tidak saling bersebelahan */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}


<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h2>Responsive Form</h2>
<p>Ubah ukuran jendela browser untuk melihat efeknya. Ketika layar kurang dari 600px lebar, buat dua kolom bertumpuk di atas satu sama lain, bukan di sebelah satu sama lain.</p>

<div class="container">
  <form>
  <div class="row">
    <div class="col-25">
      <label for="nama_depan">Nama Depan</label>
    </div>
    <div class="col-75">
      <input type="text" id="nama_belakang" name="nama_depan" placeholder="Nama depan...">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="nama_belakang">Nama Belakang</label>
    </div>
    <div class="col-75">
      <input type="text" id="nama_belakang" name="nama_belakang" placeholder="Nama belakang..">
    </div>
  </div>

  <div class="row">
    <div class="col-25">
      <label for="negara">Negara</label>
    </div>

    <div class="col-75">
      <select id="negara" name="negara">
        <option value="indonesia">Indonesia</option>
        <option value="brunei">Brunei Darussalam</option>
        <option value="malaysia">Malaysia</option>
      </select>
    </div>
  </div>

  <div class="row">
    <div class="col-25">
      <label for="subject">Subject</label>
    </div>

    <div class="col-75">
      <textarea id="subject" name="subject" placeholder="Tulis sesuatu disini.." style="height:200px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>

Hasilnya