HTML Forms dan CSS: Membuat Form Input dan Styling Halaman Web

HTML Forms adalah cara utama mengumpulkan input dari pengguna — login, registrasi, pencarian, pemesanan. CSS kemudian mempercantik tampilan form dan seluruh halaman web.

HTML Forms

Dasar Form

1
<form action="LoginServlet" method="post">
2
  <!-- Form controls di sini -->
3
</form>

Atribut	Fungsi
`action`	URL tujuan pengiriman data
`method`	`get` atau `post`
`name`	Nama form (untuk akses via JS)
`onsubmit`	Event handler saat submit

Form Controls

Text Field

1
<label>Masukkan Username:</label>
2
<input type="text" name="username" placeholder="contoh: budi123"/>

Password Field

1
<label>Masukkan Password:</label>
2
<input type="password" name="password"/>

Email Field (HTML5)

1
<label>Email:</label>
2
<input type="email" name="email" placeholder="nama@domain.com"/>
3
<!-- Browser otomatis validasi format email -->

Radio Button

Pilih satu dari beberapa opsi — gunakan name yang sama agar hanya bisa pilih satu:

1
<p>Jenis Kelamin:</p>
2
<input type="radio" name="gender" value="L"/> Laki-laki<br/>
3
<input type="radio" name="gender" value="P"/> Perempuan<br/>
4
<input type="radio" name="gender" value="O"/> Lainnya

Checkbox

Bisa pilih lebih dari satu opsi:

1
<p>Bahasa yang dikuasai:</p>
2
<input type="checkbox" name="html" value="html"/> HTML<br/>
3
<input type="checkbox" name="css" value="css"/> CSS<br/>
4
<input type="checkbox" name="js" value="js"/> JavaScript<br/>
5
<input type="checkbox" name="python" value="python"/> Python

1
<label>Pilih Kota:</label>
2
<select name="kota">
3
  <option value="">-- Pilih Kota --</option>
4
  <option value="jkt">Jakarta</option>
5
  <option value="bdg">Bandung</option>
6
  <option value="sby">Surabaya</option>
7
  <option value="mdn">Medan</option>
8
</select>

Textarea

1
<label>Pesan:</label><br/>
2
<textarea name="pesan" rows="5" cols="40"
3
          placeholder="Tulis pesan di sini..."></textarea>

Submit dan Reset Button

1
<input type="submit" value="Kirim"/>
2
<input type="reset" value="Reset"/>
3
<button type="submit">Kirim Form</button>

Form Lengkap dengan Validasi JavaScript

Validasi di sisi client sebelum data dikirim ke server:

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <script>
5
    function validateForm() {
6
      var name = document.login.name.value;
7
      var pass = document.login.pass.value;
8

9
      if (name == null || name == "") {
10
        document.getElementById("err").innerHTML = "Username tidak boleh kosong";
11
        return false;
12
      } else if (pass == null || pass == "") {
13
        document.getElementById("err").innerHTML = "Password tidak boleh kosong";
14
        return false;
15
      }
16
      return true; // lanjutkan submit ke server
17
    }
18
  </script>
19
</head>
20
<body>
21
  <h2>Form Login</h2>
22
  <form name="login" method="post" action="LoginServlet"
23
        onsubmit="return validateForm()">
24

25
    <label>Username:</label>
26
    <input type="text" name="name" placeholder="Masukkan username"/><br/><br/>
27

28
    <label>Password:</label>
29
    <input type="password" name="pass" placeholder="Masukkan password"/><br/><br/>
30

31
    <input type="submit" value="Login"/>
32
    <p id="err" style="color:red"></p>
33
  </form>
34
</body>
35
</html>

CSS — Cascading Style Sheets

CSS digunakan untuk menerapkan gaya visual pada elemen HTML. Ada tiga cara menerapkan CSS:

1. Inline CSS — Style Langsung di Element

Cocok untuk gaya yang hanya berlaku pada satu elemen tertentu:

1
<body>
2
  <p style="color:red; font-size:16px;">Paragraf merah</p>
3
  <p style="color:blue; font-weight:bold;">Paragraf biru tebal</p>
4
  <p style="font-size:24px; text-align:center;">Paragraf besar center</p>
5
</body>

2. Internal CSS — `<style>` di `<head>`

Cocok untuk gaya yang berlaku di satu halaman:

1
<head>
2
  <style>
3
    p {
4
      color: red;
5
      font-size: 16px;
6
      line-height: 1.6;
7
    }
8
    h1 {
9
      color: blue;
10
      font-family: Arial, sans-serif;
11
    }
12
    body {
13
      background-color: #f5f5f5;
14
      margin: 20px;
15
    }
16
  </style>
17
</head>

3. External CSS — File Terpisah (Direkomendasikan)

Berlaku di semua halaman yang menggunakan file CSS ini — disebut code centralization:

1
p {
2
  color: blue;
3
  font-size: 16px;
4
}
5

6
h1 {
7
  color: red;
8
  margin-bottom: 20px;
9
}

1
<!-- Hubungkan dari HTML -->
2
<head>
3
  <link rel="stylesheet" href="style.css"/>
4
</head>

CSS Selectors

Element Selector

1
p { color: red; }
2
h1 { font-size: 2rem; }
3
a { text-decoration: none; }

Class Selector (`.`)

Class bisa digunakan oleh banyak elemen — prefix titik (.):

1
.highlight {
2
  background-color: yellow;
3
  font-weight: bold;
4
}
5

6
.btn {
7
  padding: 10px 20px;
8
  border-radius: 5px;
9
  cursor: pointer;
10
}
11

12
.btn-primary {
13
  background-color: #007bff;
14
  color: white;
15
}

1
<p class="highlight">Teks ini di-highlight</p>
2
<button class="btn btn-primary">Klik Saya</button>

ID Selector (`#`)

ID hanya boleh digunakan oleh satu elemen per halaman — prefix #:

1
#header {
2
  background-color: #333;
3
  color: white;
4
  padding: 20px;
5
}
6

7
#footer {
8
  text-align: center;
9
  font-size: 12px;
10
}

1
<div id="header">Header Website</div>
2
<div id="footer">Footer Website</div>

	Class	ID
Prefix	`.nama`	`#nama`
Penggunaan	Banyak elemen	Satu elemen unik
Contoh	`.btn`, `.card`	`#header`, `#nav`

CSS Properties Penting

Background

1
div {
2
  background-color: #f0f0f0;
3
  background-image: url('bg.jpg');
4
  background-repeat: no-repeat;
5
  background-position: center center;
6
  background-size: cover;
7
}
8

9
/* Shorthand */
10
div {
11
  background: #f0f0f0 url('bg.jpg') no-repeat center/cover;
12
}

Border

1
div {
2
  border: 2px solid #333;         /* semua sisi sama */
3
  border-top: 3px dashed red;     /* hanya atas */
4
  border-right: 1px dotted blue;  /* hanya kanan */
5
  border-radius: 8px;             /* sudut melengkung */
6
}

Box Model

1
div {
2
  width: 300px;
3
  height: 200px;
4
  padding: 20px;          /* jarak dalam */
5
  margin: 10px auto;      /* jarak luar, auto = center */
6
  border: 1px solid #ccc;
7
  box-sizing: border-box; /* width termasuk padding & border */
8
}

Typography

1
p {
2
  font-family: 'Arial', sans-serif;
3
  font-size: 16px;
4
  font-weight: bold;       /* normal, bold, 100-900 */
5
  font-style: italic;
6
  line-height: 1.6;
7
  letter-spacing: 1px;
8
  text-align: center;      /* left, right, center, justify */
9
  text-decoration: underline;
10
  color: #333;
11
}

Contoh Form Lengkap dengan CSS

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <style>
5
    body {
6
      font-family: Arial, sans-serif;
7
      background: #f5f5f5;
8
      display: flex;
9
      justify-content: center;
10
      padding: 40px;
11
    }
12
    .form-card {
13
      background: white;
14
      padding: 30px;
15
      border-radius: 10px;
16
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
17
      width: 400px;
18
    }
19
    h2 { color: #333; margin-bottom: 20px; }
20
    label { display: block; margin-bottom: 5px; color: #555; }
21
    input[type="text"], input[type="password"], input[type="email"] {
22
      width: 100%;
23
      padding: 10px;
24
      border: 1px solid #ddd;
25
      border-radius: 5px;
26
      margin-bottom: 15px;
27
      box-sizing: border-box;
28
    }
29
    input[type="text"]:focus, input[type="password"]:focus {
30
      border-color: #007bff;
31
      outline: none;
32
    }
33
    .btn-submit {
34
      width: 100%;
35
      padding: 12px;
36
      background: #007bff;
37
      color: white;
38
      border: none;
39
      border-radius: 5px;
40
      font-size: 16px;
41
      cursor: pointer;
42
    }
43
    .btn-submit:hover { background: #0056b3; }
44
    .error { color: red; font-size: 13px; }
45
  </style>
46
</head>
47
<body>
48
  <div class="form-card">
49
    <h2>Login</h2>
50
    <form>
51
      <label>Email</label>
52
      <input type="email" placeholder="nama@domain.com"/>
53
      <label>Password</label>
54
      <input type="password" placeholder="Masukkan password"/>
55
      <input type="submit" value="Masuk" class="btn-submit"/>
56
      <p class="error" id="err"></p>
57
    </form>
58
  </div>
59
</body>
60
</html>

Kesimpulan

HTML Forms + CSS adalah kombinasi dasar untuk membangun UI yang fungsional dan menarik:

Gunakan form controls yang tepat sesuai jenis input
Selalu validasi form di client-side sebelum kirim ke server
Gunakan external CSS untuk project nyata agar mudah dikelola
Pahami class vs ID — class untuk banyak elemen, ID untuk elemen unik

Di artikel berikutnya: JavaScript Dasar — variabel, fungsi, operator, dan control flow.

Referensi: UI Technologies (HTML, CSS & JavaScript) — Srinivas Garapati.

Thanks for reading!