Membuat laman Login dan Pendaftaran bergaya Premium
Form Login dan Pendaftaran yang akan saya bagikan kali ini tidak kalah keren dari Form pendaftaran dengan Progresbar yang pernah saya bagikan sebelumnya. Bahkan, bisa di bilang Form ini lebih berkesan Premium.
Memang, Untuk kita yang blogging seperti ini, Kita tidak akan butuh form dalam bentuk apa pun. Yah mana mungkin kamu yang tengah merilis sebuah web khusus akan membutuhkannya.
Langsung saja ya, membuat tampilan form seperti yang akan saya bagikan kali ini kita butuh menggabungkan beberapa Script termasuk Jquery dan tentu saja CSS dan HTML agar tampilannya benar-benar sempurna.
Pada Demo di bawah, kamu tidak perlu mengisi kolom yang tersedia. Cukup klik pada tab SIG IN atau CREATE untuk melihat tampilannya.
Langsung saja,
Jquery
Jika sudah menggunakan Jquery, langkah ini bisa dilewati. Jika belum, kamu dapat menggunakannya melalui kode yang ada di bawah ini.
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">
Kode CSSnya
*,html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,label,fieldset,input,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul,li {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
a img {
border:none;
}
sup {
font-size:50%;
}
a,a:hover {
text-decoration:none;
}
body {
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-weight:300;
font-size:12px;
line-height:1.4em;
color:#3d3e41;
margin:50px 0;
}
.clearfix:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0;
}
* html .clearfix {
zoom:1;
}
*:first-child+html .clearfix {
zoom:1;
}
em {
color:#808286;
margin-bottom:20px;
display:block;
width:280px;
font-weight:300;
}
div#pageContainer {
width:850px;
margin:0 auto;
padding:1px;
border:1px solid #d7dadf;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
ul#tabs {
background-color:#3d3e41;
}
ul#tabs li {
padding:25px;
float:left;
}
ul#tabs li h1,ul#tabs li span {
margin-left:50px;
}
ul#tabs li h1 {
font-size:16px;
color:white;
text-transform:uppercase;
}
ul#tabs li span {
font-size:12px;
color:#8c8e95;
display:block;
margin-bottom:3px;
}
div.signInTabContent {
background:url("../img/signIn.png") left center no-repeat;
height:36px;
}
div.signUpTabContent {
background:url("../img/signUp.png") left center no-repeat;
height:36px;
}
ul#tabs li.activeTab {
position:relative;
float:left;
}
ul#tabs li.activeTab span.activeTabArrow {
position:absolute;
background:url("../img/Tab.png") center center no-repeat;
width:16px;
height:8px;
top:86px;
left:34px;
margin:0;
}
ul#tabs li.inactiveTab {
cursor:pointer;
border-left:1px solid #41b2f2;
float:right;
background:#67c5fb;
background:-moz-linear-gradient(left,#349bd7,#67c5fb 15%);
background:-webkit-gradient(linear,0 0,100% 0,from(#349bd7),color-stop(15%,#67c5fb));
}
ul#tabs li.inactiveTab:hover {
background:#7fcdf9;
background:-moz-linear-gradient(left,#3aaaea,#7fcdf9 15%);
background:-webkit-gradient(linear,0 0,100% 0,from(#3aaaea),color-stop(15%,#7fcdf9));
}
ul#tabs li.inactiveTab span {
color:#14567d;
}
ul#tabs li.inactiveTab span.activeTabArrow {
display:none;
}
div#signIn,div#signUp {
padding:50px 25px 30px 25px;
background:white;
background:-moz-linear-gradient(top,white,#f0f2f4 1px,white 50px);
background:-webkit-gradient(linear,0 0,0 50,from(white),color-stop(2%,#f0f2f4),to(white));
}
div#signIn form.cleanForm {
width:440px;
margin:0 auto;
}
div#signUp form.cleanForm {
width:500px;
float:left;
}
div#sidebar {
float:right;
padding:25px;
width:240px;
border:1px solid #eaedf1;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:inset 0 0 35px 5px #fafbfd;
-webkit-box-shadow:inset 0 0 35px 5px #fafbfd;
box-shadow:inset 0 0 35px 5px #fafbfd;
}
div#sidebar h3 {
font-weight:bold;
font-size:14px;
margin-bottom:20px;
}
div#sidebar ul li {
color:#808286;
background:url("../img/Point.png") left 3px no-repeat;
margin:0 0 10px 20px;
padding-left:15px;
}
form.cleanForm p {
margin-bottom:15px;
}
form.cleanForm div a {
color:#1271c1;
border-bottom:1px dotted #1271c1;
}
form.cleanForm div a:hover {
color:#3d3e41;
border-bottom:1px dotted #3d3e41;
}
input[type="text"],input[type="password"],input[type="email"],input[type="tel"] {
color:#787a7e;
font-size:18px;
padding:0 15px;
border:1px solid #d5d9de;
outline:none;
height:50px;
width:250px;
-moz-box-shadow:0 0 0 5px #faf9f9,inset 0 0 5px 5px #faf9f9;
-webkit-box-shadow:0 0 0 5px #faf9f9,inset 0 0 5px 5px #faf9f9;
box-shadow:0 0 0 5px #faf9f9,inset 0 0 5px 5px #faf9f9;
}
input[type="submit"] {
border:1px solid #39adf0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:#6ac7fc;
background:url("../img/submit.png") 88% center no-repeat,-moz-linear-gradient(top,#6ac7fc,#39adf0);
background:url("../img/submit.png") 88% center no-repeat,-webkit-gradient(linear,0 0,0 100%,from(#6ac7fc),to(#39adf0));
color:white;
font-size:14px;
text-transform:uppercase;
font-weight:bold;
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
text-shadow:1px 1px 0 #7a7a7a;
padding:12px 45px 12px 15px;
cursor:pointer;
}
input[type="submit"]:hover {
background:#70d2fd;
background:url("../img/submit.png") 88% center no-repeat,-moz-linear-gradient(top,#70d2fd,#3cb9f5);
background:url("../img/submit.png") 88% center no-repeat,-webkit-gradient(linear,0 0,0 100%,from(#70d2fd),to(#3cb9f5));
}
input[type="text"]:hover,input[type="text"]:focus,input[type="password"]:hover,input[type="password"]:focus,input[type="email"]:hover,input[type="email"]:focus,input[type="tel"]:hover,input[type="tel"]:focus {
border:1px solid #c1c5ca;
}
form.cleanForm p label {
font-weight:bold;
font-size:14px;
display:block;
float:left;
width:130px;
height:55px;
line-height:55px;
margin-right:20px;
text-align:right;
}
form.cleanForm p em {
margin-top:15px;
}
form.cleanForm span.requiredField {
font-size:14px;
color:#ff0000;
}
div.formExtra,
div.distanceLeft input[type="checkbox"],
input[type="submit"],
em {
margin-left:145px;
}
div.distanceLeft {
margin:25px 0 20px 0;
}
div.distanceLeft label {
padding-left:5px;
}
div#signUp {
display:none;
}
div#signUp form.cleanForm p label {
width:150px;
}
div#signUp div.distanceLeft input[type="checkbox"],div#signUp input[type="submit"],div#signUp em,div#signUp div.formExtra {
margin-left:165px;
}
div.formExtra {
border-top:1px solid #eeeded;
margin-top:20px;
padding-top:20px;
}
div#signUp form.cleanForm input.valid {
background:url("../img/Ok.png") 245px center no-repeat;
}
div#signUp form.cleanForm input.error {
background:url("../img/Error.png") 245px center no-repeat;
border:1px solid #f37f69;
-moz-box-shadow:0 0 0 5px #f6cec7,inset 0 0 5px 5px #faf9f9;
-webkit-box-shadow:0 0 0 5px #f6cec7,inset 0 0 5px 5px #faf9f9;
box-shadow:0 0 0 5px #f6cec7,inset 0 0 5px 5px #faf9f9;
}
div#signUp form.cleanForm input.error + em {
color:red;
}
Kamu bisa melihat, pada bagian-bagian tertentu dalam kode CSS ada url gambar yang masih belum lengkap. Contoh "../img/submit.png". Nah untuk melengkapi ke semua url dari gambar yang belum lengkap tersebut, Kamu dapat mendownload semua file gambarnya Di sini.
Jika selesai, upload semua file dan ambil url masing-masing gambarnya dan ganti url gambar yang belum lengkap tersebut.
Kode Scriptnya
$(document).ready(function() {
daftar.setup($("div#signUp form"));
$('ul#tabs li').click(function() {
if($(this).attr("class") == "inactiveTab") {
$(this).addClass('activeTab').removeClass('inactiveTab');
$(this).siblings('.activeTab').removeClass('activeTab').addClass('inactiveTab');
$(this).prev().css("float", "left");
$("div.toggleTab").slideToggle("fast", function() {
$("div.toggleTab input:visible").first().focus();
});
}
});
});
var daftar = daftar || {};
(function(d){
var field = d.createElement("input"),
emailPatt = new RegExp("([a-z0-9_.-]+)@([0-9a-z.-]+).([a-z.]{2,6})","i"),
urlPatt = new RegExp("^http:\/\/","i"),
usrPatt, curEvt, args;
daftar.setup = function(form,settings) {
var isCollection = !form.nodeType || false;
var opts = {
validClass : "valid",
invalidClass : "error",
requiredClass : "required"
};
if(typeof settings === "object") {
for (var i in opts) {
if(typeof settings[i] === "undefined") { settings[i] = opts[i]; }
}
}
args = settings || opts;
if(isCollection) {
for(var k=0,len=form.length;k<len;k++) {
daftar.validation(form[k]);
}
} else {
daftar.validation(form);
}
};
daftar.validation = function(form) {
var f = form.elements,
flen = f.length,
isRequired;
daftar.listen(form,"invalid",daftar.checkField,true);
daftar.listen(form,"blur",daftar.checkField,true);
daftar.listen(form,"input",daftar.checkField,true);
daftar.listen(form,"focus",daftar.checkField,true);
if(!daftar.support()) {
form.checkValidity = function(e,f) { daftar.checkValidity("",form); };
while(flen--) {
isRequired = !!(f[flen].attributes["required"]);
if(f[flen].nodeName !== "FIELDSET" && isRequired) {
daftar.validity(f[flen]);
}
}
}
};
daftar.validity = function(el) {
var elem = el,
missing = daftar.valueMissing(elem),
type = elem.getAttribute("type"),
pattern = elem.getAttribute("pattern"),
placeholder = elem.getAttribute("placeholder"),
isType = /^(email|url|password)$/i,
fType = ((isType.test(type)) ? type : ((pattern) ? pattern : false)),
patt = daftar.pattern(elem,fType),
step = daftar.range(elem,"step"),
min = daftar.range(elem,"min"),
max = daftar.range(elem,"max");
elem.validity = {
patternMismatch: patt,
rangeOverflow: max,
rangeUnderflow: min,
stepMismatch: step,
valid: (!missing && !patt && !step && !min && !max),
valueMissing: missing
};
if(placeholder && curEvt !== "input") { daftar.placeholder(elem); }
elem.checkValidity = function(e,el) { daftar.checkValidity(e,elem); };
};
daftar.checkField = function (e) {
var el = daftar.getTarget(e) || e,
events = /^(input|focusin|focus)$/i;
curEvt = e.type;
if(!daftar.support()) { daftar.validity(el); }
if(el.validity.valid) {
daftar.removeClass(el,args.invalidClass);
daftar.removeClass(el,args.requiredClass);
daftar.addClass(el,args.validClass);
} else if(!events.test(curEvt)) {
if(el.validity.valueMissing) {
daftar.removeClass(el,args.invalidClass);
daftar.removeClass(el,args.validClass);
daftar.addClass(el,args.requiredClass);
} else {
daftar.removeClass(el,args.validClass);
daftar.removeClass(el,args.requiredClass);
daftar.addClass(el,args.invalidClass);
}
} else if(el.validity.valueMissing) {
daftar.removeClass(el,args.requiredClass);
daftar.removeClass(el,args.invalidClass);
daftar.removeClass(el,args.validClass);
}
};
daftar.checkValidity = function (e,el) {
var f, ff, isRequired, invalid = false;
if(el.nodeName === "FORM") {
f = el.elements;
for(var i = 0,len = f.length;i < len;i++) {
ff = f[i];
isRequired = !!(ff.attributes["required"]);
if(ff.nodeName !== "FIELDSET" && isRequired) {
daftar.checkField(ff);
if(!ff.validity.valid && !invalid) {
ff.focus();
invalid = true;
}
}
}
} else {
daftar.checkField(el);
return el.validity.valid;
}
};
daftar.support = function() {
return (daftar.isHostMethod(field,"validity") && daftar.isHostMethod(field,"checkValidity"));
};
daftar.pattern = function(el, type) {
if(type === "email") {
return !emailPatt.test(el.value);
} else if(type === "url") {
return !urlPatt.test(el.value);
} else if(!type || type === "password") {
return false;
} else {
usrPatt = new RegExp(type);
return !usrPatt.test(el.value);
}
};
daftar.placeholder = function(el) {
var placeholder = el.getAttribute("placeholder"),
focus = /^(focus|focusin)$/i,
node = /^(input|textarea)$/i,
isNative = !!("placeholder" in field);
if(!isNative && node.test(el.nodeName)) {
if(el.value === "") {
el.value = placeholder;
} else if(el.value === placeholder && focus.test(curEvt)) {
el.value = "";
}
}
};
daftar.range = function(el,type) {
var min = parseInt(el.getAttribute("min"),10) || 0,
max = parseInt(el.getAttribute("max"),10) || false,
step = parseInt(el.getAttribute("step"),10) || 1,
val = parseInt(el.value,10),
mismatch = (val-min)%step;
if(!daftar.valueMissing(el) && !isNaN(val)) {
if(type === "step") {
return (el.getAttribute("step")) ? (mismatch !== 0) : false;
} else if(type === "min") {
return (el.getAttribute("min")) ? (val < min) : false;
} else if(type === "max") {
return (el.getAttribute("max")) ? (val > max) : false;
}
} else if(el.getAttribute("type") === "number") {
return true;
} else {
return false;
}
};
daftar.required = function(el) {
var required = !!(el.attributes["required"]);
return (required) ? daftar.valueMissing(el) : false;
};
daftar.valueMissing = function(el) {
var placeholder = el.getAttribute("placeholder");
return !!(el.value === "" || el.value === placeholder);
};
daftar.listen = function (node,type,fn,capture) {
if(daftar.isHostMethod(window,"addEventListener")) {
node.addEventListener( type, fn, capture );
} else if(daftar.isHostMethod(window,"attachEvent") && typeof window.event !== "undefined") {
if(type === "blur") {
type = "focusout";
} else if(type === "focus") {
type = "focusin";
}
node.attachEvent( "on" + type, fn );
}
};
daftar.preventActions = function (evt) {
evt = evt || window.event;
if(evt.stopPropagation && evt.preventDefault) {
evt.stopPropagation();
evt.preventDefault();
} else {
evt.cancelBubble = true;
evt.returnValue = false;
}
};
daftar.getTarget = function (evt) {
evt = evt || window.event;
return evt.target || evt.srcElement;
};
daftar.addClass = function (e,c) {
var re;
if (!e.className) {
e.className = c;
}
else {
re = new RegExp('(^|\\s)' + c + '(\\s|$)');
if (!re.test(e.className)) { e.className += ' ' + c; }
}
};
daftar.removeClass = function (e,c) {
var re, m;
if (e.className) {
if (e.className == c) {
e.className = '';
}
else {
re = new RegExp('(^|\\s)' + c + '(\\s|$)');
m = e.className.match(re);
if (m && m.length == 3) { e.className = e.className.replace(re, (m[1] && m[2])?' ':''); }
}
}
};
daftar.isHostMethod = function(o, m) {
var t = typeof o[m], reFeaturedMethod = new RegExp('^function|object$', 'i');
return !!((reFeaturedMethod.test(t) && o[m]) || t == 'unknown');
};
})(document);
Kode HTMLnya
<div id="pageContainer">
<ul id="tabs" class="clearfix">
<li class="activeTab" id="signInTab">
<div class="signInTabContent">
<span>Already a member?</span>
<h1>Sign in below</h1>
</div>
<span class="activeTabArrow"></span>
</li>
<li class="inactiveTab" id="signUpTab">
<div class="signUpTabContent">
<span>Don't have an account?</span>
<h1>Create one now</h1>
</div>
<span class="activeTabArrow"></span>
</li>
</ul>
<div id="signIn" class="toggleTab">
<form action="#" method="POST" class="cleanForm">
<fieldset>
<p>
<label for="login-username">Your Username:</label>
<input type="text" id="login-username" name="login-username" value="" autofocus required />
</p>
<p>
<label for="login-password">Your Password:</label>
<input type="password" id="login-password" name="login-password" value="" required />
</p>
<div class="distanceLeft">
<input type="checkbox" id="remember-me" name="remember-me" />
<label for="remember-me">Remember me on this computer</label>
</div>
<input type="submit" value="Sign In" />
<div class="formExtra">
<p><strong>Trouble signing in?</strong></p>
<p><a href="#">Recover your password</a> or <a href="#">Create an account</a></p>
</div>
</fieldset>
</form>
</div>
<div id="signUp" class="clearfix toggleTab">
<form action="#" method="POST" class="cleanForm" id="signUpForm">
<fieldset>
<p>
<label for="full-name">Full Name: <span class="requiredField">*</span></label>
<input type="text" id="full-name" name="full-name" value="" autofocus required />
<em>Enter your full name.</em>
</p>
<p>
<label for="username">Username: <span class="requiredField">*</span></label>
<input type="text" id="username" name="username" pattern="^[a-z0-9_-]{3,20}$" value="" required />
<em>Between 3 and 20 characters, letters or numbers.</em>
</p>
<p>
<label for="password">Password: <span class="requiredField">*</span></label>
<input type="password" id="password" name="password" value="" pattern="^[a-zA-Z0-9]{6,12}$" required />
<em>Between 6 and 12 characters, alphanumeric only.</em>
</p>
<p>
<label for="email">Email Address: <span class="requiredField">*</span></label>
<input type="email" id="email" name="email" value="" required />
<em>Must be a valid email address. E.g. email@gmail.com</em>
</p>
<p>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" value="" pattern="^[0-9-]{10,}$" />
<em>10 or more characters, numbers and dashes only. E.g. 1-800-1111</em>
</p>
<div class="distanceLeft">
<input type="checkbox" id="terms" name="terms" />
<label for="terms">I have read and agree to the <a href="#">Terms of Service</a>.</label>
</div>
<input type="submit" value="Register" />
<div class="formExtra">
<p><strong>Note: </strong> Fields marked with <span class="requiredField">*</span> are required.</p>
</div>
</fieldset>
</form>
<div id="sidebar">
<h3>Benefits for signing up</h3>
<ul>
<li>24/7 support from our team</li>
<li>Another great benefit</li>
<li>We're in the cloud, so accessing your data will be 10x faster</li>
<li>We use the latest technology on the market today</li>
</ul>
</div>
</div>
</div>
Jangan lupa untuk mengganti "#" pada kode HTML di atas dengan url yang kamu inginkan.
Hasilnya sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.