Typing suggestion is a feature in which a system predicts the remaining characters that a user is typing. Users can choose a suggestion for autocomplete from the drop-down menu. A predictive text system is another name for this type of program because it predicts and gives the user typing suggestions for the rest of the text. Today in this blog, you will learn to create autocorrect and typing suggestions with simple HTML and CSS.
Yes, you heard that right! We are going to make it without using JavaScript. We will be completing a form to ask you about your preferred coding language. And as soon as you start typing the language name, it will give you suggestions and autocomplete them if you click on them.
Source Code for Typing Suggestions
You can create autocomplete and typing suggestions without JavaScript with the help of the HTML <datalist> tag.
If you are not familiar with the datalist tag, let me summarize it for you. The <datalist> tag specifies the list of predefined items for the <input> element. It allows you to provide the autocomplete feature for the <input> element, so you will see a drop-down list of predefined elements while entering the data.
Now let’s look into the code.
Source Code
For creating this program, you need to create two files. The first is for HTML, and the other is for CSS.
index.html
Create an index.html file and place this given code there.
<html>
<body>
<form action="/action_page.php">
<label for="language">What is your preferred coding language?</label>
<br>
<br>
<input type="text" id="language" name="language" placeholder="Language" list="option-name" autocomplete="off">
<br>
<br>
<datalist id="option-name">
<option value="C++"></option>
<option value="Java"></option>
<option value="Python"></option>
<option value="PHP"></option>
<option value="HTML"></option>
<option value="JavaScript"></option>
</datalist>
<a class="submit" href="https://widgetcore.com/category/computer-science/">Submit</a>
</form>
</body>
</html>
style.css
Now create the style.css file and place this given code there.
body{
background: #E7C9B6;
font-family: arial;
text-align: center;
}
label{
font-size: 1.5rem;
}
input{
font-size: 1.05rem;
width: 25%;
border: 3px solid #724D35;
}
.submit{
background: #724D35;
color: white;
padding: 0.3rem;
text-decoration: none;
font-size: 1.05rem;
}Output
Note: For creating typing suggestions, the id attribute value of the <datalist> tag should be the same as the list attribute value. In the above example, the value is “option-name.”
That’s it; now, you have successfully created the typing suggestions without using JavaScript. If you have doubts, drop them down in the comment section.
Happy Coding!
Some links on this page are affiliate links. This means that if you choose to make a purchase, we may earn a small commission at no extra cost to you. For more information, Go here
