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 相关文章推荐
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
Mar 11 HTML / CSS
html5页面结构_动力节点Java学院整理
Jul 10 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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!数据库
2008/05/03 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
PHP使用DOM对XML解析处理操作示例
2019/07/04 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
Javascript将string类型转换int类型
2010/12/09 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
JavaScript实现移动端带transition动画的轮播效果
2020/03/24 Javascript
Python中XlsxWriter模块简介与用法分析
2018/04/24 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
Python os.rename() 重命名目录和文件的示例
2018/10/25 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
python 三元运算符使用解析
2019/09/16 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
Delphi CS笔试题
2014/01/04 面试题
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
乔布斯斯坦福大学演讲稿
2014/05/23 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
违纪检讨书范文
2015/01/27 职场文书
公司开除员工通知
2015/04/22 职场文书
工作失职自我检讨书
2015/05/05 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript
python如何利用traceback获取详细的异常信息
2021/06/05 Python
python获取字符串中的email
2022/03/31 Python