网页设计表单下拉框

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的功劳啊！(效果如图四)

还有一个需要注意，层的移动有时并不能做到“所见即所得”的效果，在编辑时本来位置很满意，但是预览时却一塌糊涂，这就要多预览几次，多修改，才能得到好的效果。