歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > HTML >

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下來菜單列表呢?那是我們用于表單下拉選擇所需項。

下面CSS技術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="http://www.khijtf.live/">DIVCSS5</option> 
  5. <option value="http://www.khijtf.live/">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案例截圖
實例案例截圖

完整案例在線演示http://www.khijtf.live/fanli/form-select.html
完整案例下載地址

六、DIVCSS5對html form select案例總結說明:   -   TOP

1)、form select常常我們使用此表單控件設置網頁下拉列表菜單
2)、當我們選擇“2、跳轉的下拉菜單列表”下拉數據后,將會跳轉到對于指定設置URL網站。使用select表單下拉菜單實現跳轉網站網址非常實用或方便,同時記得加上JS代碼。
3)、html formform inputhtml inputinput typeform表單

學習DIV+CSS歡迎來DIVCSS5!

如需轉載,請注明文章出處和來源網址:http://www.khijtf.live/html/h336.shtml

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2018-08-14 17:37 原創:DIVCSS5
本文www.khijtf.live DIVCSS5版權所有。

江西多乐彩走势图今天 大象彩票安卓 老婆上班赚钱 新昆山麻将翘百搭 剑三pve赚钱多么 天涯直播赚钱吗 王思聪电竞靠什么赚钱 快递录入赚钱是真是假 街机捕鱼下分版 河南华英合同鸭赚钱吗 彩票777游戏 赚钱宝 修复 qq麻将16番规则 下载赚钱任务多提现快的app 哪个手游挂机赚钱的 微信捕鱼达人怎么充值卡充值 在家做手工赚钱串珠子云浮