HTML5是一種主流的Web標準,在建立網(wǎng)頁時發(fā)揮了至關重要的作用。其中地區(qū)篩選是常用的功能之一,用于幫助用戶快速定位相關信息。以下是一些常見的HTML5地區(qū)篩選代碼:
<form> <label>請選擇地區(qū):</label> <select name="region"> <option value="0">全部</option> <option value="1">亞洲</option> <option value="2">歐洲</option> <option value="3">北美洲</option> </select> <input type="submit" value="篩選"> </form>
上述代碼包括了一個表單元素,通過select下拉菜單來選擇目標地區(qū)。其中value值可以根據(jù)實際情況修改,用于后臺程序的數(shù)據(jù)庫篩選。
<ul> <li data-region="1">中國</li> <li data-region="2">俄羅斯</li> <li data-region="3">美國</li> </ul>
除了使用表單元素,我們還可以在列表中使用data-屬性,作為篩選條件的值。比如上述代碼用于在地區(qū)為1(亞洲)的情況下僅顯示中國這個列表元素。
<input type="checkbox" name="region" value="1"> 亞洲 <input type="checkbox" name="region" value="2"> 歐洲 <input type="checkbox" name="region" value="3"> 北美洲
另外,我們還可以使用checkbox選框,允許用戶一次選擇多個地區(qū)。上述代碼可以展示一個包括多個選項的地區(qū)篩選框,checkbox的name值一致,方便后臺程序進行篩選。
上一篇.js和.css
下一篇html5在線考試代碼