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设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
Jan 08 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
Oct 15 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
HTML5实现应用程序缓存(Application Cache)
Jun 16 HTML / CSS
html5启动原生APP总结
Jul 03 HTML / CSS
CSS预处理框架——Stylus
Apr 21 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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为php增加openssl模块的方法
2011/06/14 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
在vue中读取本地Json文件的方法
2018/09/06 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Django实现表单验证
2018/09/08 Python
python实现flappy bird游戏
2018/12/24 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
sklearn+python:线性回归案例
2020/02/24 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
出国留学自荐信
2013/10/25 职场文书
销售团队激励口号
2014/06/06 职场文书
小学生校园广播稿
2014/09/28 职场文书
汽车转让协议书范本
2014/12/07 职场文书
党小组考察意见
2015/06/02 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
python基础之爬虫入门
2021/05/10 Python
java基础——多线程
2021/07/03 Java/Android
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers