Langkah Pertama
Silahkan Copy Kode di bawah ini dan simpan dengan nama index.php<html>
<head>
<link href="form.css" rel="stylesheet" type="text/css">
<title> Form</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="badan">
<div class="kepala">
<p class="kepalatext">» Form Registrasi «</p>
</div>
<div class="bingkai">
<div>
<input class="namadepan" type="text" name="namadepan" id="name" placeholder="Nama" onKeyPress="return goodchars(event,'ABCDEFGHIJKLMNOPQRSTUVWXYZ',this)"/>
<input class="alamat" type="text" name="alamat" id="name" placeholder="Alamat" onKeyPress="return goodchars(event,'ABCDEFGHIJKLMNOPQRSTUVWXYZ',this)"/>
<input class="tlp" type="text" name="tlp" maxlength="12" id="tlp" placeholder="Tlp" onKeyPress="return goodchars(event,'1234567890',this)"/>
</div>
<p class="tgllahirtext">» Tanggal Lahir «</p>
<div>
<select class="tgllahir" name="tanggal">
<option value="Tanggal" 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="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>
</select>
<select class="tgllahir" name="bulan">
<option value="Bulan" selected>Bulan</option>
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
<option value="Juni">Juni</option>
<option value="Juli">Juli</option>
<option value="Agustus">Agustus</option>
<option value="September">September</option>
<option value="Oktober">Oktober</option>
<option value="November">November</option>
<option value="Desember">Desember</option>
</select>
<select class="tgllahir" name="Tahun">
<option value="Tahun" selected>Tahun</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="200">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>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
</select>
</div>
<p class="jeniskelamintext">» Jenis Kelamin «</p>
<div class="bawah">
<p>
<label class="jeniskelamin">
<input type="radio" name="remember" value="laki-laki">Laki - Laki</label>
<br>
<label class="jeniskelamin">
<input type="radio" name="remember" value="perempuan">Perempuan</label>
</!input class="tlp" type="text" name="tlp" id="tlp" placeholder="Tlp"/!>
<p>
<p>
<p class="informasi_akun">» Informasi Akun «</p>
<center>
<p>
<p>
<input class="username" type="text" name="username" maxlength="10" id="name" placeholder="Username"/>
<input class="email" type="email" name="email" id="email" placeholder="Masukkan Email"/>
<input class="password" type="password" name="password" id="password" placeholder="Masukkan Pasword"/>
<input class="konfpass" type="password" name="konfpass" id="konpass" placeholder="Konfirmasi Password"/>
<p> </p>
<input class="daftar" type="submit" name="submit" value="» Daftar «">
</p>
<p> </p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> Langkah Kedua
Copi Kode Di bawah ini kemudian simpan dengan nama form.css.container{
margin-top: 130px;
margin-left: 500px;
}
.bingkai{
border: 5px solid #3498db;
width: 450px;
height: 660px;
}
body{
background-color: #bdc3c7;
}
.kepala{
width: 460px;
height: 50px;
background-color: #3498db;
border-radius: 3px 3px 0 0;
}
.kepalatext{
color: #ffffff;
text-align: center;
font-size: 18pt;
font-family: Century;
padding-top: 12px;
}
.kepalatext:hover{
color: #e74c3c;
}
.badan{
width: 450px;
height: 710px;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 6px 6px 0 0 #ffffff;
}
.namadepan{
text-transform:uppercase;
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
padding-left: 5px;
margin-top: 10px;
margin-left: 15px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.alamat{
text-transform:uppercase;
font-family: Century;
font-size: 13pt;
width: 415px;
height: 50px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.email{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.jeniskelamin{
font-family: Century;
color: #3498db;
margin-top: 10px;
margin-left: 15px;
width: 15px;
height: 15px;
position: relative;
top: -35px;
display: compact;
}
.daftar{
background-color: #ffffff;
color: #3498db;
margin-top: -10px;
margin-left: 15px;
width: 415px;
height: 40px;
border: 2px solid #3498db;
border-radius: 5px;
font-family: Century;
font-size: 13pt;
}
.daftar:hover{
background-color: #e74c3c;
color: #ffffff;
}
.bawah{
margin-top: 40px;
width: 440px;
height: 80px;
background-color: #ffffff;
border-radius: 0 0 1px 1px;
}
.password{
font-family: Century;
font-size: 13pt;
width: 200px;
height: 35px;
border: 1px solid #2980b9;
padding-left: 5px;
margin-top: 10px;
margin-left: 15px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.konfpass{
font-family: Century;
font-size: 13pt;
width: 200px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 10px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.footertext{
margin-top: 5px;
text-align: center;
font-family: Century;
font-size: 12pt;
color: #ffffff;
}
.tgllahir{
font-family: Century;
font-size: 12pt;
color: #3498db;
border: 1px solid #3498db;
margin-left: 15px;
height: 30px;
margin-right: -18px;
}
.tgllahirtext{
margin-left: 15px;
color: #3498db;
font-family: Century;
font-size: 12pt;
text-align: left;
}
.jeniskelamintext{
margin-left: 15px;
color: #3498db;
font-family: Century;
font-size: 12pt;
text-align: left;
}
.tlp{
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.username{
text-transform:lowercase;
font-family: Century;
font-size: 13pt;
width: 415px;
height: 35px;
border: 1px solid #2980b9;
margin-left: 15px;
margin-top: 10px;
padding-left: 5px;
display: compact;
box-shadow: #95a5a6;
border-radius: 5px;
}
.informasi_akun {
margin-left: 15px;
color: #3498db;
font-family: Century;
font-size: 12pt;
text-align: left;
}Setelah selesai simpan kedua file tersebut di dalam satu folder dan tinggal di eksekusi saja silahkan di kembangkan sesuai keinginan teman teman.
Demikian tutorial kali ini semoga bermanfaat.
Wah,, keren atikelnya sob apalagi saya lagi nyari konten kayak gini. Kunbal yah http://seputar-teknologi98.blogspot.co.id
ReplyDeletekeren kak
ReplyDeleteTerima kasih banyak kak untuk Website nya...
ReplyDeleteDengan ada nya Website dari kak ini, saya menjadi lebih tau dan lebih paham bagaimana caranya membuat Form Pendaftaran Menggunakan HTML apalagi untuk saya yg pemula.perkenalkan nama saya m.jainuri dri kelas Si2J nim 1922500045 dan web kampus kami https://www.atmaluhur.ac.id/