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中matrix函数的使用
Jun 06 HTML / CSS
CSS3 linear-gradient线性渐变生成加号和减号的方法
Nov 21 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 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本地服务器分享
2013/02/19 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
php操作access数据库的方法详解
2017/02/22 PHP
Laravel源码解析之路由的使用和示例详解
2018/09/27 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
JS中的public和private对象,即static修饰符
2012/01/18 Javascript
javascript自动改变文字大小和颜色的效果的小例子
2013/08/02 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
浅析javascript 定时器
2014/12/23 Javascript
JavaScript异步加载浅析
2014/12/28 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
js print打印网页指定区域内容的简单实例
2016/11/01 Javascript
JS冒泡事件与事件捕获实例详解
2016/11/25 Javascript
详解JS去重及字符串奇数位小写转大写
2016/12/29 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
Python安装依赖(包)模块方法详解
2020/02/14 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
Pandas之缺失数据的实现
2021/01/06 Python
Python 图片处理库exifread详解
2021/02/25 Python
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
简单的辞职信范文
2014/01/18 职场文书
工作态度检讨书
2014/02/11 职场文书
个人贷款承诺书
2014/03/28 职场文书
死亡赔偿协议书
2015/01/28 职场文书
自荐信格式范文
2015/03/04 职场文书