Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • HTML5 Datalist Element

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 379
    Comment on it

    Hi all,

    Datalist is a new element in HTML5 and very useful. Basically it works with input box and when we write text in it, it will show a related item in list like option box.

    Example :-

    <label>Select your preferred code editor:</label>
    <input type="text" id="txt_ide" list="ide" />
    <datalist id="ide">
        <option value="Brackets" label="by Adobe" />
        <option value="Coda" label="by Panic" />
        <option value="Dreamweaver" />
        <option value="Espresso" />
        <option value="jEdit" />
        <option value="Komodo Edit" />
        <option value="Notepad++" />
        <option value="Sublime Text 2" label="the developer's choice" />
        <option value="Taco HTML Edit" />
        <option value="Textmate" />
        <option value="Text Pad" />
        <option value="TextWrangler" />
        <option value="Visual Studio" />
        <option value="VIM" />
        <option value="XCode" />
    </datalist>
    

    Output:-

    By using above code, when you run it in the browser, it will appears like a normal textbox, but when you starting typing in the text box, the complete or filtered list will appears to you. As you type, only the relevant options will be shown according to your search or text you enter in text box, same as Google's Search box displays suggestions. Be aware though, slight behavioral variations may exist from browser to browser.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: