Html form <select>下拉列表菜单与跳转菜单表单标签篇
- 作者:嘉兴网站建设_嘉兴亿欧网络科技
- 发表时间:2020-04-20 16:40:13
- 来源:http://www.jxeoo.com/
- 类别:
- HTML基础 >
Html form select下拉列表菜单与select跳转菜单表单标签案例教程select目录 Form select语法与结构 Form select标签使用认识 select普通菜单与跳转菜单案例 DW软件里截图表单效果 select表单标签案例图 html form select案例总结一、Form select语法与结构: - TOP<selectname=""><optionvalue="0">DIVCSS5</option><optionvalue="1">DIVCSS5</option></select>二、Form select标签使用说明: - TOP为什么我们要使用Form select下来菜单列表呢?那是我们用于表单下拉选择所需项。下面CSS技术DIVCSS5为大家介绍常见html Form select使用地方。我们使用表单下拉列表选择数据,如省、市、县、年、月等数据,我们即可使用下拉菜单表单进行设置。select 我下拉列表菜单标签Option为下拉列表数据标签Value 为Option的数据值(用于数据的传值)select使用地方,上图为日期下拉列表案例运用截图三、Form select使用种类: - TOPSelect下拉菜单列表表单标签,常使用有两种:1)、普通下拉列表菜单html代码如下:<formaction=""method="get"><label>1、普通下拉列表菜单</label><selectname=""><optionvalue="0">DIVCSS5</option><optionvalue="1">DIVCSS5</option></select></form>2)、跳转下拉列表菜单(如常见点击后跳转到选择网站)常常一些网站做友情链接,与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。跳转菜单html代码如下:<formaction=""method="get"><label>2、跳转的下拉列表菜单</label><selectname="jumpMenu"id="jumpMenu"onchange="MM_jumpMenu('parent',this,0)"><optionvalue="http://www.DIVCSS5.com/">DIVCSS5</option><optionvalue="http://www.divcss5.com/">DIVCSS5</option></select></form>实现跳转还需要在head标签内加入Js脚本动作代码:<scripttype="text/javascript"><!--functionMM_jumpMenu(targ,selObj,restore){//v3.0eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");if(restore)selObj.selectedIndex=0;}//--></script>即可使用表单select控件实现跳转的列表菜单效果。3)、更简洁的新建浏览器(选项卡)窗口跳转菜单:只需<select>标签内加入如下代码:onchange="javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].selected;"得到以下代码:<selectonchange="javascript:if(this.options[this.selectedIndex].value!='')window.open(this.options[this.selectedIndex].value);this.options[0].selected;">完整简单新打开网页窗口跳转菜单实例:<formaction=""method="get"><label>新建浏览器网页窗口下拉跳转菜单</label><selectname=""onchange="javascript:if (this.options[this.selectedIndex].value != '') window.open(this.options[this.selectedIndex].value);this.options[0].selected;"><optionvalue="0">DIVCSS5</option><optionvalue="1">DIVCSS5</option></select></form>四、DW软件里截图表单效果: - TOPhtmlselect下拉菜单列表与跳转菜单案例截图五、此select表单标签案例在浏览器中效果: - TOP实例案例截图完整案例在线演示:http://www.divcss5.com/fanli/form-select.html完整案例下载地址:立即下载(1.502KB)六、DIVCSS5对html form select案例总结说明: - TOP1)、form select常常我们使用此表单控件设置网页下拉列表菜单2)、当我们选择“2、跳转的下拉菜单列表”下拉数据后,将会跳转到对于指定设置URL网站。使用select表单下拉菜单实现跳转网站网址非常实用或方便,同时记得加上JS代码。3)、html form、form input、html input、input type、form表单学习DIV+CSS欢迎来DIVCSS5!DIVCSS5为您推荐的相关联教程css实现下拉表单select美化jq css实现下拉列表美化
上一篇: HTML <u>下划线标签元素 下一篇: HTML <EM>强调标签元素
标签: 嘉兴网站建设 嘉兴企业建站 嘉兴网站优化
上一篇: HTML <u>下划线标签元素 下一篇: HTML <EM>强调标签元素
标签: 嘉兴网站建设 嘉兴企业建站 嘉兴网站优化
新闻动态
- 抖音十万粉丝怎么变现-抖音怎么赚钱、变现?
2021-03-04
- 抖音短视频近几年红的几点原因
2021-03-04
- 嘉兴做外贸网站如何达到好的效果?
2021-02-25
- 嘉兴网站是如何去优化排名的
2021-02-25
- 嘉兴健身行业网站建设有什么作用?
2021-02-25
- 一个问题 微博点赞就是那些数据不好看会影响吗?
2020-11-19
SEO优化
- 嘉兴仿站网专业从事仿站、建站仿站公司、仿企业站、程序开发、网站建设、仿站、网站仿制,找仿站公司克隆网站选《嘉兴亿欧》仅需800元
2021-02-26
- 泉州SEO培训:SEO可量化的操作方法「超排SEO」
2019-11-02
- 上海SEO培训:那些技术方面的变化导致SEO出现问题「超排SEO」
2019-11-02
- 南京SEO培训:SEO新手教程:如何扩展关键词「超排SEO」
2019-11-02
- 小小课堂:什么是SEO?网站优化又是什么?SEO是网站优化吗?「超排SEO」
2019-11-02
- 浑源网:网站SEO外链的的释放先后取决于什么?「超排SEO」
2019-11-02
帮助中心
- 海外房产销售系统上线
2019-03-10
- 好消息,eoocms自助建站系统上线了,让你秒变建站服务商!
2016-08-31
- 书画门户网在线点评系统正式上线
2016-08-31
- 嘉兴房产中介楼盘系统正式投入开发,上线
2014-05-15
- 嘉兴医院网站系统正式上线 嘉兴诊所网站免费在线试用
2014-05-15
- 嘉兴企业网站系统正式上线 嘉兴企业网站免费试用 嘉兴网站免费试用活动
2014-05-15