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,,, :vPenasaran ?? 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 Judulketikaan 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
Hasilnya .. Keterangan : <table> .... </table> merupakan perintah utama dalam pembuatan tabel, <tr> ... </tr> tag untuk membuat baris<td> ... </td> tag untuk membuat kolom/cellcolspan merge/melebarkan kolom/cellrowspan merge/melebarkan barisMembuat 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 ..Membuat Menu Submit dan Resettambahkan 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 BackgroundMengubah warna bacground :cari kode
<body> ubah kode seperti berikut, tambahkan kode
bgcolor="#99FF00" pada <body>.contohnya : <body bgcolor="#99FF00">
Menyisipkan gambar BackgroudSiapkan 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...
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