資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
