Form di CSS: Sintak dan Cara Membuatnya

Tampilan Form di HTML dapat di percantik dengan CSS

Section Artikel

1 Styling Input Fields
2 Padded Inputs
3 Bordered Inputs
4 Colored Inputs
5 Focused Inputs
6 Masukan dengan ikon / gambar
7 Input Pencarian Animasi
8 Styling Textareas
9 Styling Select Menus
10 Styling Input Buttons
11 Responsive Form

Styling Input Fields

Gunakan properti width untuk menentukan lebar kotak masukan:

Contoh :

<!DOCTYPE html>
<html>
<head>
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<p>A full-width input field:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

Contoh di atas berlaku untuk semua elemen . Jika kita hanya ingin memberi gaya pada jenis masukan tertentu, kita bisa menggunakan atribut seperti di bawah ini:

input [type = text] – input masukkan untuk teks
input [type = password] – input masukkan untuk password
input [type = number] -input masukkan untuk angka
dll ..

Padded Inputs

Gunakan properti padding untuk menambahkan spasi di dalam kotak masukkan teks.

Tips: Jika kita ingin memiliki banyak inputan, kita juga bisa menambahkan margin untuk menambah lebih banyak ruang

Contoh :

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

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<p>Padded text fields:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Perhatikan bahwa kita telah menyetel properti box-sizing ke border-box. Properti ini untuk memastikan bahwa padding dan border disertakan dalam total lebar dan tinggi elemen.

Bordered Inputs

Gunakan properti border untuk mengubah ukuran dan warna border, kita bisa gunakan properti border-radius untuk menambahkan sudut membulat:

Contoh :

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  border-radius: 4px;
}
</style>
</head>
<body>

<p>Text fields with borders:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Jika kita hanya menginginkan batas bawah, gunakan properti border-bottom:

Contoh :

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}

Colored Inputs

Gunakan properti background-color untuk menambahkan warna latar belakang ke inputan dan properti color untuk mengubah warna teks:

Contoh :

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  background-color: #3CBC8D;
  color: white;
}
</style>
</head>
<body>

<p>Colored text fields:</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Focused Inputs

Secara default, beberapa browser akan menambahkan garis tepi biru di sekitar input ketika sudah difokuskan (diklik).Kita bisa menghapus perilaku ini dengan menambahkan outline: none; ke masukan.

Gunakan: selektor :focus untuk melakukan sesuatu ke daerah inputan saat mendapatkan fokus:

Contoh :

input[type=text]:focus {
  background-color: lightblue;
}

<!DOCTYPE html>
<html>
<head>
<style> 
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;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a background color to the text field when it gets focused (clicked on):</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

input[type=text]:focus {
  border: 3px solid #555;
}

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a black border color to the text field when it gets focused (clicked on):</p>
<p>Note that we have added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus).</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body>
</html>

Masukan dengan ikon / gambar

Jika kita menginginkan ikon di dalam inputan, gunakan properti background-image dan posisikan dengan properti background-position. Perhatikan juga bahwa kita akan menambahkan padding kiri yang besar untuk menambahkan ikon:

Contoh :

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

Input Pencarian Animasi

Dalam contoh ini kita akan menggunakan properti transition CSS untuk menganimasikan lebar input pencarian saat mendapatkan fokus.

Contoh :

input[type=text] {
  transition: width 0.4s ease-in-out;
}

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

<!DOCTYPE html>
<html>
<head>
<style> 
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('searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  width: 100%;
}
</style>
</head>
<body>

<p>Animated search input:</p>

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

</body>
</html>

Styling Textareas

Tip: Gunakan properti resize untuk mencegah textarea diubah ukurannya (nonaktifkan “grabber” di pojok kanan bawah):

Contoh :

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

<!DOCTYPE html>
<html>
<head>
<style> 
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;
}
</style>
</head>
<body>

<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):</p>

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

</body>
</html>

Styling Select Menus

Contoh :

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

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>A styled select menu.</p>

<form>
  <select id="country" name="country">
  <option value="au">Australia</option>
  <option value="ca">Canada</option>
  <option value="usa">USA</option>
  </select>
</form>

</body>
</html>

Styling Input Buttons

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;
}

/* Tip: use width: 100% for full-width buttons */

<!DOCTYPE html>
<html>
<head>
<style> 
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;
}
</style>
</head>
<body>

<p>Styled input buttons.</p>

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

</body>
</html>

Responsive Form

Ubah ukuran jendela browser untuk melihat efeknya. Saat layar kurang dari 600px lebarnya, buat dua kolom bertumpuk satu sama lain, bukan di samping satu sama lain.

Contoh berikut menggunakan kueri media untuk membuat responsive form.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>
* {
  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;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}
</style>
</head>
<body>

<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>

<div class="container">
  <form action="/action_page.php">
  <div class="row">
    <div class="col-25">
      <label for="fname">First Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="fname" name="firstname" placeholder="Your name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="lname">Last Name</label>
    </div>
    <div class="col-75">
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">
    </div>
  </div>
  <div class="row">
    <div class="col-25">
      <label for="country">Country</label>
    </div>
    <div class="col-75">
      <select id="country" name="country">
        <option value="australia">Australia</option>
        <option value="canada">Canada</option>
        <option value="usa">USA</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="Write something.." style="height:200px"></textarea>
    </div>
  </div>
  <div class="row">
    <input type="submit" value="Submit">
  </div>
  </form>
</div>

</body>
</html>

CSS

Form di CSS: Sintak dan Cara Membuatnya

Styling Input Fields

Padded Inputs

Bordered Inputs

Colored Inputs

Focused Inputs

Masukan dengan ikon / gambar

Input Pencarian Animasi

Styling Textareas

Styling Select Menus

Styling Input Buttons

Responsive Form

Table di CSS: Cara Membuat dan Contoh Tutorial Sintaknya

Image Gallery di CSS: Cara Membuat dan Memasukkan Image

You may also like