Membuat Form Pendaftaran

Kali ini ane akan share kepada agan-agan yang dua buah form pendaftaran, ya semoga saja kebetulan agan-agan sedang mencari untuk menjadi bahan inspirasi desain untuk web/blog-nya. Dengan pengetahuan yang pas-pasan tentang koding HTML, CSS dan JS semoga saja tutorial ini tidak membuat agan-agan bingung, jika bingung silakan isi komentar bisa berupa pertanyaan, masukan atau kritikan untuk saling menutupi atas kekuarang dua form pendaftaran yang ane buat ini.

Form pendaftaran berikut ane buat menggunakan framework bootstrap, seperti yang ane bilang diatas dengan pengetahuan pas-pasan makanya ane menggunakan bootstrap untuk membuat form pendaftaran ini agar lebih mudah dan praktis, yang pasti kalau menggunakan bootstrap kita tidak repot-repot lagi membuat koding css dan javascript-nya karena css dan javascript sudah tersedian, bisa digunakan secara online atau offline dengan mendownload frameworknya disini.

Oke tanpa basa-basi lagi silakan dinikmati kayak kopi tutorial dibawah ini, bisa untuk dimodifikasi, bisa dicopy/paste langsung, atau sekedar dibaca tapi jangan lupa memberikan komentar heheheh....! maksa gan, biar kelihatan ramae..!

1. Form Pendaftaran dengan bentuk Horizontal, kenapa disebut horizonta ya? karena posisi kolom dan namanya terletak secara horizontal, nama kolomnya disebekah kiri dan kolomnya disebelah kanan, itu gan jawabannya, biasa tampilan form pendaftaran secara horizontal digunakan satu halaman penuh karena tampilannya yang melebar. Coba lihat gambar dibawah ini.

Untuk nama kolom dan kolom bisa agan modifikasi sesuai dengan kebutuhan, jangan sungkan-sungkan untuk memodifikasinya dan jangan takut salah, yang penting berkreasi betul..!(kata kiwil).

Kode HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign Up Horizontal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2" style="background-color:lavender;">
<br>
<h2>Form Sign Up Horizontal</h2>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Firs Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firs Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Last Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Username</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-6">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>

<div class="form-group">
<label for="comment" class="col-sm-2 control-label">Alamat</label>
<div class="col-sm-6">
<textarea class="form-control" rows="5" id="comment" placeholder="Jalan, RT/RW dan Kecamatan"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Provinsi</label>
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Provinsi<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">DKI Jakarta</a></li>
<li><a href="#">Jawa Barat</a></li>
<li><a href="#">Jawa Timur</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Negara</label>
<div class="col-sm-6">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Negara<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Indonesia</a></li>
<li><a href="#">Malaysia</a></li>
<li><a href="#">Singapura</a></li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Kode Post</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder="Kode Post">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Handphone</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputEmail3" placeholder="Handphone">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Captcha</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputEmail3" placeholder="Captcha">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Kebijakan & Persyaratan Pengguna
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary pull-right">Sign Up</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>

2. Form Pendaftaran Vertical, kenapa ya disebut vertikal..? hampir sama dengan jawaban form pendaftaran horizontal, karena posisi nama kolom dan kolom berada diposisi vertikal yaitu nama kolom diatas dan kolomnya dibawah jadi disebut vertikal, yang pasti kode html-nya ada sedikit berbeda gan dan agak simpel dari yang horizontal. Coba lihat gambar dibawah ini.

Sama seperti form pendaftaran horizontal, bisa dimodifikasi sesuai selera masing-masing.

Kode HTML:

<!DOCTYPE html>

<head>

<title>Sign Up Vertical</title>

</head>

<body>

<br>

<h2>Form Sign Up Vertical</h2>

</div>

</div>

<label for="inputEmail3">Username</label>

</div>

<label for="inputEmail3">Email</label>

</div>

<label for="inputPassword3">Password</label>

</div>

<label for="comment">Alamat</label>

</div>

<label for="inputEmail3">Provinsi</label>

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Provinsi<span class="caret"></span></button>

<li><a href="#">DKI Jakarta</a></li>

<li><a href="#">Jawa Barat</a></li>

<li><a href="#">Jawa Timur</a></li>

</ul>

</div>

<label for="inputEmail3">Negara</label>

<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Pilih Negara<span class="caret"></span></button>

<li><a href="#">Indonesia</a></li>

<li><a href="#">Malaysia</a></li>

<li><a href="#">Singapura</a></li>

</ul>

</div>

</div>

<label for="inputEmail3">Handphone</label>

</div>

<label for="inputEmail3">Captcha</label>

</div>

<label>

<input type="checkbox"> Kebijakan & Persyaratan Pengguna

</label>

</div>

</div>

</form>

</div>

</body>

</html>

Demikian gan dua buah form pendaftaran sederhana yang bisa agan-agan gunakan untuk referensi atau insfirasi pada desain template website atau blog-nya, dan jangan lula komentar-nya heheheheh....!

Jumat, 17 Juni 2016

Membuat Form Pendaftaran

post written by: Unknown

0 komentar:

Popular Posts

Pilihan Produk

Arsip Blog