Transition to HTML 5


HTML 5 forms allow a much improved user experience without the overhead associated with downloads of large chunks of javascript as the functionality is now built into modern browsers. Much of the validation that is performed at the server can be done on in the browser now directly significantly improving the user experience.

What to Do?


Existing forms need to be modified to take advantage of the new input types - changing <input type="text" > tags to <input type= :

number
tel
url
email

with placeholder and required attributes as necessary.

e.g.
echo '<input type="tel" name="PhoneNo" required="required" placeholder="' . _('Customer telephone number') . '" title="' . _('Enter the customer telephone number') . '" />';



input type="number" also need to have appropriate min="x" and max="y" and step.

Note that step is particularly important as the default step is 1 and where we need to put in a number with 2 decimal places we need to enter a step="0.01" or 10 to the power of negative 2
expressed in php as:

pow(10,-2);

So for a number with 2 decimal places we need to enter the following:
 (php)
echo '<input type="number" step="' . pow(10,-2) . '" name="SomeNumberWith2DeciamlPlaces" />


more commonly the number of decimal places will be one of

$_SESSION['CurrDeciamlPlaces'] - where the number is in the home currency
The number of decimal places that the stock item is held to when entering a quantity
The number of decimal places of the customer's currency when entering an FX price


After researching <input type="number" it is clear we have an issue with decimal points and thousands separators which are not handled that well in different browsers and if we wish to retain this nice feature we need to just use

<input type="text" pattern="[0-9,\.]*" class="number" name="SomeNumber" />



All number fields should also be members of the class="number" so our javascript prevents text input too as the html5 allows the numbers to be typed but shows a message once the error has occurred. I really not sure there is much benefit in adding the pattern for numbers given we are already trapping them with Tim's javascript.

The pattern can also be used to add checking for the dodgy characters by restricting to pattern="[a-zA-Z0-9_]*" handy for supplier item, customer codes.

Also all input elements need to have title attributes - defined using gettext strings to set spelling out exactly what is required in the field.

The field that should have the focus on the form needs to have the autofocus attribute set too - with

autofocus="autofocus"


Example: Areas.php

change
<td><input tabindex="1" ' . (in_array('AreaCode',$Errors) ? 'class="inputerror"' : '' ) .' type="text" name="AreaCode" value="' . $_POST['AreaCode'] . '" size="3" maxlength="3" /></td>
<td><input tabindex="2" ' . (in_array('AreaDescription',$Errors) ?  'class="inputerror"' : '' ) .'  type="text" name="AreaDescription" value="' . $_POST['AreaDescription'] .'" size="26" maxlength="25" /></td>


to

<td><input tabindex="1" ' . (in_array('AreaCode',$Errors) ? 'class="inputerror"' : '' ) .' type="text" name="AreaCode" required="required" autofocus="autofocus" value="' . $_POST['AreaCode'] . '" size="3" maxlength="3" title="' . _('Enter the sales area code - up to 3 characters are allowed') . '" /></td>
<td><input tabindex="2" ' . (in_array('AreaDescription',$Errors) ?  'class="inputerror"' : '' ) .'  type="text" required="required" name="AreaDescription" value="' . $_POST['AreaDescription'] .'" size="26" maxlength="25" title="' . _('Enter the description of the sales area') . '" /></td>



Improvements to Tim's javascript file

I like this because it is small 12kb and efficient and we are not stuck with 200k of redundant javascript - as we are with jQuery. The snag with it though is that it is only English messages from the javascript

1. It now allows a new class "integer" so we should use that where possible too - this only allows positive integers so quite useful.

2. sortTable functions now sorts tables by column - need to add
<th class="SortableColumn" onclick="SortSelect(this)">

for those columns that need to be sortable

and the style sheets need to have a class style for "SortableColumn"

th.SortableColumn {
cursor: s-resize;
}

I think the style needs some embellishing here though

Using this combination of html5, titles and bits of Tim's nice javascript file for number/integer and table sorting should give us a large leap in usability.


Scripts to Modify

AccountGroups.php
AccountSections.php
AddCustomerContacts.php
AddCustomerNotes.php
AddCustomerTypeNotes.php
AgedDebtors.php
AgedSuppliers.php
Areas.php
AuditTrail.php
BackupDatabase.php
BankAccounts.php
BankMatching.php
BankReconciliation.php
BOMExtendedQty.php
BOMIndented.php
BOMIndentedReverse.php
BOMInquiry.php
BOMListing.php
BOMs.php
COGSGLPostings.php
CompanyPreferences.php
ConfirmDispatchControlled_Invoice.php
ConfirmDispatch_Invoice.php
ContractBOM.php
ContractCosting.php
ContractOtherReqts.php
Contracts.php
CopyBOM.php
CounterReturns.php
CounterSales.php
Credit_Invoice.php
CreditItemsControlled.php
CreditStatus.php
Currencies.php
CustEDISetup.php
CustLoginSetup.php
CustomerAllocations.php
CustomerBranches.php
CustomerInquiry.php
CustomerPurchases.php
CustomerReceipt.php
Customers.php
CustomerTransInquiry.php
CustomerTypes.php
CustWhereAlloc.php
DailyBankTransactions.php
DailySalesInquiry.php
DebtorsAtPeriodEnd.php
DeliveryDetails.php
Departments.php
DiscountCategories.php
DiscountMatrix.php
EDIMessageFormat.php
EDIProcessOrders.php
EDISendInvoices.php
EDISendInvoices_Reece.php
EmailConfirmation.php
EmailCustTrans.php
ExchangeRateTrend.php
Factors.php
FixedAssetCategories.php
FixedAssetDepreciation.php
FixedAssetItems.php
FixedAssetLocations.php
FixedAssetRegister.php
FixedAssetTransfer.php
FormDesigner.php
FreightCosts.php
FTP_RadioBeacon.php
geocode_genxml_customers.php
geocode_genxml_suppliers.php
geocode.php
GeocodeSetup.php
geo_displaymap_customers.php
geo_displaymap_suppliers.php
GetStockImage.php
GLAccountCSV.php
GLAccountInquiry.php
GLAccountReport.php
GLAccounts.php
GLBalanceSheet.php
GLBudgets.php
GLCodesInquiry.php
GLJournalInquiry.php
GLJournal.php
GLProfit_Loss.php
GLTagProfit_Loss.php
GLTags.php
GLTransInquiry.php
GLTrialBalance_csv.php
GLTrialBalance.php
GoodsReceivedControlled.php
GoodsReceived.php
ImportBankTransAnalysis.php
ImportBankTrans.php
index.php
InternalStockCategoriesByRole.php
InternalStockRequestAuthorisation.php
InternalStockRequestFulfill.php
InternalStockRequest.php
InventoryPlanning.php
InventoryPlanningPrefSupplier.php
InventoryQuantities.php
InventoryValuation.php
Labels.php
Locations.php
Logout.php
MailingGroupMaintenance.php
MailInventoryValuation.php
MailSalesReport_csv.php
MailSalesReport.php
MaintenanceReminders.php
MaintenanceTasks.php
MaintenanceUserSchedule.php
Manufacturers.php
MaterialsNotUsed.php
MRPCalendar.php
MRPCreateDemands.php
MRPDemands.php
MRPDemandTypes.php
MRP.php
MRPPlannedPurchaseOrders.php
MRPPlannedWorkOrders.php
MRPReport.php
MRPReschedules.php
MRPShortages.php
NoSalesItems.php
OffersReceived.php
OrderDetails.php
OutstandingGRNs.php
PageSecurity.php
PaymentAllocations.php
PaymentMethods.php
Payments.php
PaymentTerms.php
PcAssignCashToTab.php
PcAuthorizeExpenses.php
PcClaimExpensesFromTab.php
PcExpenses.php
PcExpensesTypeTab.php
PcReportTab.php
PcTabs.php
PcTypeTabs.php
PDFBankingSummary.php
PDFChequeListing.php
PDFCustomerList.php
PDFCustTransListing.php
PDFDeliveryDifferences.php
PDFDIFOT.php
PDFGLJournal.php
PDFGrn.php
PDFLowGP.php
PDFOrdersInvoiced.php
PDFOrderStatus.php
PDFPeriodStockTransListing.php
PDFPickingList.php
PDFPriceList.php
PDFPrintLabel.php
PDFQuotation.php
PDFQuotationPortrait.php
PDFReceipt.php
PDFRemittanceAdvice.php
PDFSellThroughSupportClaim.php
PDFStockCheckComparison.php
PDFStockLocTransfer.php
PDFStockNegatives.php
PDFStockTransfer.php
PDFSuppTransListing.php
PDFTopItems.php
PeriodsInquiry.php
PO_AuthorisationLevels.php
PO_AuthoriseMyOrders.php
PO_Chk_ShiptRef_JobRef.php
PO_Header.php
PO_Items.php
PO_OrderDetails.php
PO_PDFPurchOrder.php
POReport.php
PO_SelectOSPurchOrder.php
PO_SelectPurchOrder.php
PricesBasedOnMarkUp.php
PricesByCost.php
Prices_Customer.php
Prices.php
PrintCheque.php
PrintCustOrder_generic.php
PrintCustOrder.php
PrintCustStatements.php
PrintCustTrans.php
PrintCustTransPortrait.php
PurchData.php
RecurringSalesOrders.php
RecurringSalesOrdersProcess.php
ReorderLevelLocation.php
ReorderLevel.php
report_runner.php
ReprintGRN.php
ReverseGRN.php
SalesAnalReptCols.php
SalesAnalRepts.php
SalesAnalysis_UserDefined.php
SalesByTypePeriodInquiry.php
SalesCategories.php
SalesCategoryDescriptions.php
SalesCategoryPeriodInquiry.php
SalesGLPostings.php
SalesGraph.php
SalesInquiry.php
SalesPeople.php
SalesTopItemsInquiry.php
SalesTypes.php
SecurityTokens.php
SelectAsset.php
SelectCompletedOrder.php
SelectContract.php
SelectCreditItems.php
SelectCustomer.php
SelectGLAccount.php
SelectOrderItems.php
SelectProduct.php
SelectRecurringSalesOrder.php
SelectSalesOrder.php
SelectSupplier.php
SelectWorkOrder.php
SellThroughSupport.php
ShipmentCosting.php
Shipments.php
Shippers.php
Shipt_Select.php
ShiptsList.php
ShopParameters.php
SMTPServer.php
SpecialOrder.php
StockAdjustmentsControlled.php
StockAdjustments.php
StockCategories.php
StockCheck.php
StockCostUpdate.php
StockCounts.php
StockDispatch.php
StockLocMovements.php
StockLocStatus.php
StockLocTransfer.php
StockLocTransferReceive.php
StockMovements.php
StockQties_csv.php
StockQuantityByDate.php
StockReorderLevel.php
StockSerialItemResearch.php
StockSerialItems.php
Stocks.php
StockStatus.php
StockTransferControlled.php
StockTransfers.php
StockUsageGraph.php
StockUsage.php
SuppContractChgs.php
SuppCreditGRNs.php
SuppFixedAssetChgs.php
SuppInvGRNs.php
SupplierAllocations.php
SupplierBalsAtPeriodEnd.php
SupplierContacts.php
SupplierCredit.php
SupplierInquiry.php
SupplierInvoice.php
SupplierPriceList.php
Suppliers.php
SupplierTenderCreate.php
SupplierTenders.php
SupplierTransInquiry.php
SupplierTypes.php
SuppLoginSetup.php
SuppPaymentRun.php
SuppPriceList.php
SuppShiptChgs.php
SuppTransGLAnalysis.php
svn-commit.tmp
SystemParameters.php
TaxAuthorities.php
TaxAuthorityRates.php
TaxCategories.php
TaxGroups.php
Tax.php
TaxProvinces.php
TopItems.php
TopItems.php.edited
UnitsOfMeasure.php
UpgradeDatabase.php
UserSettings.php
WhereUsedInquiry.php
WorkCentres.php
WorkOrderCosting.php
WorkOrderEntry.php
WorkOrderIssue.php
WorkOrderReceive.php
WorkOrderStatus.php
WOSerialNos.php
WWW_Access.php
WWW_Users.php
Valid XHTML :: Valid CSS: :: Powered by WikkaWiki