欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:22选5河南最新开奖今 > HTML >

HTML基础必学列表

Html form <select>下拉列表菜单与跳转菜单表单标签篇

22选5河南最新开奖今 www.gsf5k.cn Html form select下拉列表菜单与select跳转菜单表单标签案例教程

select目录
  1. Form select语法与结构
  2. Form select标签使用认识
  3. select普通菜单与跳转菜单案例
  4. DW软件里截图表单效果
  5. select表单标签案例图
  6. html form select案例总结

一、Form select语法与结构:   -   TOP

  1. <select name=""> 
  2. <option value="0">DIVCSS5</option> 
  3. <option value="1">DIVCSS5</option> 
  4. </select> 

二、Form select标签使用说明:   -   TOP

为什么我们要使用Form select下来菜单列表呢?那是我们用于表单下拉选择所需项。

下面22选5河南最新开奖今技术DIVCSS5为大家介绍常见html Form select使用地方。

我们使用表单下拉列表选择数据,如省、市、县、年、月等数据,我们即可使用下拉菜单表单进行设置。
select 我下拉列表菜单标签
Option为下拉列表数据标签
Value 为Option的数据值(用于数据的传值)

form select下拉菜单列表使用地方展示
select使用地方,上图为日期下拉列表案例运用截图

三、Form select使用种类:   -   TOP

Select下拉菜单列表表单标签,常使用有两种

1)、普通下拉列表菜单
html代码如下:

  1. <form action="" method="get"> 
  2. <label>1、普通下拉列表菜单</label> 
  3. <select name=""> 
  4. <option value="0">DIVCSS5</option> 
  5. <option value="1">DIVCSS5</option> 
  6. </select> 
  7. </form> 

2)、跳转下拉列表菜单(如常见点击后跳转到选择网站)
常常一些网站做友情链接,与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。

跳转菜单html代码如下:

  1. <form action="" method="get"> 
  2. <label>2、跳转的下拉列表菜单</label> 
  3. <select name="jumpMenu" id="jumpMenu"
     onchange="MM_jumpMenu('parent',this,0)"> 
  4. <option value="//www.gsf5k.cn/">DIVCSS5</option> 
  5. <option value="//www.gsf5k.cn/">DIVCSS5</option> 
  6. </select> 
  7. </form> 

实现跳转还需要在head标签内加入Js脚本动作代码:

  1. <script type="text/javascript"> 
  2. <!-- 
  3. function MM_jumpMenu(targ,selObj,restore){ //v3.0 
  4. eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); 
  5. if (restore) selObj.selectedIndex=0
  6. //--> 
  7. </script> 

即可使用表单select控件实现跳转的列表菜单效果。

3)、更简洁的新建浏览器(选项卡)窗口跳转菜单:
只需<select>标签内加入如下代码:

onchange="javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].selected;"

得到以下代码:

  1. <select onchange="javascript:if (this.options[this.selectedIndex].value != '')
     window.open(this.options[this.selectedIndex].value);this.options[0].selected;"
    > 

完整简单新打开网页窗口跳转菜单实例:

  1. <form action="" method="get">  
  2. <label>新建浏览器网页窗口下拉跳转菜单</label>  
  3. <select name=""onchange="javascript:if (this.options[this.selectedIndex].value != '')
    window.open(this.options[this.selectedIndex].value);this.options[0].selected;"
    >  
  4. <option value="0">DIVCSS5</option>  
  5. <option value="1">DIVCSS5</option>  
  6. </select>  
  7. </form>  

四、DW软件里截图表单效果:   -   TOP

select下拉菜单列表与跳转下拉菜单案例截图
html select下拉菜单列表与跳转菜单案例截图

五、此select表单标签案例在浏览器中效果:   -   TOP

form select案例截图
实例案例截图

完整案例在线演示//www.gsf5k.cn/fanli/form-select.html
完整案例下载地址

六、DIVCSS5对html form select案例总结说明:   -   TOP

1)、form select常常我们使用此表单控件设置网页下拉列表菜单
2)、当我们选择“2、跳转的下拉菜单列表”下拉数据后,将会跳转到对于指定设置URL网站。使用select表单下拉菜单实现跳转网站网址非常实用或方便,同时记得加上JS代码。
3)、html form、form input、html input、input type、form表单

学习22选5河南最新开奖今欢迎来DIVCSS5!

如需转载,请注明文章出处和来源网址://www.gsf5k.cn/html/h336.shtml

我要分享到:
上一篇:HTML <EM>强调标签元素
下一篇:HTML5知识

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
22选5河南最新开奖今文章修订日期:2013-01-08 12:03 原创:22选5河南最新开奖今
本文22选5河南最新开奖今 www.gsf5k.cn DIVCSS5版权所有。

  • 其实啊也不奇怪,菜做好了先来一份尝尝味道于是提前开吃了。 2019-01-19
  • 承认私有制存在,却否认阶级分析。睁着眼睛说瞎话,强坛独一份。 2019-01-19
  • 广东院士联合会:“新起点”开启助力广东创新驱动发展“新征程” 2019-01-18
  • 寻找把他吃剩的饭菜找包后,丢给四两吃,这能算道德?[微笑] 2019-01-18
  • 长治市争创全国禁毒示范城市 2019-01-18
  • 21世纪中国的马克思主义 2019-01-18
  • 6月温州市区普通商品住房地块集中出让 2019-01-17
  • 中国动力电池市场竞争加剧 70家公司仅占3成份额 2019-01-17
  • 儿童版《流星花园》?胡可晒安吉小鱼儿与七宝合影 2019-01-17
  • 6个关键词 教你读懂最新癌症预防报告 2019-01-16
  • 嘱望上合 青岛之约 2019-01-16
  • 勤劳的女人最美丽 河南温县“农家女”创业带富乡邻 2019-01-16
  • 增强“四个意识”做政治上的明白人 2019-01-15
  • 郪江,隐藏在川东丘陵中的战国小镇文章中国国家地理网 2019-01-15
  • 第六届(2017)赛迪学术年会系统测评分论坛举办 2019-01-15
  • 279| 938| 963| 939| 224| 899| 351| 994| 581| 107|