如何在 HTML 中显示输入字段的建议?

htmlweb developmentfront end technology更新于 2024/7/25 1:16:17

HTML 的 input 元素中有一个 placeholder 属性和一个 required 属性，可用于显示输入字段的建议。HTML 中的 input 元素指定用户可以填写数据的输入字段。placeholder 属性定义输入框中的建议。

输入字段建议的可视化表示

语法

<input type = "type_name" required>

必填项由布尔属性定义，该属性指定必须提交的输入字段。

<input type = "type_name" placeholder = "write something for suggestions ">

输入元素用于创建用户输入数据。placeholder 属性用于为输入字段提供建议。

<datalist id= "id_name">
   <option></option>
   <option></option>
<datalist>

datalist 元素用于提供下拉列表的自动完成功能。option 元素用于定义数据列表的输入。

使用的属性

示例中使用的属性如下:-

background-color - 定义正文的背景颜色。
color - 定义文本的颜色。
text-align - 将每个元素设置在正文的中心。

示例 1

在下面的示例中，我们将在表单中使用两个标签，它们为输入元素定义文本标签。然后使用输入元素设置必需属性，当用户未输入任何文本并点击提交按钮时，该属性将显示建议。

<!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>