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的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5 对各个标签的定义与规定:body的介绍
Jun 21 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
May 12 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
CSS 新特性 contain控制页面的重绘与重排问题
Apr 30 HTML / CSS
CSS基础详解
Oct 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
深入解析JavaScript中的变量作用域
2013/12/06 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
使用命令行工具npm新创建一个vue项目的方法
2017/12/27 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
axios使用拦截器统一处理所有的http请求的方法
2018/11/02 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
Python numpy 点数组去重的实例
2018/04/18 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
python3.6实现学生信息管理系统
2019/02/21 Python
numpy linalg模块的具体使用方法
2019/05/26 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
电气工程师岗位职责
2014/01/01 职场文书
秋季运动会通讯稿
2014/01/24 职场文书
2015年市场部工作总结
2015/04/30 职场文书
老干部座谈会主持词
2015/07/03 职场文书
女性健康讲座主持词
2015/07/04 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
用Python将库打包发布到pypi
2021/04/13 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js