Cara Membuat Form Pendaftaran Menggunakan HTML Dengan Mudah

07.11
A+ A- Print Email
Sudah lama nggak nge-post tentang Design Web :D , pada kali ini saya ingin membahas tentang Cara Membuat Form Pendaftaraan dengan script HTML dengan Mudah. Iya kenapa kata mudah saya pertebal, karena dengan kata itu kita dapat menyelesaikan berbagai pekerjaan kita dengan cepat.

OK, masuk ketopik pembahasan. Berikut adalah Contoh Form Pendaftaran yang saya ambil dari miliknya Facebook.

Form Pendaftaran Dengan HTML


Contoh Form Pendaftaran

Kali ini saya akan membuat form pendaftaraan yang memiliki design yang hampir sama dengan milik FB tetapi dengan versi HTML saya sendiri. Kalian hanya perlu memasukan script dibawah ini :

<html>
<head><title>Form Pendaftaran</title></head>
<body>
<table border="4" bgcolor="A9C5EB" align="center" height="500" width="400" cellpadding="20">
<tr>
<td>
<b><font color="black" size="10"> Mendaftar </font></b>
<p> Gratis, untuk pelajar </p>
<input type="text" Name="nama" size="20" placeholder="Nama Depan">
<input type="text" Name="nama" size="20" placeholder="Nama Belakang"><br><br>
<input type="text" Name="email" size="46" placeholder="Email Anda"><br><br>
<input type="text" Name="remail" size="46" placeholder="Masukan Ulang Email"><br><br>
<input type="password" Name="sandi" size="46" placeholder="Kata Sandi Baru"><br>
<p><b> Tanggal Lahir </b></p>
<select name="Tanggal">
<option>-Tanggal-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
</select>
<select name="Bulan">
<option>-Bulan-</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
<select name="Tahun">
<option>-Tahun-</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select><br><br>
<input type="radio" name="Kelamin" value="L">Laki Laki
<input type="radio" name="Kelamin" value="P">Perempuan
<br><br>
<input value="Kirim" style="background-color: 4985D0; height: 50; width: 150;"type="submit">
</td>
</tr>

</body>
</html>


Nah, coba kalian masukkan script diatas ke dalam notepad anda, kemudian save dalam format HTML ( saya menyarankan pakai notepad++ dengan language HTML ) kemudian jalankan di browser kalian, dan apa yang terjadi ?. Berikut Screen Shot hasil dari Form Pendaftaraan yang telah saya buat menggunakan script diatas

Form Pendaftaran Dengan HTML
Form Pendaftaran Yang Sudah Jadi

Yaa, itu lah form pendaftaran dengan menggunakan bahasa HTML, untuk keperluan lain, kalian dapat dengan mudah meng-edit bagian - bagian form tersebut.
Sekian dari saya, apabali ada pertanyaan silakan menulisnya di komentar, Terima Kasih :D
Sudah lama nggak nge-post tentang Design Web :D , pada kali ini saya ingin membahas tentang Cara Membuat Form Pendaftaraan dengan script HTML dengan Mudah. Iya kenapa kata mudah saya pertebal, karena dengan kata itu kita dapat menyelesaikan berbagai pekerjaan kita dengan cepat.

OK, masuk ketopik pembahasan. Berikut adalah Contoh Form Pendaftaran yang saya ambil dari miliknya Facebook.

Form Pendaftaran Dengan HTML


Contoh Form Pendaftaran

Kali ini saya akan membuat form pendaftaraan yang memiliki design yang hampir sama dengan milik FB tetapi dengan versi HTML saya sendiri. Kalian hanya perlu memasukan script dibawah ini :

<html>
<head><title>Form Pendaftaran</title></head>
<body>
<table border="4" bgcolor="A9C5EB" align="center" height="500" width="400" cellpadding="20">
<tr>
<td>
<b><font color="black" size="10"> Mendaftar </font></b>
<p> Gratis, untuk pelajar </p>
<input type="text" Name="nama" size="20" placeholder="Nama Depan">
<input type="text" Name="nama" size="20" placeholder="Nama Belakang"><br><br>
<input type="text" Name="email" size="46" placeholder="Email Anda"><br><br>
<input type="text" Name="remail" size="46" placeholder="Masukan Ulang Email"><br><br>
<input type="password" Name="sandi" size="46" placeholder="Kata Sandi Baru"><br>
<p><b> Tanggal Lahir </b></p>
<select name="Tanggal">
<option>-Tanggal-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
</select>
<select name="Bulan">
<option>-Bulan-</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">Agustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
<select name="Tahun">
<option>-Tahun-</option>
<option value="1980">1980</option>
<option value="1981">1981</option>
<option value="1982">1982</option>
<option value="1983">1983</option>
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select><br><br>
<input type="radio" name="Kelamin" value="L">Laki Laki
<input type="radio" name="Kelamin" value="P">Perempuan
<br><br>
<input value="Kirim" style="background-color: 4985D0; height: 50; width: 150;"type="submit">
</td>
</tr>

</body>
</html>


Nah, coba kalian masukkan script diatas ke dalam notepad anda, kemudian save dalam format HTML ( saya menyarankan pakai notepad++ dengan language HTML ) kemudian jalankan di browser kalian, dan apa yang terjadi ?. Berikut Screen Shot hasil dari Form Pendaftaraan yang telah saya buat menggunakan script diatas

Form Pendaftaran Dengan HTML
Form Pendaftaran Yang Sudah Jadi

Yaa, itu lah form pendaftaran dengan menggunakan bahasa HTML, untuk keperluan lain, kalian dapat dengan mudah meng-edit bagian - bagian form tersebut.
Sekian dari saya, apabali ada pertanyaan silakan menulisnya di komentar, Terima Kasih :D
Label:

Posting Komentar

Langganan: Posting Komentar (Atom)

Author Name

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.