Sunday, January 5, 2014

Twitter Bootstrap: Sample code using it

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; ?>

No comments:

Post a Comment