Hosting Solutions
mobile_logo Table of Contents

Autocomplete Text Input Datalist List Attribute Tutorial

Learn to code the list attribute into your input tags and associate them with a datalist that renders an autocomplete feature while people are typing into your HTML5 web form fields. Used for dynamic autocompletion of search fields primarily, and your datlist can be tied to Ajax and PHP to render autocompletion for your database information. <!DOCTYPE html> <html> <head> </head> <body> <h2>HTML Form Input Autocomplete datalist Tutorial</h2> Search: <input type="text" name="srch" id="srch" list="datalist1"> <datalist id="datalist1"> <option value="Canada"> <option value="China"> <option value="Mexico"> <option value="United Kingdom"> <option value="United States of America"> <option value="Uruguay"> </datalist> </body> </html>

HTML Videos

Form Components

Color Picker Input TutorialSlider Tutorial Javascript Function ProgrammingNumeric Stepper Form Input TutorialDate Time Form Input Type TutorialProgress Bar Progressive Javascript Events ProcessingAutocomplete Text Input Datalist List Attribute TutorialAutofocus Form Input Attribute TutorialPlaceholder Form Field Input Attribute TutorialRequired Form Field Input Attribute Tutorialfieldset and legend Elements Form Area Containers TutorialCustom HTML Form Input Programming Tutorial