HTML5表單搜索代碼
HTML5為我們提供了許多表單類型來豐富我們的網頁搜索功能。下面是一個例子,介紹了如何創建一個簡單的搜索表單。
首先,我們需要創建一個表單元素,設置其method屬性為"get",action屬性為搜索的URL:
<form method="get" action="http://www.example.com/search">接下來,我們需要添加一個input元素,設置其type屬性為"search",name屬性為"q",表示搜索的關鍵詞:
<p>搜索:<br> <input type="search" name="q"> </p>我們還可以添加一個button元素作為搜索按鈕:
<p>搜索:<br> <input type="search" name="q"> <button type="submit">搜索</button> </p>最后,我們需要關閉表單元素:
</form>這樣,我們就成功創建了一個簡單的搜索表單。當用戶提交表單時,瀏覽器會將關鍵詞和搜索的URL結合起來,發送GET請求,獲取搜索結果頁面。 總結 HTML5的表單搜索功能為我們提供了很大的便利。在設計搜索功能時,我們可以根據實際需求選擇合適的表單類型,從而提高用戶體驗。希望這個例子能夠幫助您更好地了解HTML5表單。
上一篇html5表單頁面代碼