Realize Hotel filtering function through HTML form

Time:2021-7-26

HTML

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>
< title > Hotel screening through forms < / Title >
<link rel="stylesheet" href="1-1.css">
</head>
<body>
<div class="mr-content">
<div class="mr-container">
    <form>
    	<div class="mr-line">
    		<span>Destination < / span > < input type = "text" >
    		<span>Check in time < / span > < input type = "text" >
    		<span>Check out time < / span > < input type = "text" >
    	</div>
    	<div class="mr-line">
    		<span>Hotel location</span>
    		<select>
				< option selected > attraction 1 < / option >
				< option selected > attraction 2 < / option >
    			< option selected > attraction 3 < / option >
				< option selected > attractions < / option >
    		</select>
    		<select>
				< option selected > transportation hub 1 < / option >
				< option selected > transportation hub 2 < / option >
				< option selected > transportation hub 3 < / option >
    			< option selected > transportation hub < / option >
    		</select>
    		<select>
				< option selected > Metro perimeter 1 < / option >
				< option selected > Metro perimeter 2 < / option >
				< option selected > Metro perimeter 3 < / option >
    			< option selected > Metro perimeter < / option >
    		</select>
    		<select>
    			< option selected > Administrative Region 1 < / option >
				< option selected > Administrative Region 2 < / option >
				< option selected > District 3 < / option >
				< option selected > Administrative Region < / option >
    		</select>
    	</div>
    	<div class="mr-line">
    		<span>Hotel price</span>
    		<span>Unlimited</span>
    		<input type="radio">
    		<span>Less than 100 yuan</span>
    		<input type="radio">
    		<span>100-300 yuan</span>
    		<input type="radio">
    		<span>300-600 yuan</span>
    		<input type="radio">
    		<span>600-1500 yuan</span>
    	</div>
    	<div class="mr-line">
    		<span>Hotel Star</span>
    		<span>Unlimited</span>
    		<input type="checkbox">
    		<span>Five star / luxury</span>
    		<input type="checkbox">
    		<span>Four star / upscale</span>
    		<input type="checkbox">
    		<span>Samsung / comfort</span>
    	</div>
    	<div class="me-line">
    		<span>Theme style</span>
    		<span>Unlimited</span>
    		<input type="checkbox">
    		<span>Inn</span>
    		<input type="checkbox">
    		<span>Boutique Hotel</span>
    		<input type="checkbox">
    		<span>Couple Hotel</span>
    		<input type="checkbox">
    		<span>Garden courtyard</span>
    	</div>
    </form>
</div>
	</body>
</html>

HTML

The above is the details of the hotel filtering function realized by HTML form. For more information about html Hotel filtering, please pay attention to other relevant articles of developeppaer!