Thursday, February 26, 2015

Membuat Form Pendaftaran menggunakan HTML


Assalamualaikum wr wb..
Selamat malam sahabat kreatif, kali ini saya membagikan tutorial membuat form Pendaftaran menggunakan HTML. Bahan yang perlukan hanyalah secangkir kopi Notepad++ dan Browser Mozilla atau bisa menggunakan yang lain.

oke langsung saja ini gambaran hasilnya..


Nama : Mohammad Ramli
NIM : 1310651201
Rhaomlie Form Pendaftaran

Form Pendaftaran

Nama :
Alamat :
: Desa
: Kec.
: Kota
: Prov
: Zip
Tempat Lahir :
Tanggal Lahir :
Jenis Kelamin : Male
: Female
Alamat Web :
E-Mail :
No. HP :



Tutorialnya..

Buka Notepad++
Ketikkan kode berikut pada notepad++

<!DOCTYPE HTML>
<html>
    <head>
        <title>Judul</title>
    </head>
   
    <body>

    </body>
</html>


lalu simpan dalam format nilai.html

Keterangan :
<!DOCTYPE HTML>      : merupakan tag untuk menggunakan HTML 5.
<html> ... </html>   : merupakan tag pembuka dari dokumen html.
<head> ... </head>   :
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body>   : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag body ini.


selanjutnya beri warna pada background letakkan  dalam <body>
<body bgcolor="#99FF00"> 


 Tambahkan Kode berikut kedalam  <body> ....  </body>





Form Pendaftaran






























































































Nama :
Alamat :
: Desa
: Kec.
: Kota
: Prov
: Zip
Tempat Lahir :
Tanggal Lahir :




Jenis Kelamin : Male
: Female
Alamat Web :
E-Mail :
No. HP :







Keterangan :
<h1> .... </h1> : ini adalah text format yang di gunakan untuk judul, untuk penggunaanya seperti contoh di bawah ini

<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>


hasilnya :

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
Membuat Form dan Tabel
<form> .... </form>   : Membuat form
<table> .... </table> : membuat tabel
<tr> ....</tr>                    : membuat banyaknya baris
<td> .... </td>                  : membuat banyaknya kolom
colspan               :menyatukan beberapa kolom tabel
rowspan                                      : meyatukan beberapa basir pada tabel


Membuat Combobox
  
                   <select name="bln">                                  
                                    <option value=1>Januari
                                    <option value=2>Februari
                                    <option value=3>Maret
                                    <option value=4>April
                                    <option value=5>Mei
                   </select> / 



hasilnya :




Membuat Radio Button 


<tr>
                <td>Jenis Kelamin </td>
                 <td>: </td>
                 <td></td>
                <td><input name="gendor" value="Male" type="radio">Male</td>
 </tr>
<tr>
                <td></td>
                 <td>: </td>
                 <td></td>
                <td><input name="gendor" value="Female" type="radio">Female</td>
  </tr>
hasilnya :

Jenis Kelamin : Male
: Female


keterangan : 
name di samakan agar saat memilih pilihan yang kedua tanda centang bisa berpindah

Menyisipkan Gambar Pada From
pertama siaplan dulu gambarnya..
karena untuk bisa di lihat secara online ya harus di upload dulu gambarnya..
jika sudah copy link url-nya, misal https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-8bYilBCGOAOq4DhmqF53E6aYCARt8Q-8ukrrheUPEBMG3FjpDyFKAFg1KJE6POK1ZozeZVlweUbe8i1qHyDNTSBfnYc17TCcIZabuTQmfsevG8MCzJUInaS4nTUdHW-NX4BTsO-iYFuA/s1600/rhaomlie.jpg 
jika ofline tempatkan gambar dan file.html dalam satu folder link url ganti dengan rhaomlie.jpg

<img alt="rhaomlie" height="150" src="link url" width="100" />

Keterangan :
height = Tinggi gambar
width = Lebar gambar




wez beres selesai tutorialnya..

jika masih bingung langsung download aja Surcode dalam bentuk html

No comments:
Write komentar

Terimakasih Atas Kunjungan Anda..
Kritik dan Saran Anda membantu blog ini lebih baik..