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弹性布局内容对齐(justify-content)属性使用详解
Jul 31 HTML / CSS
CSS+jQuery实现的在线答题功能
Apr 25 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
CSS3新特性详解(五):多列columns column-count和flex布局
Apr 30 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
详解cookie验证的php应用的一种SSO解决办法
2017/10/20 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
使用jQuery时Form表单元素ID和name命名大忌
2014/03/06 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
基于jQuery实现顶部导航栏功能
2016/12/27 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
使用p5.js实现动态GIF图片临摹重现
2019/10/23 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
[01:32]dota2拉比克至宝(222)
2018/12/20 DOTA
python 文件操作api(文件操作函数)
2016/08/28 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
python如何制作英文字典
2019/06/25 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python列表生成器迭代器实例解析
2019/12/19 Python
python实现在一个画布上画多个子图
2020/01/19 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
澳大利亚最好的厨具店:Kitchen Warehouse
2018/03/13 全球购物
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书