Home  • Online Tips • VCampus Help

VCampus CSS Framework - Layout and Form design

Top part of the form

<?php
  //super globals
  
 /*Data validation conventions
   Example: Here two fields: $blood_group,$first_name validation process.*/

   $error=array();

     if($blood_group==""){
		$err.="Please select blood group";
		$error["blood_group"]="Please select blood group";	
      }	
	
	if(!preg_match("/^[A-Za-z. ]{2,}$/",$first_name)){
		$err.="Invalid first name";
		$error["first_name"]="Invalid first name";	
	}
 
  //Data process convention
  if(count($error)==0){
     //Data process here: process could be CRUD activities or file operations.
  }

?>

<?php
 include("css_responsive.php");
?>

Two column layout syntax

<div class="row clearfix"> 
  <div class="colgroup colgroup1"> 

   
     <div class="col col1">  
          <div class="section_wrapper">
                 <?php include("col1.php")?> 
         </div> <!--end section_wrapper-->
     </div><!--end col1-->

     
     <div class="col col2">
      <div class="section_wrapper"> 
         <div class="section"> 
        
            <!--form design goes here-->

         </div> <!--end section-->
      </div> <!--end section_wrapper-->
     </div><!--end col2-->
   

  <div><!--end colgroup1-->
</div> <!--end row-->

Form Design

<form method="post" action="<?php echo $self_action;?>" class="form-wrapper" name="frmName" id="frmName">

      <div class="form-header">
	 <?php 			
		  echo MENU_OPTION_NAME;
	  ?>
       </div> 
         <?php
		if(isset($msg)){
		  echo "<div class='form-feedback'>$msg</div>";
		}
	 ?>

       
       <div class="form-row clearfix">
            
            <div class="form-label">Person Type *</div>
            
            <div class="form-element-wrap">
                 <div class='form-element'> 
                     <!--from element goes here-->
                       <input title="Enter Valid Name" type="text" name="txtFirstName" value="<?php echo isset($first_name)?$first_name:""?>" required="required" pattern="[a-zA-Z.]{2,}" />
                     
                 </div><!--end form-element-->
                 <div class="form-element-error">
                    <?php 
                        echo isset($error["first_name"])?$error["first_name"]:"";
                      ?>
                 </div>      

            </div> <!--end form-element-wrap-->

       </div> <!--end row-->
       ...
       ...
       
      <footer class="form-footer"></footer> 
</form>

Comments 0


Share

Copyright © 2024. Powered by Intellect Software Ltd