Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: HTML5 Codes Library >> Inputs >> Drop Down Lists


Code Snippet </> Info


Snippet Name: Drop Down Lists

Description: Check out the awesome HTML5 Drop Down Lists Format INPUT alternative widgets.
Example: View Code Demo

Note:

Author:

Last Modified: 2015-08-26 22:24:08

Language: html5

Highlight Mode: html

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library