Cara membuat form formulir dengan html

Question

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.

Table of Contents Show

Atribut di dalam Form HTML
Apa itu Field?
Contoh Atribut
Atribut Type
Atribut Name
Atribut Value
Atribut Placeholder
Atribut Required
Elemen lain di form HTML
Contoh membuat formulir pendaftaran HTML
Form HTML apa saja?
Langkah langkah membuat form login HTML?
Bagaimana cara membuat Link di HTML?
Apa itu tag form HTML?

Daftar Isi

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 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

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

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. 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

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

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.

Form HTML apa saja?

Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web. Elemen Form dapat terdiri dari check box, radio button, menu, text box, text area, dan button.

Cara Membuat Form Login yang Menarik dengan HTML.

Deklarasikan Dokumen HTML Anda. Sekarang, buka file html form login Anda. ... .

2. Buat Kepala Halaman Form Login. ... .

3. Beri Judul Halaman Form Login. ... .

3. Sisipkan File CSS. ... .

4. Buat Badan Form Login. ... .

Buat Layout Form Login. ... .

6. Beri Judul Form Login. ... .

7. Buat Kotak Form Login..

Bagaimana cara membuat Link di HTML?

Cara Membuat Link di HTML Link pada HTML dapa dibuat dengan tag <a> , kemudian tag ini harus memiliki atribut href untuk menentukan alamat URL tujuan dari link. Link akan ditampilkan dengan warna biru dan garis bawah. Ini adalah style standar dari setiap browser.