HTML通過(guò)表單實(shí)現(xiàn)酒店篩選功能
發(fā)布時(shí)間：2021-05-17 16:04:09 作者：GodOuO 
我要評(píng)論
我要評(píng)論本文通過(guò)實(shí)例代碼給大家分享基于HTML通過(guò)表單實(shí)現(xiàn)酒店篩選功能，代碼真的很簡(jiǎn)答，對(duì)大家學(xué)習(xí)html表單相關(guān)知識(shí)有很大的幫助，對(duì)html酒店篩選相關(guān)知識(shí)，感興趣的朋友一起看看吧
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>
<title>通過(guò)表單實(shí)現(xiàn)酒店篩選</title>
<link rel="stylesheet" href="1-1.css">
</head>
<body>
<div class="mr-content">
<div class="mr-container">
<form>
<div class="mr-line">
<span>目的地</span><input type="text">
<span>入住時(shí)間</span><input type="text">
<span>退房時(shí)間</span><input type="text">
</div>
<div class="mr-line">
<span>酒店位置</span>
<select>
<option selected>景點(diǎn)1</option>
<option selected>景點(diǎn)2</option>
<option selected>景點(diǎn)3</option>
<option selected>景點(diǎn)</option>
</select>
<select>
<option selected>交通樞紐1</option>
<option selected>交通樞紐2</option>
<option selected>交通樞紐3</option>
<option selected>交通樞紐</option>
</select>
<select>
<option selected>地鐵周邊1</option>
<option selected>地鐵周邊2</option>
<option selected>地鐵周邊3</option>
<option selected>地鐵周邊</option>
</select>
<select>
<option selected>行政區(qū)1</option>
<option selected>行政區(qū)2</option>
<option selected>行政區(qū)3</option>
<option selected>行政區(qū)</option>
</select>
</div>
<div class="mr-line">
<span>酒店價(jià)格</span>
<span>不限</span>
<input type="radio">
<span>100元以下</span>
<input type="radio">
<span>100-300元</span>
<input type="radio">
<span>300-600元</span>
<input type="radio">
<span>600-1500元</span>
</div>
<div class="mr-line">
<span>酒店星級(jí)</span>
<span>不限</span>
<input type="checkbox">
<span>五星/豪華</span>
<input type="checkbox">
<span>四星/高檔</span>
<input type="checkbox">
<span>三星/舒適</span>
</div>
<div class="me-line">
<span>主題風(fēng)格</span>
<span>不限</span>
<input type="checkbox">
<span>客棧</span>
<input type="checkbox">
<span>精品酒店</span>
<input type="checkbox">
<span>情侶酒店</span>
<input type="checkbox">
<span>園林庭院</span>
</div>
</form>
</div>
</body>
</html>
以上就是HTML通過(guò)表單實(shí)現(xiàn)酒店篩選功能的詳細(xì)內(nèi)容，更多關(guān)于html酒店篩選的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
wordpress添加Html5的表單驗(yàn)證required方法小結(jié)
這篇文章主要介紹了wordpress添加Html5的表單驗(yàn)證required方法小結(jié),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參2020-08-18
HTML如何對(duì)齊多個(gè)表單中的文本框的實(shí)現(xiàn)
這篇文章主要介紹了HTML如何對(duì)齊多個(gè)表單中的文本框的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2020-06-18html表單控件禁用屬性readonly VS disabled介紹
這篇文章主要介紹了html表單控件禁用屬性readonly VS disabled區(qū)別,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-13
HTML5表單驗(yàn)證特性(知識(shí)點(diǎn)小結(jié))
這篇文章主要介紹了HTML5表單驗(yàn)證特性的一些知識(shí)點(diǎn)，本文通過(guò)實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-10- 表單提交是常見(jiàn)的一種操作，這篇文章主要介紹了html中表單提交的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-06
