By default jqForm class and jqForm Visual builder are designed so that they
are HTML5 ready.
Using HTML5 extend incredible the forms and make programming very easy.
One useful feature is so named placeholder.
Using this we can inform the user what for field is this and etc.
This is done just with setting placeholder attribute in the input field
<?php
require_once '../../../php/demo/tabs2.php';
?>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>jqForm PHP Demo</title>
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqform.css" />
<style type="text/css">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
/*overflow: hidden;*/ /* Remove scroll bars on browser window */
font-size: 90%;
}
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
}
.ui-input {padding :4px; margin: 1px;}
.ui-select {padding : 3px;}
.ui-textarea {padding: 3px;}
#notsupported { border: 0px none;}
</style>
<script src="../../../js/jquery.min.js" type="text/javascript"></script>
<script src="../../../js/jquery-ui.min.js" type="text/javascript"></script>
<script src="../../../js/jquery.form.js" type="text/javascript"></script>
<script src="../../../js/modernizr.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if(Modernizr.input.placeholder) {
jQuery("#supported").append("<div>Your browser support 'placeholder' input property!</div>");
} else {
jQuery("#notsupported").append("<div>Your browser does not support 'placeholder' input property!</div>").addClass('ui-state-error');
}
if(Modernizr.inputtypes.number) {
jQuery("#supported").append("<div>Your browser support input type: number!</div>");
} else {
jQuery("#notsupported").append("<div>Your browser does not support input type: number!</div>").addClass('ui-state-error');
}
});
</script>
</head>
<body>
<div style="margin-left:20px;margin-right: 20px;">
<?php include ("html5placeholder.php");?>
<div style="text-align: center;margin-top:10px;">This Form is created with HTML5 Guriddo Form PHP builder</div>
</div>
<br/>
<div id="supported"></div>
<div id="notsupported"></div>
<?php tabs(array("html5placeholder.php"));?>
</body>
</html>
html5placeholder.php.
<?php
// Include class
include_once '../jqformconfig.php';
include_once $CODE_PATH.'jqForm.php';
// Create instance
$newForm = new jqForm('newForm',array('method' => 'post', 'id' => 'newForm'));
// Demo Mode creating connection
include_once $DRIVER_PATH.'jqGridPdo.php';
$conn = new PDO(DB_DSN, DB_USER, DB_PASSWORD);
$newForm->setConnection( $conn );
// Set url
$newForm->setUrl($SERVER_HOST.$SELF_PATH.'html5placeholder.php');
// Set Form header
$formhead='Shipping Details';
$newForm->setFormHeader($formhead,'ui-icon-mail-closed');
// Set parameters
$jqformparams = array();
// Set SQL Command, table, keys
$newForm->table = 'orders';
$newForm->setPrimaryKeys('OrderID');
$newForm->serialKey = true;
// Set Form layout
$newForm->setColumnLayout('twocolumn');
$newForm->setTableStyles('width:100%;','','');
// Add elements
$newForm->addElement('OrderID','hidden', array('label' => 'OrderID', 'id' => 'newForm_OrderID'));
$newForm->addElement('ShipName','text', array('label' => 'Name', 'maxlength' => '40', 'placeholder' => 'Enter Ship name', 'style' => 'width:98%;', 'id' => 'newForm_ShipName'));
$newForm->addElement('ShipAddress','text', array('label' => 'Address', 'maxlength' => '60', 'size' => '40', 'placeholder' => 'Enter Ship Address', 'style' => 'width:98%;', 'id' => 'newForm_ShipAddress'));
$newForm->addElement('ShipCity','text', array('label' => 'City', 'maxlength' => '15', 'size' => '20', 'placeholder' => 'Enter Ship City', 'id' => 'newForm_ShipCity'));
$newForm->addElement('ShipPostalCode','text', array('label' => 'PostalCode', 'maxlength' => '10', 'size' => '20', 'id' => 'newForm_ShipPostalCode'));
$newForm->addElement('ShipCountry','text', array('label' => 'Country', 'maxlength' => '15', 'size' => '20', 'id' => 'newForm_ShipCountry'));
$newForm->addElement('Freight','number', array('label' => 'Freight', 'id' => 'newForm_Freight'));
$elem_8[]=$newForm->createElement('newSubmit','submit', array('value' => 'Submit'));
$newForm->addGroup("newGroup",$elem_8, array('style' => 'text-align:right;', 'id' => 'newForm_newGroup'));
// Add events
// Add ajax submit events
$newForm->setAjaxOptions( array('iframe' => false,
'forceSync' =>false) );
// Demo mode - no input
$newForm->demo = true;
// Render the form
echo $newForm->renderForm($jqformparams);
?>