HTML通过表单实现酒店筛选功能


Posted in HTML / CSS onMay 18, 2021

HTML通过表单实现酒店筛选功能

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html:charset=utf-8"/>
<title>通过表单实现酒店筛选</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>入住时间</span><input type="text">
    		<span>退房时间</span><input type="text">
    	</div>
    	<div class="mr-line">
    		<span>酒店位置</span>
    		<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>地铁周边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>
    	</div>
    	<div class="mr-line">
    		<span>酒店价格</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>酒店星级</span>
    		<span>不限</span>
    		<input type="checkbox">
    		<span>五星/豪华</span>
    		<input type="checkbox">
    		<span>四星/高档</span>
    		<input type="checkbox">
    		<span>三星/舒适</span>
    	</div>
    	<div class="me-line">
    		<span>主题风格</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通过表单实现酒店筛选功能

以上就是HTML通过表单实现酒店筛选功能的详细内容,更多关于html酒店筛选的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 HTML / CSS
浅析HTML5 Landmark
Sep 11 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 #HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 #HTML / CSS
CSS 实现多彩、智能的阴影效果
解析CSS 提取图片主题色功能(小技巧)
为什么你写的height:100%不起作用
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
May 10 #HTML / CSS
background-position百分比原理详解
You might like
用PHP的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php启动时候提示PHP startup的解决方法
2013/05/07 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
如何实现星星评价(jquery.raty.js插件)
2016/12/21 Javascript
JSON数据中存在单个转义字符“\”的处理方法
2018/07/11 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
Python显示进度条的方法
2014/09/20 Python
简单介绍Python中的try和finally和with方法
2015/05/05 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
Python中logging实例讲解
2019/01/17 Python
pytorch中图像的数据格式实例
2020/02/11 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
新西兰领先的鞋类和靴子网上商城:Merchant 1948
2017/09/08 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
应用数学专业求职信
2014/03/14 职场文书
房屋租赁意向书
2014/04/01 职场文书
寄语学生的话
2014/04/10 职场文书
应用外语系自荐信
2014/06/26 职场文书
研究生导师推荐信
2015/03/25 职场文书
证券区域经理岗位职责
2015/04/10 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
python 判断文件或文件夹是否存在
2022/03/18 Python