Scribd Logo
Unggah

Selamat datang di Scribd!

  • 11 Form

    Diunggah oleh

    MBV TIRTA
    6 tayangan29 halaman

    Judul Asli

    11-FORM

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    6 tayangan29 halaman

    11 Form

    Diunggah oleh

    MBV TIRTA

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 29

    MEMBUAT

    FORM

    AMIROH, S.Kom
    SMKN 3 JOMBANG
    PENGERTIAN
    • Form adalah suatu cara untuk mejadikan
    halaman web menjadi lebih interaktif , karena
    akan mendaptakan umpan balik dari
    pengunjung situs web.
    • Form dapat digunakan untuk membuat buku
    tamu, formulir pemesanan, survey, meminta
    komentar dan lain sebagianya.
    Cara Membuat Form
     Untuk membuat sebuah form, Tag yang
    digunakan adalah <FORM> … </FORM>.
     Sedangkan Atribut yang paling umum
    dipakai adalah METHOD= dan ACTION=.
    Penulisan :
    <FORM METHOD=”post | get”
    ACTION=”alamat _URL”>
    ….
    ….
    </FORM>
     Di mana METHOD adalah atribut yang
    digunakan untuk menunjukkan metode
    pengiriman informasi ke web server.
     Dalam hal ini ada 2 pilihan, POST yang
    digunakan untuk mengirimkan data yang
    dimasukkan oleh user dan GET digunakan
    untuk mendapatkan data dari halaman lain.
    Metode GET ini hampir tidak pernah
    digunakan.
    • Sedangkan atribut ACTION digunakan untuk
    menentukan ke mana informasi form akan
    diserahkan. Jika Anda menggunakan CGI SCRIPT
    pada web server, maka tentukanlah URL-Script
    nya.
    • Pada bab ini semua contoh akan menggunakan
    metode POST ke sebuah alamat e-mail. Ini
    adalah cara yang paling mudah karena kita
    tidak perlu mempelajari script apapun.
    TAG INPUT
    • Digunakan untuk mendapatkan informasi dari
    pengunjung.
    • Penulisan :

    <INPUT TYPE=”text” NAME=”nama” VALUE=”isi


    item” SIZE=”angka” MAXLENGTH=”angka”
    PLACEHOLDER=“isi username”>
    Keterangan Atribut
    Atribut Fungsi
    Type = “text | hidden | Digunakan untuk memilih tipe
    check box | radio | image | informasi yang ingin didapatkan
    submit | reset “ dari pengunjung.
    Name=”nama” Untuk memberi nama item
    informasi.
    Value= “isi item” Untuk mengisi item informasi
    default.
    Size=” Angka” Untuk menentukan panjang
    kolom.
    Maxlength=”angka” Untuk menentukan panjang isian
    yang dapat diketik oleh
    pengunjung.
    TEXT BOX (KOTAK TEKS)
     Untuk mendapatkan informasi-informasi kecil dari pengunjung,
    misalnya nama, dan alamatnya, kita dapat menggunakan tipe input
    text.
     Penulisan :

    <INPUT TYPE=”text” NAME=”nama” SIZE=”angka”>


    SOURCE CODE NYA

    Source HTML gambar 8.1.


    <html>
    <head>
    <title>Form dengan Text</title>
    <body>
    <FORM METHOD="post" ACTION="mero@plasa.com">
    Nama Anda : <INPUT TYPE="text" NAME="nama"
    SIZE="35"><br>
    </FORM>
    </body>
    </html>
    Submit dan Reset
     Tombol Submit dan Reset biasanya selalu kita sertakan
    dalam sebuah form.
     Tombol submit ini digunakan untuk mengirimkan
    informasi yang telah dimasukkan.
     Sedangkan tombol Reset digunakan untuk mambatalkan
    seluruh pengisian. Jika tombol ini ditekan maka semua
    data atau informasi yang telah diisikan akan dihapus
    semua.
    Penulisan :
    <INPUT TYPE=”submit” VALUE=”isi item / kirim”>
    <INPUT TYPE=”reset” VALUE=”isi item / batal”>
    LAYOUT
    SOURCE CODE

    Source HTML gambar 8.2.


    <html>
    <head>
    <title>Form dengan Submit dan Reset</title>
    <body>
    <FORM METHOD="post" ACTION="mero@plasa.com">
    <INPUT TYPE="Submit" value="kirim">
    <INPUT TYPE="reset" value="batal"SIZE="35">
    </FORM>
    </body>
    </html>
    Radio Button dan CheckkBox
    • Dalam form, pengunjung juga diberi kesempatan
    untuk memilih dalah satu dari sejumlah pilihan
    dengan menggunakan tombol radio button atau check
    box.
    • Penulisan:
     <INPUT TYPE=”radio” NAME=”nama” VALUE=”isi item”>Teks
    <INPUT TYPE=”checkbox” NAME=”nama” VALUE=”isi
    item”>Teks

    • Di mana VALUE adalah nilai yang akan dikirim ke


    server bersama dengan NAME. Sedangkan Teks
    adalah teks yang ditampilkan pada browser.
    CONTOH
    SOURCE CODE
    <html>
    <head>
    <title>Form dengan Radio Button dan Checkbox</title>
    <body>
    <FORM METHOD="postt" ACTION="mero@plasa.com">
    Jenis Kelamin : <br>
    <INPUT TYPE="radio" NAME="jenis">Pria<br>
    <INPUT TYPE="radio" NAME="jenis">Wanita <br><br>
    Hobby Anda :<br>
    <INPUT TYPE="checkbox" NAME="hobby">Makan<br>
    <INPUT TYPE="checkbox" NAME="hobby">Belajar<br>
    <INPUT TYPE="checkbox" NAME="hobby">Chatting<br>
    <INPUT TYPE="checkbox" NAME="hobby">Browsing<br>
    </FORM>
    </body>
    </html>
    MENU DROP DOWN
    Menu Drop Down
    • Dengan menu drop down, pemakai memilih informasi dari
    sekumpulan pilihan yang telah ditentukan.
    • Pada saat pemakai memilih menu, daftar pilihan akan muncul
    sebagai menu drop down. Menu dinyatakan dalam Tag <SELECT>…
    </SELECT> sedangkan daftar pilihannya dinyatakan dengan
    <OPTION> yang diletakkan di antara kedua tag tersebut.
    Penulisan :
    <SELECT NAME=”nama” SIZE=”angka”>
    <OPTION SELECTED>…
    <OPTION>…
    <OPTION>…
    </SELECT> 
    SOURCE CODE
    KETERANGAN
    • Atribut SIZE pada tag <SELECT> di atas
    digunakan untuk mengatur ukuran tampilan
    menu drop down-nya.
    • Sebagai contoh, jika kita mengisikan angka 3
    pada atribut SIZE, maka akan ditampilkan ke
    layar secara default adalah tiga pilihan pertama.
    • Sedangkan atribut SELECTED pada tag
    <OPTION> digunakan untuk memilih suatu item
    yang akan ditampilkan secara default.
    HASILNYA
    Mendapatkan Komentar / Text Area

    • Untuk mendapatkan suatu komentar dari


    pengunjung, kita harus menyediakan suatu
    area yang cukup untuk menulis komentar.
    Untuk keperluan ini digunakan tag
    <TEXTAREA>…</TEXTAREA>.
    Penulisan:
    <TEXTAREA NAME=”nama” ROWS=”jumlah_baris”
    COLS=”jumlah_kolom”>
    CONTOH
    Password Boxes (Kotak Password)
    • Kita dapat menggunakan kotak password
    untuk mengumpulkan informasi dari
    seseorang. Pada saat pemakai memasukkan
    informasi ke dalam kotak password, informasi
    disembunyikan dari pemakai dan akan diganti
    dengan asteriks (*) atau bullet. Fasilitas ini
    digunakan dalam web site yang memerlukan
    password untuk memasukkan kode-kode
    tertentu seperti Credit Card dan lain-lain.
    Penulisan

    <INPUT TYPE=”password” NAME=”nama”


    SIZE=”angka”>
    Di mana angka adalah ukuran lebar kotak password.
    CONTOH
    Source code
    TUGAS
    • BUATLAH FORM DENGAN TAMPILAN SEBAGAI
    BERIKUT :

    Anda mungkin juga menyukai