Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to display Suggestions for input Field in HTML?
HTML provides several ways to display suggestions for input fields, enhancing user experience through placeholder text, required field validation, and autocomplete dropdowns. These features help users understand what data is expected and provide convenient options for data entry.
Syntax
Following is the syntax for the required attribute
<input type="text" required>
Following is the syntax for the placeholder attribute
<input type="text" placeholder="Enter your text here">
Following is the syntax for the datalist element
<input type="text" list="suggestions"> <datalist id="suggestions"> <option value="Option 1"></option> <option value="Option 2"></option> </datalist>
Using Required Attribute for Field Validation
The required attribute makes an input field mandatory. When the user tries to submit the form without filling required fields, the browser displays a validation message.
Example
Following example demonstrates required field validation
<!DOCTYPE html>
<html>
<head>
<title>Required Field Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration Form</h2>
<form>
<label for="fname">First Name *:</label><br>
<input type="text" id="fname" name="fname" required style="margin: 5px 0; padding: 5px;"><br><br>
<label for="email">Email Address *:</label><br>
<input type="email" id="email" name="email" required style="margin: 5px 0; padding: 5px;"><br><br>
<input type="submit" value="Register" style="padding: 8px 15px; background: #4CAF50; color: white; border: none; cursor: pointer;">
</form>
<p><small>* Required fields</small></p>
</body>
</html>
If you try to submit the form without filling the required fields, the browser will show validation messages like "Please fill out this field".
Using Placeholder Attribute for Input Hints
The placeholder attribute displays helpful text inside an empty input field. This text disappears when the user starts typing and provides guidance about the expected input format.
Example
Following example shows various placeholder suggestions
<!DOCTYPE html>
<html>
<head>
<title>Placeholder Examples</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Information</h2>
<form>
<label for="name">Full Name:</label><br>
<input type="text" id="name" placeholder="Enter your full name" style="width: 250px; padding: 8px; margin: 5px 0;"><br><br>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" placeholder="(555) 123-4567" style="width: 250px; padding: 8px; margin: 5px 0;"><br><br>
<label for="website">Website:</label><br>
<input type="url" id="website" placeholder="https://www.example.com" style="width: 250px; padding: 8px; margin: 5px 0;"><br><br>
<input type="submit" value="Save Contact" style="padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer;">
</form>
</body>
</html>
The placeholder text appears in a lighter color and provides format examples to help users understand what information is expected.
Using Datalist for Autocomplete Suggestions
The <datalist> element provides a dropdown list of predefined options that appear as the user types. It offers autocomplete functionality by filtering suggestions based on user input.
Example Font Selection with Datalist
<!DOCTYPE html>
<html>
<head>
<title>Font Style Selection</title>
</head>
<body style="background-color: #f5f5f5; font-family: Arial, sans-serif; padding: 30px; text-align: center;">
<h2 style="color: #333;">Choose Your Preferred Font Style</h2>
<label for="fontstyle" style="font-size: 16px; margin-bottom: 10px; display: block;">
Select Font Style:
</label>
<input type="text" id="fontstyle" list="fontlist" placeholder="Type or select a font..."
style="width: 300px; padding: 10px; font-size: 14px; border: 2px solid #ddd; border-radius: 5px;">
<datalist id="fontlist">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Helvetica">Helvetica</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Calibri">Calibri</option>
<option value="Georgia">Georgia</option>
<option value="Comic Sans MS">Comic Sans MS</option>
</datalist>
<p style="margin-top: 20px; color: #666;">Start typing to see matching font suggestions</p>
</body>
</html>
As users type in the input field, they'll see a dropdown with matching font options. They can either select from the list or type their own custom value.
Advanced Search Autocomplete with JavaScript
For more complex suggestion systems, JavaScript can create dynamic autocomplete functionality with custom styling and behavior.
Example State Search with Custom Autocomplete
<!DOCTYPE html>
<html>
<head>
<title>State Search Autocomplete</title>
<style>
.search-container {
position: relative;
width: 300px;
margin: 20px auto;
}
#search-input {
width: 100%;
padding: 10px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
#search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
list-style: none;
margin: 0;
padding: 0;
z-index: 1000;
}
#search-results li {
padding: 10px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
#search-results li:hover {
background-color: #f0f8ff;
}
#search-results li:last-child {
border-bottom: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2 style="text-align: center;">Search Indian States</h2>
<div class="search-container">
<label for="search-input">Enter state name:</label>
<input type="text" id="search-input" placeholder="Type state name...">
<ul id="search-results"></ul>
</div>
<script>
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
const states = [
'Andhra Pradesh', 'Arunachal Pradesh', 'Assam', 'Bihar',
'Chhattisgarh', 'Goa', 'Gujarat', 'Haryana', 'Himachal Pradesh',
'Jharkhand', 'Karnataka', 'Kerala', 'Madhya Pradesh', 'Maharashtra',
'Manipur', 'Meghalaya', 'Mizoram', 'Nagaland', 'Odisha', 'Punjab',
'Rajasthan', 'Sikkim', 'Tamil Nadu', 'Telangana', 'Tripura',
'Uttarakhand', 'Uttar Pradesh', 'West Bengal'
];
function filterStates(query) {
return states.filter(state =>
state.toLowerCase().includes(query.toLowerCase())
);
}
function displayResults(results) {
searchResults. 
6K+ Views
