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实现毛玻璃效果示例源码
Sep 25 HTML / CSS
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5简介_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5页面中尝试调起APP功能
Sep 12 HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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英文字母大小写转换函数小结
2014/05/03 PHP
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
PHP实现获取ip地址的5种方法,以及插入用户登录日志操作示例
2019/02/28 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
js css自定义分页效果
2017/02/24 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python CSV模块使用实例
2015/04/09 Python
Python简单读取json文件功能示例
2017/11/30 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
2017/09/18 HTML / CSS
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
幼师自荐信
2013/10/26 职场文书
人力资源专员岗位职责
2014/01/30 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
2015年教师新年寄语
2014/12/08 职场文书
教师考核评语大全
2014/12/31 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
Python开发五子棋小游戏
2022/05/02 Python