Mengatur Elemen Form Dengan CSS

View Categories

Mengatur Elemen Form Dengan CSS

Tampilan form di HTML dapat dibuat menjadi lebih bagus dengan menggunakan CSS:

Menata Bidang Input

Gunakan properti width untuk menentukan lebar kolom inputan:

Contoh

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

<h2>Kolom input dengan lebar penuh</h2>

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

</body></html>

Jalankan Contoh

Contoh di atas berlaku untuk semua elemen <input>. Jika hanya ingin memberi style pada jenis input tertentu, dapat menggunakan selector atribut :

  • input[type=text] – jenis inputan menggunakan type text 
  • input[type=password] – jenis inputan menggunakan type password
  • input[type=number] – jenis inputan menggunakan type number
  • dll..

Padded Inputs

Gunakan properti padding untuk menambah ruang di dalam inputan teks.

Tips: Saat memiliki banyak lebih banyak input, mungkin sebaiknya juga ditambahkan margin, untuk menambahkan lebih banyak ruang di antara input yang lainnya:

Contoh

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

<h2>Demo Pengaturan Input</h2>

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

</body></html>

Jalankan Contoh

Bordered Inputs

Gunakan properti border untuk mengubah ukuran dan warna border, dan gunakan properti border-radius untuk menambahkan sudut menjadi sedikit bulat:

Contoh

<!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>

<h2>Input Dengan Border</h2>

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

</body></html>

Jalankan Contoh

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

Contoh

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

<h2>Input Dengan Border Bawah </h2>

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

</body></html>

Jalankan Contoh

Inputan Berwarna

Gunakan properti background-color untuk menambahkan warna latar belakang ke dalam form input, dan properti color untuk mengubah warna tulisan:

Contoh

<!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>

<h2>Input Dengan Warna</h2>

<form>
  <label for="fname">Nama Depan</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Nama Belakang</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

</body></html>

Jalankan Contoh

Focused Inputs

Secara default, beberapa browser akan menambahkan garis tepi biru di sekitar input saat mendapat fokus (diklik), dengan menambahkan outline: none; ke dalam form input maka hal tersebut dapat dihilangkan.

Gunakan selector :focus untuk melakukan sesuatu dengan bidang input saat mendapatkan fokus:

Inputan Dengan Ikon/Gambar

Jika menginginkan ikon di dalam form input, gunakan properti background-image dan posisikan dengan properti background-position . Perhatikan juga bahwa pada contoh ini padding kiri ditambahkan untuk menghemat ruang ikon:

Contoh

<!DOCTYPE html>
<html>
<head>
<style> 
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('');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<h2>Input Dengan Ikon</h2>

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

</body></html>

Jalankan Contoh

Inputan Pencarian Menggunakan Animasi

Dalam contoh ini, digunakan properti CSS transition untuk menganimasikan lebar inputan pencarian saat mendapatkan fokus.

Contoh

<!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('https://www.w3schools.com/css/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>

<h2>Input Dengan Animasi</h2>

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

</body></html>

Jalankan Contoh

Styling Textarea

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

Contoh

<!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>

<h2>Menata Text Area</h2>

<p><strong>Tips:</strong> Gunakan properti resize untuk mencegah textarea diubah ukurannya (nonaktifkan "grabber" di pojok kanan bawah):</p>

<form>
  <textarea>Beberapa teks...</textarea>
</form>

</body></html>

Jalankan Contoh

Styling Select Menu

Contoh

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

<h2>Menata Select</h2>

<form>
  <select id="negara" name="negara">
  <option value="au">Australia</option>
  <option value="ca">Kanada</option>
  <option value="usa">AS</option>
  </select>
</form>

</body></html>

Jalankan Contoh

Styling Input Button

Contoh

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
</head>
<body>

<h2>Menata Tombol</h2>

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

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Selector Atribut CSS
Tutorial setelahnya : Mengatur Tata Letak Website Dengan CSS
Semua Tutorial CSS : Tutorial CSS 

Tinggalkan Balasan