Cara Membuat Form menggunakan HTML

Dutormasi.com – Halo sahabat dutormasi!!. Kembali lagi di postingan yang membahas tentang web, baiklah kali ini kita akan membahas kembali tentang tag-tag pada HTML (yuk baca lagi tentang HTML). Pada kesempatan kali ini kita akan membahas tentang form pada HTML dan bagaimana cara membuatnya. Sebenarnya FORM itu apa sih? Langsung kita ulas ya..

FORM

Form disini ialah tempat pengisian suatu data agar dapat dikirimkan, diproses dan digunakan kembali suatu waktu, seperti contoh Form pendaftaran, form login, form data nasabah dll. Form digunakan untuk menyimpan data yang kita inputkan, dan dalam penggunaannya melibatkan bahasa pemrograman seperti PHP. Untuk membuat Form ada banyak elemen yang dapat ditambahkan seperti input, radio, button, textarea, select option, label dll.

Masih belum paham? yuk sama-sama kita belajar membuat FORM sederhana

1. Siapkan index.html postingan sebelumnya.

2. Setelah terbuka maka akan tampil seperti ini.

3. Yuk kita ubah kalimat di tag <h2> dan <p> seperti berikut

<h2>Form Pendaftaran</h2>

<p>Silahkan daftarkan diri anda untuk mengikuti pelatihan Dutormasi</p>

4. Nah dibawah tulisan tersebut kita tambahin tag form , sekaligus masukkan elemen method=”POST”, nya juga ya seperti ini:

<form method="POST">

</form>

5. Baiklah selanjutnya kita buat label dan inputnya didalm form oke.

 Email :
 <input type="text"> <br>
 Pass :
 <input type="password"> <br>
 <input type="submit" value="Login">

6. Maka akan terlihat seperti ini..

7. Oke selanjutnya bisa kita tambahin aja ya

<form method="POST">
        Email :
        <input type="text"> <br><br>
        Pass :
        <input type="password" > <br><br>
        Asal
        <Select>
            <option value="indonesia">Indonesia</option>
            <option value="Luar Negeri">Luar Negeri</option>
        </Select>
        <br><br>
        Jenis Kelamin : 
        <input type="radio" name="gender" value="Pria">Laki-Laki
        <input type="radio" name="gender" value="Wanita">Wanita
        <br><br>
        Alamat : <br>
        <textarea cols="50" rows="5"></textarea>
        <br><br>
        <input type="submit" value="Login">
    </form>

8. Tampilannya akan menjadi seperti ini

Jika kalian teliti pasti banyak terdapat elemen baru yang kalian lihat kan.? Ini hanya baru sebagian saja sebagai contoh, sebenarnya masih banyak lagi elemen yang dapat ditambahkan dalam tag-tag tersebut. Sebagai contoh contoh kita mengetahui ada tag <br> yang mana fungsinya untuk memberi baris baru.

Keterangan:

    form         : Deklarasi pembuatan form

    method     : aksi yang akan dilakukan oleh form

    input         : Sebuah tag pengisian data

    type           : tipe dari pengisian data tersebut

    select         : membuat opsi pemilihan dropdown

    option       : opsi yang tertera pada dropdown

    name         : penamaan dari tag input

    br               : memberikan baris baru

    value          : data default dari sebuah form

Gimana pembuatan form nya.? Pasti masih bernatakan ya… ya wajar saja karena kita masih belajar HTML yaitu sebuah kerangka dari sebuah web. Postingan selanjutnya kita coba rapikan secara sederhana, masih menggunakan tag HTML juga, Penasaran kan?. Jadi terus ikuti postingannya ya. Salam Dutormasi.