Demo - Accessible Forms

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h3>
    Accessible Forms
  </h3>

  <h4>
    Version 1: Plain HTML Elements
  </h4>
  <form class="form-horizontal">
    <div class="form-group">
      <label for="orderid" class="col-sm-2 control-label">Order ID:</label>
      <div class="col-sm-10">
        <input id="orderid" class="form-control" value="000012" readonly>
      </div>
    </div>
    <div class="form-group">
      <label for="customer" class="col-sm-2 control-label">Customer:</label>
      <div class="col-sm-10">
        <select id="customer" class="form-control">
          <option value="0">Alfreds Futterkiste</option>
          <option value="1">Ana Trujillo</option>
          <option value="2">Antonio Moreno</option>
          <option value="3" selected>Berglunds Snabbköp</option>
        </select>
      </div>
    </div>
    <div class="form-group">
      <label for="freight" class="col-sm-2 control-label">Freight:</label>
      <div class="col-sm-10">
        <input id="freight" type="number" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="odate" class="col-sm-2 control-label">Order Date:</label>
      <div class="col-sm-10">
        <input id="odate" type="date" class="form-control">
      </div>
    </div>
    <div class="form-group">
      <label for="sdate" class="col-sm-2 control-label">Shipped Date:</label>
      <div...

CSS

body {
  background: #e0e0e0;
}

form {
  margin: 20px;
  padding: 20px;
  background: white;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

#details td {
  text-align: right;
  padding: 0 6px;
}

thead td {
  font-weight: bold;
}

.ui-grid {
  height: 10em;
}

JavaScript

onload = function() {

	// create Wijmo controls
  var orderid = new wijmo.input.ComboBox('#wj-orderid', {
  	text: '000012'
	});
  var customer = new wijmo.input.ComboBox('#wj-customer');
  var freight = new wijmo.input.InputNumber('#wj-freight', {
  	format: 'c2',
    step: 10
	});
  var odate = new wijmo.input.InputDate('#wj-odate');
	var sdate = new wijmo.input.InputDate('#wj-sdate');
	var details = new wijmo.grid.FlexGrid('#wj-details', {
  	autoGenerateColumns: false,
    headersVisibility: 'Column',
    columns: [
    	{ binding: 'id', header: 'ID', isReadOnly: true, width: '*' },
      { binding: 'product', header: 'Product', isReadOnly: true, width: '2*' },
      { binding: 'quantity', header: 'Quantity', format: 'n0', width: '2*' },
      { binding: 'discount', header: 'Discount', format: 'p0', width: '2*' },
      { binding: 'costPerUnit', header: 'Cost Per Unit', format: 'c2', width: '3*' }
		],
    allowAddNew: true,
    itemsSource: getOrderDetails()
	});
  details.rowHeaderPath = 'product';

	// order detail data
  function getOrderDetails() {
  	return [
    	{ 'id': 0, 'product': '1231', 'quantity': 22, 'discount': 0.05, 'costPerUnit': 20 },
      { 'id': 1, 'product': '1371', 'quantity': 12, 'discount': 0, 'costPerUnit': 52.5 },
      { 'id': 2, 'product': '3371', 'quantity': 5, 'discount': .12, 'costPerUnit': 2.5 },
		]
	}
}