您的位置:CSS主页 > HTML基础 >

Html form select下拉列表菜单跳转菜单标签元素

 

 Html form select下拉列表菜单跳转菜单表单标签知识与教程

表单select控件目录
  1. select语法与结构
  2. Form select标签使用说明
  3. Form select使用种类
  4. DW软件里截图表单效果
  5. 浏览器中效果
  6. html form select案例总结
  7. 在线演示

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

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

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

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

上图为日期下拉列表案例运用截图

3、Form select使用种类:   -   TOP

Select下拉菜单列表表单标签,常使用有两种:
1)、普通下拉列表菜单
代码如下:

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

2)、跳转下拉列表菜单(如常见点击后跳转到选择网站)
代码如下:
 

  1. <form action="" method="get"> 
  2.    <label>2、跳转的下拉列表菜单</label> 
  3.    <select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)"> 
  4.        <option value="http://www.thinkcss.com/">ThinkCSS</option> 
  5.        <option value="http://www.divcss5.com/">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控件实现跳转的列表菜单效果。

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

普通下拉列表菜单控件效果与跳转菜单最终呈现样式相同,当选择后却执行不同。

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

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

7、form select下拉菜单与跳转菜单在线演示:   -   TOP

网址:http://www.thinkcss.com/yanshi/form-select.html

标签(Tag): 菜单 form 跳转 跳转菜单 下拉列表 select

更多

上一页: 上一篇:Html form input表单标签元素
下一页: 下一篇:HTML DIV标签元素

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-06-30     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/a23.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息