Kali ini saya akan memberikan informasi tentang Design Web Dasar menggunakan HTML5 dan CSS. Ilmu ini saya dapatkan dari dosen mata kuliah web Design di kampus saya. Sebelumnya saya memohon maaf kepada bapak dosen saya, karena telah mempublikasikan modulenya. Tapi tindakan saya ini sangat terpujikan pak, hehehehe... ilmu itu harus kita publikasikan kepada orang-orang yang membutuhkan, "Kita loe aja keles".wkwkwkwk...
Ok langsung saja Form merupakan bagian dari dokumen web yang dapat diisikan oleh pengguna, yang berfungsi untuk memberikan informasi tertentu dari pengguna kepada website. Berikut contoh form pendaftaran yang telah saya pelajari dari perkuliahan saya.
 |
| Hasil dari Coding dibawah |
HTML :
| |
<html>
<head>
<title>Contoh Form Pendaftaran</title>
</head>
<body>
<form>
<div id="heading">Pendaftaran Jati Diri Anda</div>
<content>
<p style="font-size:24px;">Mendaftar</p>
<p style="font-size:20px;">Gratis, sampai kapanpun.</p>
<table>
<tr>
<td id="label">
<label for="Namadepan">Nama Depan</label>
</td>
<td>:
<input type="text" name"namadepan"/>
</td>
<td id="label">
<label for="Namabelakang">Nama Belakang</label>
</td>
<td>:
<input type="text" name"namabelakang"/>
</td>
</tr>
<tr>
<td id="label">
<label for="email">Email Anda</label>
</td>
<td colspan="3">:
<input type="text" name="email" id="email">
</td>
</tr>
<tr>
<td id="label">
<label for="re_email">Masukkan Ulang Email</label>
</td>
<td colspan="3">:
<input type="text" name="reemail" id="reemail">
</td>
</tr>
<tr>
<td id="label">
<label for="password">Kata Sandi Baru</label>
</td>
<td colspan="3">:
<input type="text" name="password" id="password">
</td>
</tr>
<tr>
<td id="label">
<label for="tgllahir">tanggal Lahir</label>
</td>
<td colspan="3">:
Tanggal
<select name="tgl">
<option value="">[Pilih]</option>
</select>
Bulan
<select name="bln">
<option value="">[Pilih]</option>
</select>
Tahun
<select name="thn">
<option value="">[Pilih]</option>
</select>
</td>
</tr>
<tr>
<td id="label"><label for="jk">Jenis Kelamin</label></td>
<td colspan="3">:
<input type="radio" name="jk" value="perempuan">Perempuan
<input type="radio" name="jk" value="laki-laki">Laki-Laki
</td>
</tr>
</table>
<p style="font-weight:normal;">
<input type="checkbox" name="rule" value="agree">dengan mengklik mendaftar, Anda menyetujui <span>ketentuan</span>kami dan bahwa Anda telah membaca <span>Kebijakan</span>Penggunaan DAta, termasuk <span>Penggunaan Cookie</span>
</p>
</content>
<footer>
<input type="button" value="Mendaftar"/>
<input type="reset"/>
</form>
</body>
</html>
|
|
CSS :
body {
width: 600px;
margin: 0 auto;
}
form {
background-color: #C4E1FF;
}
#heading {
height: 30px;
font-weight: bold;
color: #ffffff;
background-color: #3300FF;
text-align: center;
padding-top: 5px;
}
p{
font-weight: bolder;
margin-left: 10px;
}
footer {
background-color: #3300FF;
text-align: center;
paddding-top: 10px;
height: 35px;
}
table {
margin-left: 10px;
}td#label {
width: 105px;
}#email, #reemail, #password {
width: 410px;
}span {
color: blue;
}
|
This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
0 comments:
Post a Comment