Membuat Formulir Kontak

Dalam tutorial ini, kita akan belajar cara membuat formulir kontak sederhana menggunakan HTML. Formulir ini akan memiliki input untuk nama, email, pesan, dan tombol "Kirim".

Langkah 1: Struktur Dasar HTML


<!DOCTYPE html>
<html>
<head>
    <title>Formulir Kontak</title>
</head>
<body>

<!-- Tempatkan formulir di sini -->

</body>
</html>

Langkah 2: Menambahkan Formulir

Tambahkan elemen <form> ke dalam <body> untuk memulai formulir.

<form action="#" method="POST">
    <!-- Isi formulir di sini -->
</form>

Langkah 3: Menambahkan Input

Tambahkan input untuk nama, email, dan pesan menggunakan elemen <input>.

<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="pesan">Pesan:</label>
<textarea id="pesan" name="pesan" required></textarea>

Langkah 4: Menambahkan Tombol Kirim

Tambahkan tombol "Kirim" untuk mengirim formulir.

<button type="submit">Kirim</button>

Langkah 5: Menutup Formulir

Tutup formulir dengan </form>.

</form>

Langkah 6: Keseluruhan Kode

Berikut adalah keseluruhan kode HTML untuk formulir kontak:

<!DOCTYPE html>
<html>
<head>
    <title>Formulir Kontak</title>
</head>
<body>

<form action="#" method="POST">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="pesan">Pesan:</label>
    <textarea id="pesan" name="pesan" required></textarea>

    <button type="submit">Kirim</button>
</form>

</body>
</html>

Sekarang Anda telah membuat formulir kontak sederhana menggunakan HTML. Anda dapat menyesuaikan tampilan dan menghubungkan formulir ini dengan server untuk mengelola data yang dikirimkan.

Anda dapat menyalin dan menempelkan kode HTML ini ke dalam file HTML Anda dan mengeditnya sesuai kebutuhan. Semoga tutorial ini membantu Anda membuat formulir kontak!
PREVIOUS
NEXT