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,js)
Dec 12 HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
Jan 01 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
清除canvas画布内容(点擦除+线擦除)
Aug 12 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 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 auth_http类库进行身份效验
2009/03/19 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
JavaScript自定义等待wait函数实例分析
2015/03/23 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
JQuery实现级联下拉框效果实例讲解
2015/09/17 Javascript
JavaScript中循环遍历Array与Map的方法小结
2016/03/12 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
对python中return和print的一些理解
2017/08/18 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Win 10下Anaconda虚拟环境的教程
2020/05/18 Python
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
字符串str除首尾字符外的其他字符按升序排列
2013/03/08 面试题
如何删除一个表里面的重复行
2013/07/13 面试题
软件工程师面试题
2012/06/25 面试题
师范生自我鉴定范文
2013/10/05 职场文书
本科毕业生自我鉴定
2013/11/02 职场文书
质量工程师岗位职责
2013/11/16 职场文书
秋游活动策划方案
2014/02/16 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
创先争优公开承诺书
2014/08/30 职场文书
七一建党节慰问信
2015/02/14 职场文书
介绍信应该怎么开?
2019/04/03 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL