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 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
Apr 17 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
css3学习系列之移动属性详解
Jul 04 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
HTML5 Canvas如何实现纹理填充与描边(Fill And Stroke)
Jul 15 HTML / CSS
浅析border-radius如何兼容IE
Apr 19 HTML / CSS
css如何把元素固定在容器底部的四种方式
Jun 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
PHP输出Excel PHPExcel的方法
2018/07/26 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
csdn 批量接受好友邀请
2009/02/19 Javascript
javascript 弹出层组件(升级版)
2011/05/12 Javascript
jquery map方法使用示例
2014/04/23 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
python在Windows下安装setuptools(easy_install工具)步骤详解
2016/07/01 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
HTML5+CSS3绘制锯齿状的矩形
2016/03/01 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
项目计划书范文
2014/01/09 职场文书
社区党员先进事迹
2014/01/22 职场文书
大型晚会策划方案
2014/02/06 职场文书
2014年电工工作总结
2014/11/20 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
React更新渲染原理深入分析
2022/12/24 Javascript