網頁設計表單下拉框

1、網頁表單的製作詳細點

HTML表單(Form)是HTML的一個重要部分，主要用於採集和提交用戶輸入的信息。

舉個簡單的例子，一個讓用戶輸入姓名的HTML表單(Form)。示例代碼如下：

<form action="http://www.blabla.cn/asdocs/html_tutorials/yourname.asp" method="get">

請輸入你的姓名：

<input type="text" name="yourname">

<input type="submit" value="提交">

</form>

學習HTML表單(Form)最關鍵要掌握的有三個要點：

表單控制項(Form Controls)
Action
Method
先說表單控制項(Form Controls)，通過HTML表單的各種控制項，用戶可以輸入文字信息，或者從選項中選擇，以及做提交的操作。比如上面的例句里，input type= "text"就是一個表單控制項，表示一個單行輸入框。

用戶填入表單的信息總是需要程序來進行處理，表單里的action就指明了處理表單信息的文件。比如上面例句里的http://www.blabla.cn/asdocs/html_tutorials/yourname.asp。

至於method，表示了發送表單信息的方式。method有兩個值：get和post。get的方式是將表單控制項的name/value信息經過編碼之後，通過URL發送(你可以在地址欄里看到)。而post則將表單的內容通過http發送，你在地址欄看不到表單的提交信息。那什麼時候用get，什麼時候用post呢？一般是這樣來判斷的，如果只是為取得和顯示數據，用get；一旦涉及數據的保存和更新，那麼建議用post。

HTML表單(Form)常用控制項(Controls)
HTML表單(Form)常用控制項有：

input type="text" 單行文本輸入框
input type="submit" 將表單(Form)里的信息提交給表單里action所指向的文件
input type="checkbox" 復選框
input type="radio" 單選框
select 下拉框
textArea 多行文本輸入框
input type="password" 密碼輸入框(輸入的文字用*表示)
表單控制項(Form Control)：單行文本輸入框(input type="text")
單行文本輸入框允許用戶輸入一些簡短的單行信息，比如用戶姓名。例句如下：

<input type="text" name="yourname">

演示示例 演示示例 里的信息提交給表單里action所指向的文件。

表單控制項(Form Control)：復選框(input type="checkbox")
復選框允許用戶在一組選項里，選擇多個。示例代碼：

<input type="checkbox" name="fruit" value ="apple">蘋果<br>

<input type="checkbox" name="fruit" value ="orange">桔子<br>

<input type="checkbox" name="fruit" value ="mango">芒果<br>

用checked表示預設已選的選項。

用checked表示預設已選的選項。

<input type="checkbox" name="fruit" value ="orange" checked>桔子<br>

表單控制項(Form Control)：單選框(input type="radio")
使用單選框，讓用戶在一組選項里只能選擇一個。示例代碼：

<input type="radio" name="fruit" value = "Apple">蘋果<br>

<input type="radio" name="fruit" value = "Orange">桔子<br>

<input type="radio" name="fruit" value = "Mango">芒果<br>

比如密碼。因為用戶輸入的時候？

用checked表示預設已選的選項。

<input type="radio" name="fruit" value = "Orange" checked>桔子<br>

表單控制項(Form Control)：下拉框(select)
下拉框(Select)既可以用做單選，也可以用做復選。單選例句如下：

<select name="fruit" >

<option value="apple">蘋果

<option value="orange">桔子

<option value="mango">芒果

</select>

如果要變成復選，加muiltiple即可。用戶用Ctrl來實現多選。例句：

<select name="fruit" multiple>

用戶還可以用size屬性來改變下拉框(Select)的大小。

表單控制項(Form Control)：多行輸入框(textarea)
多行輸入框(textarea)主要用於輸入較長的文本信息。例句如下：

<textarea name="yoursuggest" cols ="50" rows = "3"></textarea>

其中cols表示textarea的寬度，rows表示textarea的高度。

表單控制項(Form Control)：密碼輸入框(input type="password")
密碼輸入框(input type="password")主要用於一些保密信息的輸入，比如密碼。因為用戶輸入的時候，顯示的不是輸入的內容，而是黑點符號。。例句如下：

<input type="password" name="yourpw">

表單控制項(Form Control)：提交(input type="submit")
通過提交(input type=submit)可以將表單(Form)里的信息提交給表單里action所指向的文件。例句如下：

<input type="submit" value="提交">

表單控制項(Form Control)：圖片提交(input type="image")
ASP 網頁獲取。

input type=image 相當於 input type=submit，不同的是，input type=image 以一個圖片作為表單的提交按鈕，其中 src 屬性表示圖片的路徑。

<input type="image" src ="http://www.blabla.cn/images/icons/go.gif"

alt = "提交" NAME="imgsubmit">

2、網頁製作，慢慢下拉的菜單怎麼做？

這個效果你可以通過2中途徑實現，使用框架或者是使用JavaScript代碼。

1.使用框架：查找框架中的二級菜單組建，如Bootstrap中的導航條中的二級菜單。下面的是一個二級下拉菜單的例子

<nav class="navbar navbar-default">
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

詳細內容參見http://v3.bootcss.com/components/#navbar

2.使用JavaScript代碼。使用jQuery的動畫實現，如slideToggle()可使元素上下滑動，並且可以使用參數控制快慢。

<script>
//ID menu是點擊的以及菜單，觸發的是點擊事件，當然可以換成hover事件，ID submenu是二級菜單層。
$("#menu").click(function(){
    $("#submenu").slideToggle();
});
</script>

slideToggle()請參考http://www.w3school.com.cn/jquery/jquery_slide.asp

3、網頁設計關於日期可以下拉選擇的。求代碼

<html>
<head>
<title>年月日三下拉框聯動 - www.aspxhome.com</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雨)//www.meizz.com'>
</head>
<body onload="YYYYMMDDstart(document.form1,document.form1.SYear,document.form1.SMonth,document.form1.SDay),YYYYMMDDstart(document.form1,document.form1.EYear,document.form1.EMonth,document.form1.EDay)">
<form name=form1>
起始時間：
<select name=SYear onchange="YYYYDD(this.value,document.form1.SMonth,document.form1.SDay)">
<option value="">年</option>
</select>年
<select name=SMonth onchange="MMDD(this.value,document.form1.SYear,document.form1.SDay)">
<option value="">月</option>
</select>月
<select name=SDay>
<option value="">日</option>
</select>日<br><br>
完成時間：
<select name=EYear onchange="YYYYDD(this.value,document.form1.EMonth,document.form1.EDay)">
<option value="">年</option>
</select>年
<select name=EMonth onchange="MMDD(this.value,document.form1.EYear,document.form1.EDay)">
<option value="">月</option>
</select>月
<select name=EDay>
<option value="">日</option>
</select>日
</form>
<script language="JavaScript"><!--
function YYYYMMDDstart(form,year,month,day)
{
MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
//先給年下拉框賦內容
var y = new Date().getFullYear();
for (var i = (y-3); i < (y+5); i++) //以今年為准，前30年，後30年
year.options.add(new Option(i,i));
//賦月份的下拉框
for (var i = 1; i < 13; i++)
month.options.add(new Option(i,i));
year.value = y;
month.value = new Date().getMonth() + 1;
var n = MonHead[new Date().getMonth()];
if (new Date().getMonth() ==1 && IsPinYear(year.options[year.selectedIndex].value)) n++;
writeDay(n,day); //賦日期下拉框Author:meizz
day.value = new Date().getDate();
}
function YYYYDD(str,month,day) //年發生變化時日期發生變化(主要是判斷閏平年)
{
var MMvalue = month.options[month.selectedIndex].value;
if (MMvalue == "" ){ var e = day; optionsClear(e); return;}
var n = MonHead[MMvalue - 1];
if (MMvalue ==2 && IsPinYear(str)) n++;
writeDay(n,day)
}
function MMDD(str,year,day) //月發生變化時日期聯動
{
var YYYYvalue = year.options[year.selectedIndex].value;
if (YYYYvalue == "" ){ var e = day; optionsClear(e); return;}
var n = MonHead[str - 1];
if (str ==2 && IsPinYear(YYYYvalue)) n++;
writeDay(n,day)
}
function writeDay(n,day) //據條件寫日期的下拉框
{
var e = day; optionsClear(e);
for (var i=1; i<(n+1); i++)
e.options.add(new Option(i,i));
}
function IsPinYear(year)//判斷是否閏平年
{ return(0 == year%4 && (year%100 !=0 || year%400 == 0));}
function optionsClear(e)
{
for (var i=e.options.length; i>0; i--)
e.remove(i);
}
function compDate(SY,SM,SD,EY,EM,ED)
{
}
//--></script>
</body>
</html>

4、跪求網頁製作大神 請問一個表單有文本框 下拉列表 和文本域的編程模板是什麼 求模板

<form action="#">
<input name="type" id="type" value="1" />
<select name="11" id="11" >
<option value="1">18-21</option>
<option value="2">22-25</option>
<option value="3">26-29</option>
<option value="4">30-35</option>
<option value="5">Over35</option>
</select>
<textarea rows="10" cols="30"></textarea>
</form>

5、網頁製作問一個關於點擊input彈出選項框的思路

如果你要這么做的話，應該也是可以實現的吧。
不過，你為什麼不直接用表單元素呢？大概還是原生的提交表單的標簽好用些吧。

6、網頁上的導航的每個鏈接當滑鼠經過時出現下拉表單，這個在dreamwaver上如何製作

給你一個純CSS的橫向菜單代碼吧，這個最省網頁資源。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!-- www.div-css.com 網站標准化 2007-4-16 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>純CSS的下拉菜單 支持IE6 IE7 Firefox --www.div-css.com 網站標准化</title>

<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}
.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}
</style>
</head>

<body>

<div class="menu">
<ul>
<li><a href="">XHTML/CSS
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">標准</a></li>
<li><a href="">教程</a></li>
<li><a href="">技術文章</a></li>
<li><a href="">常見問題</a></li>
<li><a href="">布局教程專題</a></li>
<li><a href="">CSS菜單</a></li>
<li><a href="">瀏覽器兼容</a></li>
<li><a href="">滾動條相關</a></li>
<li><a href="">圓角矩形專題</a></li>
<li><a href="">CSS特效欣賞專題</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">AJAX
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">AJAX教程</a></li>
<li><a href="">AJAX技術</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">Javascript
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">JSON</a></li>
<li><a href="">技術文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">DOM</a></li>
<li><a href="">XML</a></li>
<li><a href="">正則表達式
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">正則表達式簡介</a></li>
<li><a href="">正則表達式之道</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="">網站優化</a></li>
<li><a href="">電腦網路</a></li>
<li><a href="">建站技術
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="">PHP</a></li>
<li><a href="">ASP</a></li>
<li><a href="">ASP.NET</a></li>
<li><a href="">JSP</a></li>
<li><a href="">SQL</a></li>
<li><a href="">Flash</a></li>
<li><a href="">Dreamweaver</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

<br /><br />
<a href="http://www.div-css.com" target="_blank">www.div-css.com 網站標准化 2007-4-16</a>
css drop down menu
</body>
</html>

7、在網頁設計DW工具中表單怎麼做「所在地」呢？就是選擇全國各地的下拉選項菜單。

新建那裡有那個表格，點進去有然後呢自己慢慢做了 望採納

8、網頁設計：怎樣在下拉框選擇一個值後讓這個值出現在一個表格固定的方框內

我不知道你程序的具體情況，假如你的程序只有這四個地方顯示日期，那麼你可以在需要顯示年份的地方弄一個span標簽，專門來顯示年份。

像這樣：

<tr>
<td><div align="center">Q1'<span id="s1"></span>'</div></td>
<td><div align="center">Q2'<span id="s2"></span>'</div></td>
<td><div align="center">Q3'<span id="s3"></span>'</div></td>
<td><div align="center">Q4'<span id="s4"></span>'</div></td>
</tr>

給每個span標簽一個id值，然後在你的periodChange(this)函數中對span標簽進行填充！

我寫的periodChange(this)函數如下：

<script type="text/javascript">
function periodChange(obj){
// 獲取四個span標簽的DOM對象
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s3 = document.getElementById("s3");
var s4 = document.getElementById("s4");

// 獲取select被選中的值
var selvalue= obj.options[obj.options.selectedIndex].value;

// 填充
s1.innerHTML = selvalue;
s2.innerHTML = selvalue;
s3.innerHTML = selvalue;
s4.innerHTML = selvalue;
}

</script>

9、跪求網頁製作大神 請問一個表單有文本框 下拉列表 和文本域的模板是什麼

<form method="POST" action="--WEBBOT-SELF--">

 <input type="text" name="T1" size="20" value="這個是文本框"><br>

 <select size="1" name="D1">

 <option>這個是下拉列表</option>

 </select><br>

 <textarea rows="2" name="S1" cols="20">這個是文本域</textarea><br>

 <input type="submit" value="提交" name="B1">

</form>

 

以上就是你說的表單代內碼

 

下邊是代碼運行效容果： 網頁里只要含有這些，就符合你說的模板了

10、表單下拉式菜單製作代碼

去過Microsoft的網站嗎？(如圖一)如果去過的話，那麼你應該對這個站上面那條折疊式菜單的導航欄感到贊嘆吧？（「嘿嘿，還是老蓋強。」「啊，雞蛋怎麼會飛呀？！」）你想過你也能夠做出這樣的效果嗎？來吧，不用羨慕了，心動不如行動！

折疊式菜單實際上是通過層的顯示和隱藏，來達到這種效果的。現在就讓我來說說如何製作吧。Follow Me!先打開DreamWeaver（DreamWeaver對層的支持很好的，也是做網頁的必備工具）。

第一步：先插入一個一行、兩列的表格，方法：單擊菜單上的「插入」（Insert），再選取「表格」(Table)，在「行」（Row）中輸入1，在列（Columns）中輸入2，在單擊「確定」。（如圖二）為了美觀，在表格的屬性欄中，把寬和高分別設為200px和30px，並且把表格的邊框顏色全部設為#FFFFFF，然後分別點選兩個單元格，在屬性欄中將其邊框顏色設為#6699FF。在兩個單元格內分別輸入「資料教程」和「相關軟體」。並在單元格屬性欄中設為中間對齊（順便說一句：在DreamWeaver中不但可以設定表格水平對齊方式，而且可以設定垂直位置對齊方式，在FrontPage就只能自己去寫代碼了，這也是我放棄FrontPage使用DreamWeaver的原因之一！）

第二步，在「資料教程」單元格內插入一個層。方法：單擊菜單上的「插入」(Insert),再選取「層」(Layer)。這時，在單元格中便會出現一個層。這時我們並不滿意層的位置，所以就來移動它。層的移動是非常容易的，選取層，然後按鍵盤上的箭頭鍵就可以移動了，而且不受任何限制，呵呵，簡單吧。同樣，我們為了美觀也可以在層的屬性欄中設定它的大小，把寬和高分別設為100px和90px。

第三步：在層中插入一個三行、一列的表格，方法同第一步。並把寬和高分別設為100px和90px,以填滿這個層。再把邊框顏色做如第一步的設置。在三個單元格中輸入「DreamWeaver」、「FrontPage」和「HotDog」。並在屬性欄中設為中間對齊。
第四步：最關鍵的一步來了！在層的屬性欄中將「可視」設為「隱藏」（Hidden），這樣在打開網頁時便看不見這個層（要是看得見那還叫什麼折疊式呀？！）。接著選取單元格，然後單擊DreamWeaver最下面那一條狀態欄右邊的「顯示行為」按鈕（就是那個最中間的，由兩個圓圈組成的那個），來給單元格添加行為。這里要注意一個：一定要看好了！在行為欄的標題欄上一定要是顯示「<td>」才行，這說明你要添加的這個行為是添加在單元格上的，如果沒有的話那就要重新點選單元格，直到成功為止。（如圖三）

在「行為目標」(Events For)中選擇一個合適的瀏覽器，一般是選擇「IE 4.0」。然後單擊左邊的「+」按鈕，來添加行為。在彈出的菜單中選擇「顯示或隱藏層」(Show-Hid Layers)， 在彈出的窗口中選擇「Layer 「Layer1」」，就是我們剛才添加的那個層了，再單擊「顯示」（Show），確定就行了。這時在行為欄中就出現了我們剛剛添加的這個行為了。接著單擊「事件」(Events)下面右邊的那個向下箭頭按鈕，在彈出菜單中選擇「當滑鼠移上」（OnMouseOver）。好了，這樣當頁面載入時，這個層並不會出現，只有當我們的滑鼠移上單元格時才會出現，怎樣？酷吧？Stop！不要高興得太早了，不要忘了還有一個問題：滑鼠移開單元格之後這個層還是顯示著的呀！並不會自動消失的。（不要把電腦當成全自動的，你不告訴它怎麼做時，它只是一堆廢鐵。^_^）其實解決這個問題也很容易，我們可以添加顯示層的行為，當然也可以添加隱藏層的行為呀！再單擊「+」按鈕，選取「顯示或隱藏層」，還是選取「Layer1」，不過這次我們點擊的是「隱藏」（Hide）了，再確定。然後選擇「事件」，單擊「當滑鼠移開」(OnMouseOut)。OK！完成了。

接下來，按照從第二步到第四步的過程，對「相關軟體」單元格進行操作。一切完成之後，按下「F12」，預覽一下，呵呵，怎麼樣？簡單的幾步，就完成了這樣炫的效果，一切還是DreamWeaver的功勞啊！(效果如圖四)

還有一個需要注意，層的移動有時並不能做到「所見即所得」的效果，在編輯時本來位置很滿意，但是預覽時卻一塌糊塗，這就要多預覽幾次，多修改，才能得到好的效果。