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实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
CSS3实现酷炫的3D旋转透视效果
Nov 21 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
HTML5触摸事件演化tap事件介绍
Mar 25 HTML / CSS
html5 http的轮询和Websocket原理
Oct 19 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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内置的Math函数效率测试
2014/12/01 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
Joomla开启SEF的方法
2016/05/04 PHP
jquery实现div阴影效果示例代码
2013/09/16 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
bootstrap实现二级下拉菜单效果
2017/11/23 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
详解基于mpvue的小程序markdown适配解决方案
2018/05/08 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
layui 实现表格某一列显示图标
2019/09/19 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python工程师面试题 与Python基础语法相关
2016/01/14 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
python判断设备是否联网的方法
2018/06/29 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python画图常规设置方式
2020/03/05 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
详解canvas在圆弧周围绘制文本的两种写法
2018/05/22 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
理肤泉美国官网:La Roche-Posay
2018/01/17 全球购物
创建无烟单位实施方案
2014/03/29 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
教导主任个人总结
2015/03/03 职场文书
大学副班长竞选稿
2015/11/21 职场文书
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫