Tutorial Membuat Form Pendaftaran dengan HTML
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
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
Hasilnya ..
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 ..
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
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.
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
0 Komentar Sahabat:
Post a Comment
Jadilah yang pertama...