Scribd Logo
Upload

Welcome to Scribd!

  • Belajar Buat Form Guna HTML

    Uploaded by

    Mohd Khir Zainun
    37 views6 pages
    Buat form guna html

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Buat form guna html

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    37 views6 pages

    Belajar Buat Form Guna HTML

    Uploaded by

    Mohd Khir Zainun
    Buat form guna html

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Pertama buka Notepad++ kemudian simpan dengan nama form-pendaftaran.

    html (jangan
    salah ya gunakan format tipy HTML)
    ketikkan kode berikut

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Form Pendaftaran</title>
    </head>

    <body>
    </body>
    </html>

    Keterangan :
    <!DOCTYPE HTML> : Sebagai identitas HTML5
    <html> </html> : Baris paling atas dari setiap file HTML dan sebagai tanda awal
    pembuatan dokumen
    <head> </head> : Informasi umum dari sebuah halaman web
    <title> </title> : Judul halaman. Terdapat pada head
    <body> </body> : settingan atribut untuk seluruh dokumen

    Membuat Judul
    ketikaan kede berikut dan letakkan pada area <body> ... </body>

    <h1> Form Pendaftaran </h1>

    Keterangan :
    <h1>.. </h1> : tujuannya untuk membuat header atau judul postingan (Heading 1)

    jika terlalu besar bisa mengaubah dengan pilihan :


    <h1> Form Pendaftaran </h1>
    <h2> Form Pendaftaran </h2>
    <h3> Form Pendaftaran </h3>
    <h4> Form Pendaftaran </h4>
    <h5> Form Pendaftaran </h5>
    <h6> Form Pendaftaran </h6>

    Contoh hasilnya :

    Form Pendaftaran
    Form Pendaftaran
    Form Pendaftaran
    Form Pendaftaran

    Form Pendaftaran

    Form Pendaftaran

    Membuat Tampilan Form

    Nama :
    Alamat :

    Tempat Lahir :
    Tanggal Lahir :

    Alamat Web :
    E-Mail :
    No. HP :

    Hasilnya ..

    Nama :

    Alamat :

    Tempat Lahir :
    Tanggal Lahir :

    Alamat Web :
    E-Mail :
    No. HP :

    Keterangan :
    <table> .... </table> merupakan perintah utama dalam pembuatan tabel,
    <tr> ... </tr> tag untuk membuat baris
    <td> ... </td> tag untuk membuat kolom/cell
    colspan merge/melebarkan kolom/cell
    rowspan merge/melebarkan baris

    Membuat ComboBox
    Modifikasi pada kode Tanggal lahir

    <td colspan="2">
    <select name="hari">
    <option value=1>01
    <option value=2>02
    <option value=3>03
    </select>
    <select
    name="bln">
    <option value=1>Januari
    <option value=2>Februari
    <option valie=3>Maret
    </select>
    <select name="tahun">
    <option value=1991>1991
    <option value=1992>1992
    <option value=1993>1993
    </select>
    </td>
    </tr>

    Keterangan :
    <select> . . . </select> : membuat menu dropdown
    value : variabel

    Membuat Radio Button


    Radio digunakan untuk mentukan pilihan berdasarkan check. tambahkan kode berikut
    diabahnya Tanggal Lahir
    <tr>
    <td>Jenis Kelamin </td>
    <td> : </td>
    <td> </td>
    <td><input type = "radio" name =
    "gendor" value ="Male" />Male</td>
    </tr>
    <tr>
    <td> </td>
    <td> : </td>
    <td> </td>
    <td><input type = "radio" name =
    "gendor" value ="Female" />Female</td>
    </tr>

    Contoh hasilnya ..

    Tanggal Lahir :
    Jenis Kelamin : Male
    : Female
    Membuat Menu Submit dan Reset
    tambahkan kode berikut diatasnya </table>

    <tr>
    <td></td>
    <td></td>
    <td></td>
    <td ><input type = "Submit" value="Submit" >
    <input type = "reset" value="Reset"></td>
    </tr>

    dan inilah hasilnya...

    Menambahkan Gambar
    cari kode <form> dan letakkan kode berikut tepat di bawahnya..

    <table align="right">
    <tr>
    <td> <img alt="Rhaomlie" height="300"
    src="rhaomlie.jpg" width="200" />
    </tr>
    <tr>
    <td align="center"><b>Mohammad Ramli</b></td>
    </tr>
    <tr>
    <td align="center"><i>1310651201</i></td>
    </tr>
    <tr>
    <td
    align="center"><u>http://Rhaomlie.Blogspot.com</u></td>
    </tr>
    </table>

    Keterangan :
    kode untuk menambahkan gambar hanyalah kod ini :
    <img alt="Rhaomlie" height="300" src="rhaomlie.jpg"
    width="200" />

    warna hijau = nama gambar


    height = tinggi gambar
    widht = lebar gambar

    Modifikasi Background
    Mengubah warna bacground :
    cari kode <body> ubah kode seperti berikut, tambahkan kode bgcolor="#99FF00" pada
    <body>.
    contohnya : <body bgcolor="#99FF00">

    Menyisipkan gambar Backgroud


    Siapkan gambar backgroud terlebih dahulu misal nama gambar green.jpg
    maka tambahkan kode background="green.jpg" setelah kode diatas.
    hasilnya seperti ini :
    <body bgcolor="#99FF00" background="green.jpg">

    You might also like