Form Design

Form Dessign through Bootstrap

by Swapnil Dubey

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="panel panel-primary">
  <div class="panel-heading text-center">
    <font size="2"><strong>Dashboard Pages Search </strong></font>
  </div>
  <div class="panel-body">
    <div class="form-group pt-20" style="">
      <div class="row">
        <div class="col-xs-1">
          Page Name
        </div>
        <div class="col-xs-2">
          <input type="text" name="roleName" id="roleName" maxlength="100" class="form-control" onblur="chkUniq();" onkeypress=" if (event.keyCode == 13) if(!chkUniq()){ return event.keyCode != 13}" align="center">
        </div>
        <div class="col-xs-1">
          Description
        </div>
        <div class="col-xs-2">
          <input type="text" class="form-control" id="roleDesc" onkeyup="chkMaxLen();" onchange="chkMaxLenPaste()">
        </div>
        <div class="col-xs-1">
          Created By
        </div>
        <div class="col-xs-2">
          <input type="text" name="roleName" id="roleName" maxlength="100" class="form-control" onblur="chkUniq();" onkeypress=" if (event.keyCode == 13) if(!chkUniq()){ return event.keyCode != 13}" align="center">
        </div>
        
        <div class="col-xs-2">
        
        OR  Free Text
        </div>
        <div class="col-xs-1">
          <input type="text" class="form-control" id="roleDesc" onkeyup="chkMaxLen();" onchange="chkMaxLenPaste()">
        </div>
      </div>
    </div>
    <div class="form-group text-center">
      <div class="row">

        <div class="col-xs-12">
          <input type="button" name="btnConsult" id="btnConsult" value="Search" class="btn btn-success btn-sm" />

        </div>
      </div>

    </div>