<input list="categories" name="category" id="category" class="form-control" placeholder="任務分類" required>

這段代碼是一個 HTML 輸入控件，結合了 <input> 和 <datalist>，用來實現帶有自動補全功能的文本輸入框。下面是詳細解讀：

<input list="categories"         <!-- 關聯到 id="categories" 的 <datalist>，用于自動補全選項 -->name="category"           <!-- 表單提交時，這個輸入框的字段名是 category -->id="category"             <!-- 該輸入框的唯一標識符，用于 JS 或 CSS 訪問 -->class="form-control"      <!-- Bootstrap 樣式類，給輸入框應用標準樣式 -->placeholder="任務分類"     <!-- 輸入框的占位符，顯示提示文本 -->required                  <!-- 表示這個輸入框是必填項，不能提交空值 -->
>

關鍵點解釋：

1. list=“categories”

• 這是 <input> 的一個屬性，指定該輸入框關聯一個 <datalist> 元素，id 是 “categories”。

• <datalist> 定義了一組可選項，瀏覽器會根據用戶輸入動態顯示匹配的候選列表，類似于下拉菜單，但用戶依然可以自由輸入不在列表內的值。

2. name=“category”

• 表示當提交表單時，這個輸入框的值會以 category 為字段名發送到服務器。

3. id=“category”

• 唯一標識符，通常用于標簽 <label for="category"> 或通過 JavaScript 訪問此輸入框。

4. class=“form-control”

• Bootstrap 框架中的樣式類，賦予輸入框標準的美觀樣式和響應式表現。

5. placeholder=“任務分類”

• 在輸入框為空時，顯示灰色提示文本“任務分類”，引導用戶填寫。

6. required

• 瀏覽器會在提交表單時驗證此輸入框不能為空，否則阻止提交并提示用戶。

搭配的 <datalist> 示例

<datalist id="categories"><option value="工作"></option><option value="生活"></option><option value="旅游"></option>
</datalist>

這樣用戶點擊輸入框時，會看到這些選項，但仍可輸入其他自定義內容。