Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>HTML5 Drop Down List Format Inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<link href="http://w2ui.com/web/css/bootstrap.css" rel="stylesheet">
<script src="http://w2ui.com/web/js/jquery-1.9.1.min.js"></script>
<script src="http://w2ui.com/web/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://w2ui.com/web/js/CodeMirror/lib/codemirror.css">
<script src="http://w2ui.com/web/js/CodeMirror/lib/codemirror.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/javascript.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/htmlmixed.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/css.js"></script>
<script src="http://w2ui.com/web/js/CodeMirror/mode/xml.js"></script>
<link rel="stylesheet" type="text/css" href="http://w2ui.com/src/w2ui-fields-1.0.min.css" />
<script type="text/javascript" src="http://w2ui.com/src/w2ui-fields-1.0.min.js"></script>
<script src="http://w2ui.com/web/pages/code-mirror.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://w2ui.com/web/js/font-awesome/font-awesome.css" />

<style>
/* Begin HTML5 Drop Down List Format Inputs */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;}
#content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;}
.w2ui-label {float:left; margin-top:6px; margin-bottom:3px; width:100px; padding:0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; min-height:20px;}
.w2ui-field {margin-bottom:3px; margin-left:108px; padding:3px; min-height:20px;}
span.legend {padding-left:20px; color:#888;}
</style>

</head>
<body>

<div id="content">

<h2>Dropdown Lists</h2>
<div class="w2ui-label"> List: </div>
<div class="w2ui-field"> <input type="list" style="width: 200px"> <span class="legend">Cannot type any text, but only items from the list</span> </div>
<div class="w2ui-label"> Combo: </div>
<div class="w2ui-field"> <input type="combo" style="width: 200px"> <span class="legend">You can type any text</span> </div>
<div style="height: 30px;"></div>

<script>
var people = ['George Washington', 'John Adams', 'Thomas Jefferson', 'James Buchanan', 'James Madison', 'Abraham Lincoln', 'James Monroe', 'Andrew Johnson', 'John Adams', 'Ulysses Grant', 'Andrew Jackson', 'Rutherford Hayes', 'Martin VanBuren', 'James Garfield', 'William Harrison', 'Chester Arthur', 'John Tyler', 'Grover Cleveland', 'James Polk', 'Benjamin Harrison', 'Zachary Taylor', 'Grover Cleveland', 'Millard Fillmore', 'William McKinley', 'Franklin Pierce', 'Theodore Roosevelt', 'John Kennedy', 'William Howard', 'Lyndon Johnson', 'Woodrow Wilson', 'Richard Nixon', 'Warren Harding', 'Gerald Ford', 'Calvin Coolidge', 'James Carter', 'Herbert Hoover', 'Ronald Reagan', 'Franklin Roosevelt', 'George Bush', 'Harry Truman', 'William Clinton', 'Dwight Eisenhower', 'George W. Bush', 'Barack Obama'];
$('input[type=list]').w2field('list', { items: people });
$('input[type=combo]').w2field('combo', { items: people });
</script>

<br /><br />
<div id="code">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_168.html">HTML5 Drop Down List Format Inputs Code Snippet</a> page. ]
</div>

</div>
</body>
</html>
Code Snippet </> Info
