数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何在HTML中显示输入字段的建议？
HTML在输入元素内部有占位符和required属性，可用于显示HTML输入字段的建议。HTML中的input元素指定用户可以填写数据的输入字段。placeholder属性在输入框中定义建议。
输入字段建议的视觉表示
语法
<input type = "type_name" required>
required属性是一个布尔属性，指定必须提交输入字段。
<input type = "type_name" placeholder = "write something for suggestion ">
input元素用于创建用户输入数据。placeholder属性通过向输入字段提供建议来定义。
<datalist id= "id_name"> <option></option> <option></option> <datalist>
datalist元素是自动完成功能，用于提供下拉列表。option元素用于定义输入数据列表。
使用的属性
示例中使用的属性如下：
background-color − 定义主体背景颜色。
color − 定义文本颜色。
text-align − 将每个元素设置为主体中央。
示例1
在下面的示例中，我们将在表单内使用两个标签来定义输入元素的文本标签。然后使用input元素设置required属性，当用户没有输入任何文本并点击提交按钮时，该属性将显示建议。
<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
</head>
<body>
<h1>The input field suggestion in HTML</h1>
<form>
<label for="fname">First name:</label><br>
<input type="text" required/><br><br>
<label for="Email">Enter your email:</label><br>
<input type="email" required /> <br><br>
<input type="submit" value="Submit Now!">
</form>
</body>
</html>
示例2
在下面的示例中，使用此HTML代码实现了输入字段的字体样式选择建议框。用户可用的选项包括Arial、Verdana、Helvetica、Sans Serif、Calibiri、Roman和Algebrian。当用户键入时，输入字段会提供建议和决策过程。可能不熟悉可用字体样式的用户会发现此功能特别有用，因为它提供了建议。建议框也可以更改以匹配网站的样式和配色方案。总的来说，此带有建议框的输入字段的用户体验和可用性得到了提高。
<!DOCTYPE html>
<html>
<title>Suggestion the input field box</title>
<head>
</head>
<body style = "background-color: grey; text-align:center;">
<h1 style = "color : white;">Display the suggestion for input field</h1>
<label for = "fontstyle">
Choose Your Favourite Font Style:
</label>
<div class=>
<input type="text" list="fontstyle" placeholder="Please Select"/>
<datalist id="fontstyle">
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
<option value="Helveltica">Helveltica</option></option>
<option value="Sans Serif">Sans Serif</option>
<option value="Calibiri">Calibiri</option>
<option value="Roman">Roman</option>
<option value="Algebrian">Algebrian</option>
</datalist>
</div>
</body>
</html>
示例3
HTML代码实现了一个简单的搜索自动完成功能。它包含一个标签、一个用户可以键入搜索查询的输入框、一个显示搜索结果的无序列表以及提供搜索操作的脚本。
CSS样式使无序列表没有列表样式和边框，每个列表项都有填充和光标指针。当鼠标悬停在搜索列表的列表项上时，背景颜色会变为黄色。
搜索功能由JavaScript代码定义。它生成一个字符串数组来表示搜索数据，并在搜索输入表单中添加一个事件监听器来监控输入。当用户在搜索输入字段中键入时，搜索数据将根据输入查询进行过滤，匹配的结果将显示在无序列表中。搜索结果是使用createElement方法在JavaScript代码中动态生成的。当单击列表项时，单击项的文本将输入到搜索输入区域，并且搜索结果将被删除。此外，一个事件监听器附加到文档中，以检测搜索输入区域和搜索结果之外的点击，这将导致搜索结果被删除。
<!DOCTYPE html>
<html>
<head>
<title>Search Autocomplete Example</title>
<style>
#search-results {
position: absolute;
z-index: 1;
list-style-type: none;
margin: 0px;
padding: 0px; }
#search-results li {
padding: 5px;
cursor: pointer; }
#search-results li:hover {
background-color: yellow; }
</style>
</head>
<body>
<label for="search-input">Enter the state:</label><br>
<input type="text" id="search-input" name="search-input">
<ul id="search-results"></ul>
<script>
let searchInput = document.getElementById('search-input');
let searchResults = document.getElementById('search-results');
// define your search data as an array of strings
let searchData = [
'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 to filter search results
function filterResults(query) {
return searchData.filter(item => item.toLowerCase().includes(query.toLowerCase()));
}
// function to display search results
function displayResults(results) {
searchResults.innerHTML = '';
results.forEach(result => {
let li = document.createElement('li');
li.textContent = result;
li.addEventListener('click', () => {
searchInput.value = result;
searchResults.innerHTML = '';
});
searchResults.appendChild(li);
});
}
// event listener for search input
searchInput.addEventListener('input', () => {
let query = searchInput.value;
if (query === '') {
searchResults.innerHTML = '';
} else {
let results = filterResults(query);
displayResults(results);
}
});
// event listener to close search results when clicking outside the input and the results
document.addEventListener('click', (event) => {
let isClickInsideInput = event.target === searchInput;
let isClickInsideResults = searchResults.contains(event.target);
if (!isClickInsideInput && !isClickInsideResults) {
searchResults.innerHTML = '';
}
});
</script>
</body>
</html>
结论
我们看到了如何使用input标签创建输入字段。要生成自动完成功能，需要datalist标签来定义所有下拉列表。然后使用option标签存储项目列表。该示例想要告诉我们，无论哪个网站提供自动完成功能，该网站都会吸引用户互动。
5K+ 次浏览
