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 相关文章推荐
50个强大璀璨的CSS3/JS技术运用实例
Feb 27 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
让IE支持HTML5的方法
Dec 11 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
Jun 03 HTML / CSS
AmazeUI中模态框的实现
Aug 19 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
php制作基于xml的RSS订阅源功能示例
2017/02/08 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
2018/04/18 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
小程序实现带年月选取效果的日历
2018/06/27 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
Python如何快速实现分布式任务
2017/07/06 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
HTML5 解析规则分析
2009/08/14 HTML / CSS
美国著名手表网站:Timepiece
2017/11/15 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
考教师资格证不要错过的4个最佳时机
2019/07/17 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
《艾尔登法环》发布最新「战技」宣传片
2022/04/03 其他游戏
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS