1. Home
  2. tutorial blog
  3. Cara membuat form pendaftaran web pada bahasa pemrograman html

Cara membuat form pendaftaran web pada bahasa pemrograman html

Kali ini saya ingin berbagi ilmu tentang cara membuat form pendaftaran dalam web. Sebenarnya membuat form itu bukan perkara yang sulit, asalkan tau ilmunya dan mau mencoba. Sebelum membuat form kita perlu tau tag dan elemen apa saja yang perlu diketahui. Pembuatan form menggunakan tag <form> ... <\form> , dan didalam tag tersebut nantinya akan dimasukkan elemen-elemen yang didekarasikan. Berikut beberapa elemen dalam pembuatan form :
  1. Text box <input type=”text”>Digunakan untuk memasukkan input berupa text.
  2.  Password <input type=”password”>Digunakan untuk memasukkan password.
  3.  Hidden <input type=”hidden”>Digunakan untuk mengirim data ke suatu aplikasi yang tidak diinginkan untuk dilihat oleh browser.
  4. Check box <input type=”checkbox”>Check box digunakan untuk dapat memilih lebih dari satu pilihan.
  5. Radio button <input type=”radio”>Radio button digunakan untuk dapat memilih hanya salah satu pilihan diantara beberapa pilihan.
  6.  Push button <input type=”button”>Elemen ini biasanya digunakan untuk membuat sebuah tombol aksi.
  7.  Submit <input type=”submit”>Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama variabel dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM.
  8.   Reset <input type=”reset”>Digunakan untuk mereset (menghapus) semua masukan dalam form.
  9.  Text area <textarea> . . . </textarea>Elemen untuk memasukkan teks secara leluasa seperti pada notepad.
  10.  Select <select> . . . </select>Daftar isi dalam pilihan select menggunakan tag <option>

Kali ini aplikasi yang saya gunakan untuk mencoba membuat form adalah Notped++, Berikut langkah membuat form dengan notped++ : 
  • Buka notped ++, kemudian buat file baru 
  • Ketikkan script berikut:
    <html>
    <head>
    <title bgcolor="white">Membuat Form dengan Notepad++</title>
    </head>
    <body bgcolor="ccccff">
    <form>
                <p>Nama : <input type=text name=nama />
                <p>Alamat : <textarea name="Alamat" cols="25" rows="4"></textarea>
                <p>Jenis Kelamin : <input type=”radio”>
    <select>
    <option value=Laki-laki>Laki-laki
    <option value=Perempuan>Perempuan
    </select>
    <p>Tanggal lahir :
                            <select name=tgl>
                                        <option value=1>01
                                        <option value=2>02
                                        <option value=3>03
                                        <option value=4>4
                            </select>
                            <select name=bln>
                                        <option value=1>01
                                        <option value=2>02
                                        <option valie=3>03
                                        <option value=4>4
                            </select>
                            <select name=tahun>
                                        <option value=1991>1991
                                        <option value=1992>1992
                                        <option value=1993>1993
                                        <option value=1995>1995
    <option value=1996>1996
                            </select>
                <p>Pekerjaan :
                            <select name=Pekerjaan>
                                        <option value=Pelajar>Pelajar/Mahasiswa
                                        <option value=PNS>Pegawai Negeri Sipil
                                        <option value=Karyawan>Wiraswasta
                                        <option value=Wiraswasta>Karyawan
                            </select>
                <p>Hobi :
                            <input type=checkbox name=hobi value=Olahraga>Olahraga
                            <input type=checkbox name=hobi value=Kesenian>kesenian
                            <input type=checkbox name=hobi value=Membaca>Membaca
                            <input type=checkbox name=hobi value=Traveling>Traveling
                <p>Komentar : <textarea name="komentar" cols="25" rows="4"></textarea>
                <p><input type=submit value=kirim data/><input type=reset value=ulang>
    </form>
    </body>
    </html>

    • simpan file dalam bahasa html (save as type pilih: hyper text markup laguage)
    • Kemudian di run (dijalankan) dengan cara klik menu run pada bagian atas Notped++, kemudian pilih Launch in chrome atau Launch in Firefox 
    • Dan hasilnya adalah sebagai berikut:

      Sekian penjelasan dari saya, semoga bermanfaat.. 

      Share this Article

      Subscribe via Email

      Related Post