HTML realizes hotel screening function through form

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>Subway area 1</option>
				<option selected>Metro surrounding 2</option>
				<option selected>Metro surrounding 3</option>
    			<option selected>Subway area</option>
    		</select>
    		<select>
    			<option selected>Administrative District 1</option>
				<option selected>Administrative District 2</option>
				<option selected>Administrative District 3</option>
				<option selected>Administrative district</option>
    		</select>
    	</div>
    	<div class="mr-line">
    		<span>Hotel Prices</span>
    		<span>Unlimited</span>
    		<input type="radio">
    		<span>100 yuan or less</span>
    		<input type="radio">
    		100-300 Yuan
    		<input type="radio">
    		300-600 Yuan
    		<input type="radio">
    		600-1500 Yuan
    	</div>
    	<div class="mr-line">
    		<span>Hotel star rating</span>
    		<span>Unlimited</span>
    		<input type="checkbox">
    		<span>Five-star/Luxury</span>
    		<input type="checkbox">
    		<span>Four-star/high-end</span>
    		<input type="checkbox">
    		<span>Three stars/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 how to use HTML to implement hotel screening through forms. For more information about HTML hotel screening, please pay attention to other related articles on 123WORDPRESS.COM!

<<: HTML+CSS box model example (circle, semicircle, etc.) "border-radius" is simple and easy to use

>>: Centering the Form in HTML