Form berfungsi untuk mengumpulkan atau menampung data dari user atau orang yang berkunjung ke website kita. Beberapa contoh form yang paling umum digunakan antara lain form login, form pendaftaran (Sign Up), form kontak, dan lain-lain.
Form merupakan sebuah interface yang dibuat untuk mengumpulkan data dari user yang nantinya form tersebut akan diproses dengan berbagai bahasa pemrograman web seperti PHPatau JavaScript, kemudian data tersebut disimpan di dalam sebuah Database. Pada tutorial Membuat Form dengan HTML kali ini kita hanya membuat tampilan Form saja tanpa menggunakan PHP atau JavaScript dan form tersebut tidak akan diproses.
Scripnya seperti di bawah ini:
Form merupakan sebuah interface yang dibuat untuk mengumpulkan data dari user yang nantinya form tersebut akan diproses dengan berbagai bahasa pemrograman web seperti PHPatau JavaScript, kemudian data tersebut disimpan di dalam sebuah Database. Pada tutorial Membuat Form dengan HTML kali ini kita hanya membuat tampilan Form saja tanpa menggunakan PHP atau JavaScript dan form tersebut tidak akan diproses.
Scripnya seperti di bawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Regis Website</title>
</head>
<body>
<h2 align="center">Halaman Registrasi website</h2>
<fieldset style="width: 35%; margin: auto;">
<div>
<h3 align="center">Registrasi Area</h3>
<div class="ui-grid-b ui-responsive"></div>
<div class="ui-block-a"></div>
</div>
<form action="simpan.php" method="post">
<p>
Nama Depan<br />
<input type="text" name="firstname" required />
</p>
<p>
Nama Belakang<br />
<input type="text" name="lastname">
</p>
<p>
Alamat Lengkap<br />
<textarea name="alamat" cols="50" required></textarea>
</p>
<div>Tanggal Lahir</div>
<select aria-label="Tanggal" name="birthday_day" id="day" title="tanggal" class="_5dba">
<option value="" selected="selected">--Tanggal--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</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>
</select>
<select aria-label="Bulan" name="birthday_month" id="month" title="Bulan" class="_5dba">
<option value="" selected="selected">--Bulan--</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">Mei</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Agu</option>
<option value="9">Sep</option>
<option value="10">Okt</option>
<option value="11">Nov</option>
<option value="12">Des</option>
</select>
<select aria-label="Tahun" name="birthday_year" id="year" title="Tahun" class="_5dba">
<option value="" selected="selected">--Tahun--</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
</select>
<p>
</p>
<p>
Jenis Kelamin<br />
<input type="radio" name="Jenis_kelamin" value="laki-laki" id="laki-laki" /><label for="laki-laki">Laki-Laki</label>
<input type="radio" name="Jenis_kelamin" value="perempuan" id="perempuan" /><label for="perempuan">Perempuan</label>
</p>
<div>
<h4>Login</h4>
</div>
<p>
Username<br />
<input type="text" name="username" />
</p>
<p>
Password<br />
<input type="password" name="password" />
</p>
<p>
<h4><b>File Input</b></h4>
<input id="exampleInputFile" type="file">
</p>
<div >
<input type="submit" value="Simpan" />
<input type="reset" value="reset" onclick="return confirm('hapus data yang sudah diinput?')">
</div>
</form>
</fieldset>
</body>
</html>
Berikut penampakannya jika dijalankan melalui browser:
Sekian toterial Form dari saya semoga bermanfaat bagi temen-temen .
Thanks gan, ane cobain deh :)
ReplyDeletesilahkan gan. maksi ats knjuganya gan.
ReplyDelete