Belajar Web Design : Membuat Form

Elemen HTML mendefinisikan formulir yang digunakan untuk mengumpulkan input data pengguna. Mungkin biasanya kita melakukan registrasi ke dalam suatu sistem dari sebuah website. Hal ini dengan tujuan bahwa, supaya kita bisa akses berbagai fitur web tersebut jika kita sudah terdaftar.

Form HTML berisi beberapa elemen formulir. Elemen formulir adalah berbagai jenis elemen input, seperti bidang teks, kotak centang, tombol radio, tombol kirim, dan banyak lagi.

Input Element

Untuk form ini, menggunakan tag <form> </form>. Dan dalam ke dua tag tersebut ditambahkan lagi dengan tag elemen <input>.

Elemen <input> adalah bentuk elemen yang paling penting.

Elemen <input> dapat ditampilkan dalam beberapa cara, tergantung pada atribut type.

Berikut ini beberapa contohnya:

  • <input type = “text”>, yaitu menentukan bidang input jenis teks satu baris.
  • <input type = “checkbox”>, yaitu menentukan bidang input jenis ceklist (untuk memilih lebih dari satu pilihan).
  • <input type = “password”>, yaitu menentukan bidang input jenis teks password yang tersembunyi saat diisi nilai.
  • <input type = “radio”>, yaitu menentukan tombol radio (untuk memilih satu dari banyak pilihan).
  • <input type = “submit”>, menentukan tombol kirim (untuk mengirimkan formulir atau menyimpan data).

Dan masih banyak lagi beberapa contoh atribut lainnya. Jadi, pada contoh di atas kita bisa lihat semua elemen hampir sama. Hanya saja yang membedakan tipenya.

Oke, langsung aja kita mulai script kodenya.

<!DOCTYPE html>
<html>
<head>
    <title>Membuat Form</title>
</head>
<body>
   
    <form action="nama_file.php" method="post">
        <h2>Registrasi</h2>

        Nama : <br>
        <input type="text" name="nama"> <br><br>

        Jenis Kelamin: <br>
        <input type="radio" name="jekel" value="Laki-laki">Laki-laki
        <input type="radio" name="jekel" value="Perempuan">Perempuan <br><br>

        Provinsi: <br>
        <select name="provinsi">
            <option value="Jawa Barat">Jawa Barat</option>
            <option value="Jawa Tengah">Jawa Tengah</option>
            <option value="Jawa Timur">Jawa Timur</option>
        </select>

        <br><br>

        Alamat: <br>
        <textarea name="alamat" cols="30" rows="10"></textarea> <br><br>

        <input type="submit" value="SIMPAN">
    </form>

</body>
</html>

Maka, seperti inilah hasilnya di browser.

Deskripsi

<form action=”nama_file.php” method=”post”>, yaitu ada tambahan action, tujuannya adalah untuk menuju file tersebut.

Lalu ada method=”post”, yang artinya untuk mengirim data ke file yang akan dituju pada atribut action.

<select> dan <option>, untuk menampilkan berbagai pilihan.

<textarea>, untuk elemen input dengan takaran pengisian data yang lebih besar. Dilengkapi dengan atribut row dan cols untuk mengatur lebar dan tingginya.

Atribut value=””, untuk mengisi nilai pada elemen input yang bersipat optional, seperti radio, <select>, dan lain sebagainya.

Nah Demikianlah untuk pembuatan form kita kali ini, semoga bermanfaat ya.