非凡资讯

网页设计培训资讯>上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法

上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
发布日期:2019/3/7 11:07:18    上海普陀网页前端培训班 1266 分享
一、Form select语法与结构:
 
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
 
 
二、Form select标签使用说明:
 
为什么我们要使用Form select下来菜单列表呢?那是我们用于表单下拉选择所需项。
 
下面网页前端培训班老师为大家介绍常见html Form select使用地方。
 
我们使用表单下拉列表选择数据,如省、市、县、年、月等数据,我们即可使用下拉菜单表单进行设置。
select为下拉列表菜单标签
Option为下拉列表数据标签
Value为Option的数据值(用于数据的传值)
 
form select下拉菜单列表使用地方展示
select使用地方,上图为日期下拉列表案例运用截图
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法

 
三、Form select使用种类:
 
Select下拉菜单列表表单标签,常使用有两种:
 
1)、普通下拉列表菜单
html代码如下:
 
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
 
 
2)、跳转下拉列表菜单(如常见点击后跳转到选择网站)
常常一些网站做友情链接,与部门之间使用select下拉标签实现网址跳转。下面我们通过代码与案例接受select跳转菜单应用。
 
跳转菜单html代码如下:
 
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
 
 
实现跳转还需要在head标签内加入Js脚本动作代码:
 
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
 
 
即可使用表单select控件实现跳转的列表菜单效果。
 
3)、更简洁的新建浏览器(选项卡)窗口跳转菜单:

只需select标签内加入如下代码:
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
 
得到以下代码:
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
 
完整简单新打开网页窗口跳转菜单实例:
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法


最终效果图如下:
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法

本文来源:网络。整理:上海普陀网页前端培训学校。更多资讯【请关注微信号:feifanxueyuan】(版权声明:推送文章和图片我们都会注明作者和来源,除非确实无法确认。部分文章和图片推送时未能与原作者取得联系,若涉及版权,烦请原作者联系小编更正,谢谢。)
 
相关文章:
上海普陀网页前端培训班带你学习html标签select下拉列表菜单的语法和用法
免费试听热门课程
在线客服
免费软件
免费试听
最新活动
学费查询
开班查询
就业薪资