Twitter Bootstrap is recommended CSS for basic HTML UI controls.
Below is sample code I used :
<?php echo $header; ?>
<div class="row">
<div class="col-md-9">
<h2 class="form-signin-heading" style="text-align:left;margin:20px">Please Register for Contributor account</h2><?php if ($error_warning) { ?>
<div class="warning" style="padding: 3px;"><?php echo $error_warning; ?></div>
<?php } ?>
<form role="form" action="<?php echo $action; ?>" method="post"
enctype="multipart/form-data" id="form">
<div class="row">
<div class="col-md-3"><label>First Name</label></div>
<div class="col-md-4"><input type="text" name="first_name"
class="form-control"
placeholder="First Name" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label>Last Name</label></div>
<div class="col-md-4"><input type="text" name="last_name"
class="form-control"
placeholder="Last Name" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label>User Id</label></div>
<div class="col-md-4"><input type="text" name="user_id"
class="form-control"
placeholder="User Id" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label>E-Mail Address:</label></div>
<div class="col-md-4"><input type="text" name="email"
class="form-control"
placeholder="E-mail address" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label> Password:</label></div>
<div class="col-md-4"><input type="password" name="password"
value="<?php echo $password; ?>" class="form-control"
placeholder="Password" required/></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label> Re-enter Password</label></div>
<div class="col-md-4"><input type="password2" name="password2"
value="<?php echo $password; ?>" class="form-control"
placeholder="Re-enter Password" required/></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3">
<button onclick="$('#form').submit(); return false;" href="#"
class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
</div>
</div>
<?php if ($redirect) { ?> <input type="hidden" name="redirect"
value="<?php echo $redirect; ?>" /> <?php } ?>
</form>
</div>
</div>
<script type="text/javascript"><!--
$('#form input').keydown(function(e) {
if (e.keyCode == 13) {
$('#form').submit();
}
});
//-->
$("#form").validate({
rules: {
email: {
required: true,
email: true,
remote: {
url: "<?php echo HTTP_SERVER."ajax/dup_user_id_check.php";?>",
type: "post"
}
}
},
messages: {
email: {
required: "Please Enter Email!",
email: "This is not a valid email!",
remote: "Email already in use!"
}
}
});
</script>
<?php echo $footer; ?>
Below is sample code I used :
<?php echo $header; ?>
<div class="row">
<div class="col-md-9">
<h2 class="form-signin-heading" style="text-align:left;margin:20px">Please Register for Contributor account</h2><?php if ($error_warning) { ?>
<div class="warning" style="padding: 3px;"><?php echo $error_warning; ?></div>
<?php } ?>
<form role="form" action="<?php echo $action; ?>" method="post"
enctype="multipart/form-data" id="form">
<div class="row">
<div class="col-md-3"><label>First Name</label></div>
<div class="col-md-4"><input type="text" name="first_name"
class="form-control"
placeholder="First Name" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label>Last Name</label></div>
<div class="col-md-4"><input type="text" name="last_name"
class="form-control"
placeholder="Last Name" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label>User Id</label></div>
<div class="col-md-4"><input type="text" name="user_id"
class="form-control"
placeholder="User Id" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label>E-Mail Address:</label></div>
<div class="col-md-4"><input type="text" name="email"
class="form-control"
placeholder="E-mail address" required autofocus /></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label> Password:</label></div>
<div class="col-md-4"><input type="password" name="password"
value="<?php echo $password; ?>" class="form-control"
placeholder="Password" required/></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3"><label> Re-enter Password</label></div>
<div class="col-md-4"><input type="password2" name="password2"
value="<?php echo $password; ?>" class="form-control"
placeholder="Re-enter Password" required/></div>
</div>
<div class="row" style="margin-top:10px">
<div class="col-md-3">
<button onclick="$('#form').submit(); return false;" href="#"
class="btn btn-lg btn-primary btn-block" type="submit">Register</button>
</div>
</div>
<?php if ($redirect) { ?> <input type="hidden" name="redirect"
value="<?php echo $redirect; ?>" /> <?php } ?>
</form>
</div>
</div>
<script type="text/javascript"><!--
$('#form input').keydown(function(e) {
if (e.keyCode == 13) {
$('#form').submit();
}
});
//-->
$("#form").validate({
rules: {
email: {
required: true,
email: true,
remote: {
url: "<?php echo HTTP_SERVER."ajax/dup_user_id_check.php";?>",
type: "post"
}
}
},
messages: {
email: {
required: "Please Enter Email!",
email: "This is not a valid email!",
remote: "Email already in use!"
}
}
});
</script>
<?php echo $footer; ?>
No comments:
Post a Comment