Rumahweb Journal
Belajar HTML Part 3: Cara Membuat Form HTML

Belajar HTML Part 3: Cara Membuat Form HTML

Melanjutkan panduan belajar HTML part 2 – Gambar dan Tabel, kali ini kami akan membahas cara membuat form HTML dengan mudah. Untuk memulai belajar membuat script formulir dengan html, kita kenali terlebih dahulu poin-poin yang biasanya ada di dalam formulir.

Atribut di dalam Form HTML

Form HTML dapat kita buat menggunakan tag <form> dan penutup </form>

Contoh Form:

<form action="prosess-form.php" method="GET">
<!-- letakkan field di sini -->

</form>

Didalam tag form tersebut terdapat beberapa atribut:

  • action untuk menentukan aksi yang akan dilakukan saat data form dikirim. Pada atribut action kita isi dengan url yang akan memproses data form. Pada contoh file yang akan memproses data form adalah prosess-form.php
  • method sebagai metode pengiriman data

Tetapi Form tersebut belum menampilkan data maupun formulir, karena belum ada field form nya.

Apa itu Field?

Field adalah bagian yang kita gunakan untuk mengisi data, sesuai tipe yang dibutuhkan. Yang sering kita temui adalah tag <input>.

Contoh Field:

<input type="text" name="nama-lengkap" />

Didalam Field tersebut terdapat tag yang didalamnya ada beberapa atribut yang harus diberikan;

  • type merupakan type dari field, seperti textarea, password, checkbox, sumbit dan lainnya
  • name nama dari atribut name wajib ada dan beda, sebagai variable untuk proses data

Hasilnya:

Belajar HTML Rumahweb - Membuat formulir HTML type text
Belajar HTML Rumahweb – Membuat form type text

Agar tampilan tidak hanya menampilkan form saja, kita perlu menambahkan tabel atau label diatas tag <input>

Contoh Field:

<label> Nama: </label>
<input type="text" name="nama-lengkap" /><br />

Hasilnya:

Belajar HTML Rumahweb - Membuat label form type text
Belajar HTML Rumahweb – Membuat label form type text

type dan name didalam atribut ini yang akan sering kita temui didalam membuat form HTML. Perlu diketahui atribut type ini banyak macamnya. Agar lebih jelas, mari lanjut pembahasannya.

Contoh Atribut

Atribut Type

Atribut type banyak sekali macamnya. Tetapi karena pembahasan kita adalah Form HTML, berikut beberapa atribut type yang sering digunakan.

  • text field untuk mengisi data berupa teks
  • email field untuk mengisi data khusus email
  • password field untuk mengisi data khusus password, nantinya hanya menampilkan karakter bintang-bintang agar karakter password tidak terbaca/terlihat nilai aslinya
  • checkbox field untuk pengguna memilih nilai lebih dari satu sesuai pilihan yang diberikan
  • radio field untuk memilih salah satu nilai yang diberikan
  • number field untuk mengisi data khusus angka
  • date field untuk mengisi data khusus tanggal
  • file field untuk upload file didalam form
  • submit field untuk tombol submit, agar form diproses oleh form action

Contoh:

<!DOCTYPE html>
<html>
    <head><title>Belajar HTML - Membuat Form</title></head>
<body> 

<form action="prosess-form.php" method="GET">
    <!-- letakkan field di sini -->
    <label> Nama: </label>
    <input type="text" name="nama-lengkap" /><br />

    <label> Email: </label>
    <input type="email" name="email" /><br />

    <label> Password: </label>
    <input type="password" name="password" /><br />

    <label> Checkbox: </label>
    <input type="checkbox" name="hobi" /> Membaca 
    <input type="checkbox" name="hobi" /> Menulis 
    <input type="checkbox" name="hobi" /> Olahraga <br />

    <label> Radio: </label>
    <input type="radio" name="jenis-kelamin" /> Pria
    <input type="radio" name="jenis-kelamin" />Wanita<br />

    <label> Number/angka: </label>
    <input type="number" name="number" /><br />

    <label> Tanggal: </label>
    <input type="date" name="tanggal" /><br />

    <label> File: </label>
    <input type="file" name="file" /><br />

    <label> Submit: </label>
    <input type="submit" name="submit" /><br />
</form>

</body>
</html>

Hasilnya:

Belajar HTML Rumahweb - Mengenal atribut type name value
Belajar HTML Rumahweb – Mengenal atribut type

Atribut Name

Atribut name digunakan sebagai pengenal atau variable untuk proses data dan harus berbeda dengan name lain. Name ini tidak akan ditampilkan dibrowser.

Atribut Value

Atribut Value digunakan untuk memberikan nilai default didalam form

Contoh:

<form action="prosess-form.php" method="GET">
    <!-- letakkan field di sini -->
    <label> Nama: </label>
    <input type="text" name="nama-lengkap" value="Sri" /><br />

</form>

Atribut Placeholder

Atribut placeholder digunakan untuk memberikan teks bantuan didalam field. Selain itu, Atribut ini akan muncul apabila form dalam keadaan kosong atau saat belum kita isi.

Contoh:

<form action="prosess-form.php" method="GET">
    <!-- letakkan field di sini -->
    <label> Nama Lengkap dan gelar: </label>
    <input type="text" name="nama-lengkap" placeholder="Ir. H. Soekarno" /><br />

    <input type="submit" name="submit" /><br />

</form>

Atribut Required

Atribut Required digunakan agar field wajib diisi. Apabila tidak diisi maka akan menghasilkan warning tertentu

Contoh:

<form action="prosess-form.php" method="GET">
    <!-- letakkan field di sini -->
    <label> Alamat email: </label>
    <input type="email" name="nama-lengkap"  required/><br />

    <input type="submit" name="submit" /><br />

</form>
Baca juga artikel : Kode Warna HTML dan CSS yang Perlu Anda Ketahui

Elemen lain di form HTML

<select>

Elemen yang digunakan untuk membuat list drop-down

</textarea>

Elemen yang digunakan teks untuk multi baris, biasanya digunakan untuk mengisi form komentar

Contoh:

<form action="prosess-form.php" method="GET">
    <!-- letakkan field di sini -->
    <label> Isi Komentar: </label>
    <textarea name="komentar" rows="4" cols="50" ></textarea>    <br /><br />

    <label> Asal Kota: </label>
    <select name="kota">
        <option value="sleman"> Sleman</option>
        <option value="bantul"> Bantul</option>
        <option value="gunungkidul"> Gunung Kidul</option>
        <option value="kulonprogo"> Kulon Progo</option>
        <option value="yogyakota"> Yogyakarta Kota</option>
    </select>


</form>

Hasilnya:

Belajar HTML Rumahweb - Mengenal select dan textarea
Belajar HTML Rumahweb – Mengenal select dan textarea

Contoh membuat formulir pendaftaran HTML

Dalam latihan kali ini kita akan menggabungkan beberapa type dan elemen. Sekaligus menggunakan tabel agar nama dan form terlihat rapi.

Contoh:

<!DOCTYPE html>
<html>
    <head><title>Belajar HTML - Membuat Form</title></head>
<body> 

<form action="prosessForm.php" method="GET">
<!-- letakkan field di sini -->
<fieldset>
<legend><h1>Formulir Pendaftaran Siswa</h1></legend>
<table>
    <tr>
        <td>Nama Calon Siswa</td>
        <td>:</td>
        <td><input type="name" name="nama"  required/><br /></td>
    </tr>       

    <tr>
        <td>Tempat/Tanggal Lahir</td>
        <td>:</td>
        <td><input type="name" name="tempatLahir"/> <input type="date" name="tanggal" /></td>
    </tr>

    <tr>
        <td>Agama</td>
        <td>:</td>
        <td><select name="agama">
            <option value="islam"> Islam</option>
            <option value="kristen"> Kristen</option>
            <option value="katolik"> Katolik</option>
            <option value="budha"> Budha</option>
            <option value="hindu"> Hindu</option>
        </select></td>
    </tr>

    <tr>
        <td>Alamat</td>
        <td>:</td>
        <td><textarea name="komentar" rows="4" cols="50" ></textarea> </td>
    </tr>

    <tr>
        <td>No Telp/Hp</td>
        <td>:</td>
        <td><input type="number" name="number" /></td>
    </tr>

    <tr>
        <td>Jenis Kelamin</td>
        <td>:</td>
        <td><input type="radio" name="jenisKelamin" /> Pria
            <input type="radio" name="jenisKelamin" /> Wanita</td>
    </tr>

    <tr>
        <td>Hobi</td>
        <td>:</td>
        <td><input type="checkbox" name="hobi" /> Membaca </input>
            <input type="checkbox" name="hobi" /> Menulis </input>
            <input type="checkbox" name="hobi" /> Olahraga </input></td>
    </tr>

    <tr>
        <td>Pas Foto</td>
        <td>:</td>
        <td><input type="file" name="foto" /></td>
    </tr>

    <tr>
        <td><input type="submit" name="submit" value="SUBMIT"/></td>
        <td></td>
        <td></td>
    </tr>

</table>
</fieldset>

</form>

</body>
</html>

Hasilnya:

Belajar HTML Rumahweb - Membuat form HTML
Belajar HTML Rumahweb – Membuat form HTML

Demikian beberapa hal yang dapat dipelajari untuk membuat Formulir HTML. Mudah bukan ?

Bermanfaatkah Artikel Ini?

Klik bintang 5 untuk rating!

Rating rata-rata 4.4 / 5. Vote count: 20

Belum ada vote hingga saat ini!

Kami mohon maaf artikel ini kurang berguna untuk Anda!

Mari kita perbaiki artikel ini!

Beri tahu kami bagaimana kami dapat meningkatkan artikel ini?

VPS Alibaba

Rudiharto

Halo! Saya Rudi, bekerja di Rumahweb sebagai Technical Support. Saya menyukai WordPress, SitePro, Blogspot, dan rutin menulis tutorial. Saya akan membantu Anda membuat beberapa hal teknis mudah dipahami :)