HTML5 extends the input fields with 13 new types.
Here we use some of them.
<?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.pattern) {
jQuery("#supported").append("<div>Your browser support 'pattern' input property!</div>");
} else {
jQuery("#notsupported").append("<div>Your browser does not support 'pattern' input property!</div>").addClass('ui-state-error');
}
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');
}
if(Modernizr.inputtypes.email) {
jQuery("#supported").append("<div>Your browser support input type: email!</div>");
} else {
jQuery("#notsupported").append("<div>Your browser does not support input type: email!</div>").addClass('ui-state-error');
}
if(Modernizr.inputtypes.url) {
jQuery("#supported").append("<div>Your browser support input type: url!</div>");
} else {
jQuery("#notsupported").append("<div>Your browser does not support input type: url!</div>").addClass('ui-state-error');
}
});
</script>
</head>
<body>
<div style="margin-left:20px;margin-right: 20px;">
<?php include ("html5types.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("html5types.php"));?>
</body>
</html>
html5types.php.
<?php
// Include class
include_once '../jqformconfig.php';
include_once $CODE_PATH.'jqForm.php';
// Create instance
$newForm = new jqForm('newForm',array('enctype' => 'multipart/form-data', '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.'html5types.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', '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', 'pattern' => '^[\d]{5}(-[\d]{4})?$', 'placeholder' => 'Enter 5 or 9 digit postal code', 'title' => 'Enter valid postal code', 'id' => 'newForm_ShipPostalCode'));
$newForm->addElement('ShipCountry','text', array('label' => 'Country', 'maxlength' => '15', 'size' => '20', 'id' => 'newForm_ShipCountry'));
$newForm->addElement('Freight','number', array('label' => 'Freight', 'min' => '0.1', 'max' => '40', 'step' => '0.5', 'id' => 'newForm_Freight'));
$newForm->addElement('email','email', array('label' => 'Email ', 'style' => 'width:98%;', 'id' => 'newForm_email'));
$newForm->addElement('url','url', array('label' => 'Company Url', 'style' => 'width:98%;', 'id' => 'newForm_url'));
$elem_10[]=$newForm->createElement('newSubmit','submit', array('value' => 'Submit'));
$newForm->addGroup("newGroup",$elem_10, array('style' => 'text-align:right;', 'id' => 'newForm_newGroup'));
// Add events
// Add ajax submit events
$newForm->setAjaxOptions( array('dataType'=>'html',
'resetForm' =>null,
'clearForm' => null,
'iframe' => false,
'forceSync' =>false) );
// Demo mode - no input
$newForm->demo = true;
// Render the form
echo $newForm->renderForm($jqformparams);
?>