Belajar HTML#10 – Cara Membuat Form pada HTML

Form adalah sebuah elemen pada HTML yang berfungsi untuk meminta informasi data dari pengunjung. Setelah form sudah diisi oleh pengunjung atau user, maka data yang didapat itu akan diproses oleh server dengan program tertentu, misalnya PHP, ASP dll.

Cara Membuat Form pada HTML

Pada artikel ini, saya hanya membahas cara membuat form di HTML saja, tidak sampai memproses datanya. Untuk proses yang ada di pemrograman yang ada diserver, nanti akan saya bahas pada materi lainnya.

Cara Membuat Form di HTML

Form di HTML dapat kita buat dengan tag <form> dan field. Tag <form> digunakan untuk mendefinisikan awal dan akhir form pada HTML.

Tag Form beserta Atributnya.

Tag <form> harus memiliki atribut action dan atribut method.

Atribut action 

Merupakan atribut yang digunakan untuk menentukan aksi yang akan dilakukan saat data dikirim. Atribut ini kita dapat isi dengan alamat URL dari endpoint atau diisi dengan lokasi script yang digunakan untuk memproses data pada server. Contohnya, kita memberikan perintah pada file index.php untuk memproses data yang dikirimkan dari form.

Atribut method 

Merupakan atribut yang digunakan untuk menentukan metode pengiriman data pada form. atribut ini dapat diisi dengan alaman URL dari endpoint yang akan memproses form atau diisi dengan lokasi script yang digunakan untuk memproses data pada server. Contohnya, kita memberikan perintah pada file index.php untuk memproses data yang dikirimkan dari form. Adapun Metode yang biasa digunakan pada atribut method adalah:.

  • POST, datanya tidak terlihat.
  • GET, data yang terlihat di URL.

Contoh penggunaan Tag form serta atributnya  :

<form action="index.php" method="GET">
<!-- form field -->
</form>

Dari contoh diatas kita sudah membuat tag form, tapi baru sebatas pembungkus saja. Jika kode tersebut dieksekusi, maka tidak akan menampilkan apapun. Untuk itulah kita perlu membuat form field nya..

Form field beserta Atributnya

Form field adalah elemen-elemen yang ada di dalam form yang digunakan user untuk mengisi berbagai jenis data. contohnya adalah input berupa teks.

<input type="text" name="info" />

Field memiliki beberapa atribut yang harus diberikan:

  • type merupakan type dari field. Isi dari type harus sesuai dengan tipe yang ada pada program. Pada kode diatas, kita menambahkan kolom isiannya berupa ”teks”.
  • name merupakan nama dari field yang akan menjadi variabel di dalam program. Kita dapat mengisi atribut name sesuai keinginan. Pada contoh diatas, variable yang akan dikirimkan nantinya adalah “info”.

Membuat Form Login HTML

Setelah mengetahui tag-tag beserta atributnya, maka pada tahap ini kita akan langsung praktek. Untuk latihan pertama, kita akan membuat form login pada HTML. Untuk membuat form login dengan HTML, terdapat beberapa field dan elemen seperti :

  • Field untuk input username,
  • Field untuk input password;
  • Checkbok untuk remember me;
  • Tombol untuk login.

Berikut ini kodenya:

<!DOCTYPE html>
<html>
<head>
    <title>Form Login</title>
</head>
<body>
    <form action="login.php" method="POST">
        <fieldset>
        <legend>Login</legend>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Masukkan nama anda" />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Masukkan password anda" />
        </p>
        <p>
            <label><input type="checkbox" name="remember" value="remember" /> Remember me</label>
        </p>
        <p>
            <input type="submit" name="submit" value="Login" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil tampilan di browser :

Keterangan :

Pada kode di atas, kita membuat empat buah filed, yaitu :

  • input username dengan tipe text;
  • input password dengan tipe password;
  • input remember dengan tipe checkbox;
  • input submit dengan tipe submit;

tag <fieldset>,  membuat sebuah garis untuk membungkus filed

tag <legend>, untuk memberikan teks pada fieldset.

tag <label> dan <p> tag yang akan membungkus setiap field agar terlihat rapi.

placeholder, merupakan atribut untuk menampilkan teks sementara )

value,  Atribut untuk memberikan nilai default pada field.

Membuat Form Contact HTML

Form contact pada HTML berfungsi untuk menghubungi admin. Berikut cara membuat form contact

Silahakan ikuti kode berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Contact From</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Formulir Kontak</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Masukkan nama anda" />
        </p>
        <p>
            <label>Subject:</label>
            <input type="text" name="subject" placeholder="Opsional" />
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Masukkan alamat Email" />
        </p>
        <p>
            <input type="submit" name="submit" value="Send" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil tampilan di browser:

Keterangan :

type=”email” digunakan untuk field email, yang mewajibkan user/pengunjung untuk mengisinya dengan email saja. Jika diisi selain email dan tombol Send nya diklik, maka akan muncul warning.

Membuat Form Register HTML

Berikutnya kita akan mencoba membuat form register. Biasanya form ini berisi field untuk beberapa input, yaitu  :

  • Nama lengkap;
  • Username;
  • Jenis kelamin;
  • Agama;
  • Email;
  • Password;
  • Biografi.
  • Daftar.

Contoh :

<!DOCTYPE html>
<html>
<head>
    <title>Registrasi</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Formulir Registrasi</legend>
        <p>
            <label>Nama:</label>
            <input type="text" name="nama" placeholder="Nama lengkap..." />
        </p>
        <p>
            <label>Username:</label>
            <input type="text" name="username" placeholder="Username..." />
        </p>
        <p>
            <label>Jenis kelamin:</label>
            <label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-laki</label>
            <label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
        </p>
        <p>
            <label>Agama:</label>
            <select name="agama">
                <option value="islam">Islam</option>
                <option value="kristen">Kristen</option>
                <option value="hindu">Budha</option>
                <option value="budha">Hindu</option>
                <option value="konghucu">Konghucu</option>
            </select>
        </p>
        <p>
            <label>Email:</label>
            <input type="email" name="email" placeholder="Your email..." />
        </p>
        <p>
            <label>Password:</label>
            <input type="password" name="password" placeholder="Password..." />
        </p>
        <p>
            <label>Biografi:</label>
            <textarea name="biografi"></textarea>
        </p>
        <p>
            <input type="submit" name="submit" value="Daftar" />
        </p>
        </fieldset>
    </form>
</body>
</html>

Hasil tampilan di browser:

Cara Membuat Form pada HTML

Keterangan

Field radio;, Memberikan opsi kepada pengunjung untuk memilih salah satu dari value yang dibuat,

Field <select><option>; sama seperti radio, namun terdapat banyak opsi pilihan dari value yang dibuat,

Field <textearea>, untuk menginputkan teks yang panjang

Membuat Form Pendaftaran HTML

Pada dasarnya Form Pendaftaran ini sama dengan Form register. Namun berdasarkan contoh form yang sudah dibuat sebelumnya, kita hanya menggunakan beberapa field yang biasanya sering digunakan dalam pembuatan form pada HTML. Sebenarnya masih ada banyak jenis-jenis field lain seperti date,url, datetime, number dan sebagianya. Untuk itu, mari kita mencoba membuat form pendaftaran pada HTML menggunakan field-field lainnya :

<!DOCTYPE html>
<html>
<head>
    <title>Form HTML</title>
</head>
<body>
    <form action="contact.php" method="POST">
        <fieldset>
        <legend>Form Pendaftaran</legend>
        <p>
            <label>Alamat:</label>
            <input type="text" name="name" placeholder="Masukan alamat anda..." />
        </p>
        <p>
            <label>Tanggal Lahir:</label>
            <input type="date" name="tanggal" />
        </p>
        <p>
            <label>Umur  :</label>
            <input type="number" min="12" max="90" name="umur" placeholder="12" />
        </p><label>Jenis kelamin:</label>
            <input type="radio" name="jeniskelamin" value="pria"> Pria
            <input type="radio" name="jeniskelamin" value="wanita"> Wanita
        </p>
        <p>
            <label for="idagree">Apakah Data yang anda masukkan sudah benar ? </label> 
            <input type="checkbox" name="bersedia_ikut" value="ya" id="idagree">
        </p>
            <p><input type="reset" value="Reset"> <input type="button" name="submit" value="submit" /></p>
        </fieldset>
    </form>
</body>
</html>

Hasil tampilan di browser:

Cara Membuat Form pada HTML

Keterangan

Field date, Untuk menampilkan kalender dengan waktu realtime. Jika kalendernya tidak tampil. update browsernya ke versi terbaru

Cara Membuat Form pada HTML

Field number, untuk membuat kolom yang berisi angka. Selain angka tidak akan bisa dimasukkan ke kolom ini. Pada contoh diatas, kita menggunakan field ini untuk menanyakan umur serta batasan umur dengan nomor minimal 12 maksimalnya 90. (type=”number” min=”12″ max=”90)

Field checkbox, untuk membuat pertanyaan berupa ceklist, atribut value harus digunakan untuk mendefinisikan data yang akan dikirimkan. (value=”ya”).

Begitulah cara membuat Form pada HTML, baca juga artikel selanjutnya yaitu : Belajar HTML#11 – Cara Menampilkan Gambar di HTML

Tinggalkan Balasan

Scroll to Top