<div class="ui-widget">
<label for="birds">London matches: </label>
- <input id="birds" />
+ <input id="birds">
</div>
-<div class="ui-widget" style="margin-top:2em; font-family:Arial">
+<div class="ui-widget" style="margin-top:2em; font-family: Arial, sans-serif">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
<button>Book Now!</button>
</div>
</fieldset>
- <br/>
+ <br>
<fieldset>
<legend>Rental Car</legend>
<div class="controlgroup-vertical">
<option>Delete</option>
</select>
</div>
- <br/>
+ <br>
<h3>Output:</h3>
<ul class="output"></ul>
</div>
</head>
<body>
-<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p>
+<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"></p>
<div class="demo-description">
<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
</head>
<body>
-<p>Date: <input type="text" id="datepicker" size="30"/></p>
+<p>Date: <input type="text" id="datepicker" size="30"></p>
-<p>Animations:<br />
+<p>Animations:<br>
<select id="anim">
<option value="show">Show (default)</option>
<option value="slideDown">Slide down</option>
</head>
<body>
-<p>Date: <input type="text" id="datepicker" size="30"/></p>
+<p>Date: <input type="text" id="datepicker" size="30"></p>
-<p>Format options:<br />
+<p>Format options:<br>
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<body>
<label for="from">From</label>
-<input type="text" id="from" name="from"/>
+<input type="text" id="from" name="from">
<label for="to">to</label>
-<input type="text" id="to" name="to"/>
+<input type="text" id="to" name="to">
<div class="demo-description">
<p>Select the date range to search for.</p>
</head>
<body>
-<p>Date: <input type="text" id="datepicker"/>
+<p>Date: <input type="text" id="datepicker">
<select id="locale">
<option value="ar">Arabic (‫(العربية</option>
<option value="zh-TW">Chinese Traditional (繁體中文)</option>
<p>I'm a snap target</p>
</div>
-<br style="clear:both" />
+<br style="clear:both">
<div id="draggable" class="draggable ui-widget-content">
<p>Default (snap: true), snaps to all other draggable elements</p>
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras</h5>
- <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
+ <img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72">
<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 2</h5>
- <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
+ <img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72">
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 3</h5>
- <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
+ <img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72">
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">High Tatras 4</h5>
- <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
+ <img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72">
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<p>
<label for="amount">Target sales goal (Millions):</label>
- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+ <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range" style="height:250px;"></div>
<p>
<label for="amount">Price range:</label>
- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+ <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
<p>
<label for="amount">Minimum number of bedrooms:</label>
- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+ <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
<p>
<label for="amount">Maximum price:</label>
- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+ <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-min"></div>
<p>
<label for="amount">Volume:</label>
- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+ <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-vertical" style="height:200px;"></div>
<p>
<label for="amount">Donation amount ($50 increments):</label>
- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;" />
+ <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider"></div>
<p>
<label for="spinner">Select a value:</label>
- <input id="spinner" name="value" />
+ <input id="spinner" name="value">
</p>
<div class="demo-description">
<input type="checkbox" id="check"><label for="check">Toggle</label>
<input type="checkbox" id="check2"><label for="check2">Checkbox</label>
<label for="checkbox-method-refresh" id="checkbox-method-refresh-label">checkbox refresh</label>
-<input type="checkbox" id="checkbox-method-refresh"/>
+<input type="checkbox" id="checkbox-method-refresh">
<label for="checkbox-method-destroy" class="bar" id="checkbox-method-destroy-label">checkbox refresh</label>
-<input type="checkbox" class="foo" id="checkbox-method-destroy"/>
+<input type="checkbox" class="foo" id="checkbox-method-destroy">
<label for="checkbox-method-disable">checkbox refresh</label>
-<input type="checkbox" class="foo" id="checkbox-method-disable"/>
+<input type="checkbox" class="foo" id="checkbox-method-disable">
<label for="radio-method-refresh" id="radio-method-refresh-label">radio refresh</label>
-<input type="radio" id="radio-method-refresh"/>
+<input type="radio" id="radio-method-refresh">
<label for="radio-method-destroy" class="bar" id="radio-method-destroy-label">radio refresh</label>
-<input type="radio" class="foo" id="radio-method-destroy"/>
+<input type="radio" class="foo" id="radio-method-destroy">
<label for="radio-method-disable">radio refresh</label>
-<input type="radio" class="foo" id="radio-method-disable"/>
+<input type="radio" class="foo" id="radio-method-disable">
<label for="checkbox-option-disabled">checkbox disabled</label>
-<input type="checkbox" class="foo" id="checkbox-option-disabled"/>
+<input type="checkbox" class="foo" id="checkbox-option-disabled">
<label for="checkbox-option-icon">checkbox icon</label>
-<input type="checkbox" class="foo" id="checkbox-option-icon"/>
-<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"/></label>
+<input type="checkbox" class="foo" id="checkbox-option-icon">
+<label for="checkbox-option-label">checkbox label<input type="checkbox" class="foo" id="checkbox-option-label"></label>
<label>
- <input type="checkbox" id="label-with-no-for"/>
+ <input type="checkbox" id="label-with-no-for">
</label>
<label>
- <input type="checkbox" id="label-with-no-for-with-html"/>
+ <input type="checkbox" id="label-with-no-for-with-html">
<strong>Hi</strong>, <em>I'm a label</em>
</label>
<label>
- <input type="checkbox" id="label-with-no-for-with-text"/>
+ <input type="checkbox" id="label-with-no-for-with-text">
Hi, I'm a label
</label>
<label>
- <input type="checkbox" id="label-with-no-for-with-html-like-text"/>
+ <input type="checkbox" id="label-with-no-for-with-html-like-text">
<em>Hi, I'm a label</em>
</label>
<option>Slow</option>
</select>
<label for="checkbox">Checkbox</label>
- <input type="checkbox" value="checkbox" id="checkbox" />
+ <input type="checkbox" value="checkbox" id="checkbox">
<select>
<option>Fast</option>
<option>Medium</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
- </label><br />
+ </label><br>
<label id="current">jQuery UI Scale Animation Test</label>
<button id="cyclePrev">Back</button>
<button id="doAnim">Run Animation</button>