Latest Article Get our latest posts by subscribing this site

Tutorial Membuat Form Pendaftaran dengan HTML

Posted by Unknown Posted on Monday, March 02, 2015 with No comments
Tutorial Membuat Form Pendaftaran dengan HTML 


Selamat pagi sobat kreatif...
Di pagi hari yang cerah ini saya akan membagikanTutorial Membuat Form Pendaftarn dengan HTML yang sudah saya modifikasi dari tutorial sebelumnya yaitu Membuat Form Pendaftaran menggunakan HTML . untuk melihat yang sebelumnya bisa cek disini.. 
belajar itu memang gampang gampang susah, jika tidak gampang ya susah hee.. piss mas Bro,,, :v

Penasaran ?? langsung aja ke TKP..

Tutoralnya..
Seperti bisa siapkan dulu secangkir kopi Notepad++ dan Mozilla firefox atau Google Chrome,.
jika males untuk mengetik ada dua langkah jitu yaitu Copy dan Paste, ya mau gimana lagi jika malass, jika tidak mengerti resiko di tanggung penumpang.

Oke lanjut ke topik
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 kode 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">

Finishh......



Hasil Ahir, kili gambar untuk memperbesar.



untuk mendownload kode full, silahkan klik tautan di bawah ini...

>>>>>>DOWNLOAD<<<<<<




Sekian tutorial dari saya, apabila sobat ingin mengcopas artikel ini jangan lupa untuk menyertakan refrensinya..


refrensi : http://rhaomlie.blogspot.com/2015/03/tutorial-membuat-form-pendaftaran-dengan-HTML.html




Read more »

Membuat Form Pendaftaran menggunakan HTML

Posted by Unknown Posted on Thursday, February 26, 2015 with No comments

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/AVvXsEjsMVw656Mhx1QmkvP7RfDyTbsY6EQZ_YwpQLl80gg4FjYlSCSW4NarZBOB4ygqCOY7z_ZW8q-lbExkeqkAQ9dNG67HQdCZv-cQXftFVEQemF28P8nrFZMEFP-Mg_T3_S2ENylr3casKWwd/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

Read more »

Facebook

 
Support : Copyright © 2013. Mohammad Ramli - All Rights Reserved
Proudly powered by Blogger