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