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 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
css3中用animation的steps属性制作帧动画
Apr 25 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
Sep 16 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
AmazeUI 网格的实现示例
Aug 13 HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 HTML / CSS
CSS 实现多彩、智能的阴影效果
May 12 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
php下Memcached入门实例解析
2015/01/05 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
jquery调整表格行tr上下顺序实例讲解
2016/01/09 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
2016/08/06 Javascript
JS去除重复并统计数量的实现方法
2016/12/15 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
Python中的is和==比较两个对象的两种方法
2017/09/06 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
秋季运动会稿件
2014/01/30 职场文书
2014年教师节寄语
2014/04/03 职场文书
事业单位考核材料
2014/05/21 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
小学生植树节活动总结
2014/07/04 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
单位婚育证明范本
2014/11/21 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
Python如何将list中的string转换为int
2022/07/15 Ruby
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server