html表单下拉列表？html表单列表
很多朋友对于html表单下拉列表和html表单列表不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！
如何在网页中做下拉列表请高手指点。谢谢。
下拉框也称为下拉菜单，是表单中最常用的单选选项。您可以启用下拉框来接受多个选项，但我们不推荐这样做。如果希望网站访问者能够进行多项选择，请使用复选框。
在“网页”视图中文档窗口的底部，单击“设计”。
执行下列操作：
添加下拉框
单击表单或网页上要放置下拉框的位置。
在“插入”菜单上，指向“表单”，再单击“下拉框”。
注释如果尚未启动表单，默认情况下，Microsoft FrontPage会创建一个带有“提交”和“重置”按钮的表单区域，并将该域插入到此表单区域中。如果 FrontPage没有自动创建表单区域，说明默认设置已更改，您可以重置该设置。
操作方法
在“工具”菜单上，单击“网页选项”，然后单击“常规”选项卡。
找到并选中“在表单中自动围绕表单域”复选框。
在下拉框旁边或上部，键入其标签。
向下拉框添加选项
双击该下拉框。将打开“下拉框属性”对话框。
在“名称”框中，键入标识下拉框的唯一名称。这是内部名称，网站访问者看不到它。
为了让表单传输可以收集的数据，必须使用唯一的名称。
要添加希望显示在下拉框中的选项，请单击“添加”。
在“添加选项”对话框中，键入希望显示在下拉框中的选项。
如果希望表单结果显示的数据不同于“选项”框中的内容，请选择“指定值”，然后在框中键入值。
例如，菜单中的选项可能是 John，而表单结果中返回的值可能是 Smith。
如果希望指定在网站访问者首次打开表单时默认选中一个选项，请在“添加选项”对话框中的“初始状态”下，单击“选中”。
单击“确定”。
对每个要添加的选项重复步骤 3到 6。
设置下拉框中选项的属性
双击该下拉框。将打开“下拉框属性”对话框。
单击“添加”。将打开“添加选项”对话框。
若要更改“选项”列表中项目的顺序，请单击一个选项，然后单击“上移”或“下移”。
要控制希望显示在下拉框中的选项的数目，请在“高度”框中，键入希望显示的选项的数目。
例如，如果下拉框中有三个选项，您可以将高度设为“3”，这样所有的选项都能看见。
若要允许网站访问者在下拉框中选择多重选项，请单击“允许多重选项”下的“是”。
注释此选项默认情况下设置为“否”。但是，如果选择“是”，请通知网站访问者在选择时必须按下 Ctrl。
单击“样式”访问其他选项，这些选项通过使用级联样式表（级联样式表(CSS)：内嵌在网页中或存储于单独的.css文件中的声明，这些声明已链接到网页中，用于指定特定 HTML元素的外观。）作为嵌入式样式（嵌入式样式：将级联样式表属性和值应用到网页上的元素（例如表格）的方法。甚至当网页没有链接到外部样式表或不包含嵌入式样式表时，也可以使用此方法。）来设置表单格式。
修改
对于这个你就得用框架把网页分成几部分一部分包含下拉菜单下部分是另一部分网页之后下栏菜单选择连接到一个网页但是网页在框架中打开可能说的不太明白你查一下框架的应用就明白了！！
HTML 下拉 列表 框的问题
是可以实现的，只是比较麻烦，参考代码如下：
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
/* CSS Document*/
/* for input_dropMenu*/
body{
line-height:10px;
SCROLLBAR-FACE-COLOR:#eeeedd;
SCROLLBAR-HIGHLIGHT-COLOR:#eeeedd;
SCROLLBAR-SHADOW-COLOR:#666677;
SCROLLBAR-3DLIGHT-COLOR:#666677;
SCROLLBAR-ARROW-COLOR:#666677;
SCROLLBAR-TRACK-COLOR:#efefef;
SCROLLBAR-DARKSHADOW-COLOR:#eeeedd;
}
div{
font-size:9pt;
}
.dropMenu{
overflow:auto;
overflow-x:visible;
height:100%;
border-top:1px solid#aaaabb;
border-left:1px solid#aaaabb;
border-right:1px solid#666677;
border-bottom:2px solid#666677;
background-color:#fdfdfd;
FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=white,endColorStr=#eeeedd);
white-space:nowrap;
}
.dropMenu div{
cursor:Default;
color:#666677;
padding:1px 2px 1px 2px;
padding-top:2px;
script1:expression(
onmouseover=function(){
this.style.background="#0A246A"
this.style.fontWeight="normal"
this.style.color="white"
this.style.paddingLeft="3px"
},
onmouseout=function(){
this.style.background="none"
this.style.fontWeight="normal"
this.style.color="#666677"
this.style.paddingLeft="2px"
},
onclick=function(){
choose_dropMenu(this.parentNode.style.parent1,this)
}
);
}
</style>
</head>
<script language="JavaScript">
// JavaScript Document
/*
=== for input_dropMenu===
=== gotCode 2004-9-21===
*/
function drawShadowDiv(){
sDiv='<div id="shadowDiv"'+
'style="'+
'position:absolute;'+
'left:0px;top:0px;'+
'z-index:1;'+
'background-color:#2C6C85;'+
'layer-background-color:#2C6C85;'+
'display:none;'+
'FILTER:progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=10,finishOpacity=20,startX=0,finishX=0,startY=0,finishY=100);'+
'border:1px solid skyblue;'+
'"></div>'
document.write(sDiv)
}
drawShadowDiv()
function giveItShaow( which, sDiv,type){
if( type=="show"){
sDiv.style.zIndex= which.style.zIndex
sDiv.style.left= which.offsetLeft+ which.parentNode.offsetLeft+ 2;
sDiv.style.top= which.offsetTop+ which.parentNode.offsetTop+ 3;
sDiv.style.width= which.offsetWidth;
sDiv.style.height= which.offsetHeight;
sDiv.style.display="";
}else{
sDiv.style.display="none"
sDiv.style.zIndex= 1
}
}
//===显示下拉框===
/*
current_dropMenu=页面当前下拉框的ID
close_dropMenu=是否可以关闭下拉框
dropMenuGo= setTimeout的变量
*/
var current_dropMenu= null
var close_dropMenu= true
var dropMenuGo= null
function show_dropMenu( which){
current_dropMenu= which
if( dropMenuGo!= null){
clearTimeout(dropMenuGo)
}
//info.innerText= which.style.script1
eval("outSide_"+which.id).style.display=""
which.style.display=""
which.scrollTop= 0
marginTop= parseInt(which.style.marginTop)
if( marginTop<-3){
which.style.marginTop= marginTop+ Math.round(( 0- marginTop)/3)
}else if( marginTop>=-3&& marginTop< 0){
which.style.marginTop= marginTop+ 1
}
if( marginTop>= 0){
clearTimeout(dropMenuGo)
giveItShaow(which,shadowDiv,'show')
return
}
dropMenuGo= setTimeout("show_dropMenu("+which.id+")",10)//
}
//===隐藏下拉框===
function hide_dropMenu(){
if( current_dropMenu!= null){
if( close_dropMenu){
clearTimeout(dropMenuGo)
current_dropMenu.style.display="none"
eval("outSide_"+current_dropMenu.id).style.display="none"
current_dropMenu.style.marginTop= current_dropMenu.parentNode.offsetHeight*(-1)
giveItShaow(current_dropMenu,shadowDiv,'hide')
}
}
}
//===选择下拉框的值===
function choose_dropMenu( which, self){
close_dropMenu= true
hide_dropMenu()
//eval(which).document.body.innerText= self.innerText.substr(0,self.innerText.length-1)
eval(which).value= self.innerText
}
//===除前后空格===
function trim(str){
if( str.substr(0,1)==""){
str= str.substr(1)
}
if( str.substr(str.length-1,1)==""){
str= str.substr(0,str.length-2)
}
return str
}
function replaceFilters( str){
//str= str.replace(//g,"")
str= trim(str)
str= str.replace(/=/g,':')
str= str.replace(/:/g,':"')
str= str.replace(//g,'')
str= str.replace(/:"\/\//g,'://')
str= str.replace(/javascript:"/g,'javascript:')
str= str.replace(/,/g,'",')
str= str+'"'
str= str.replace(/""/g,'"')
str="{"+ str+"}"
return str
}
/*
type=变量名称
defaultVariables=默认的值（不能为空）
*/
function setFilters( type, defaultVariables){
if( filters[type]== undefined){
if( defaultVariables== undefined){
defaultVariables=""
}
eval( type+"=defaultVariables")
}else{
eval( type+"=filters[type]")
}
}
var getStr, cTmpStr
function Separate_Str(){
getStr=""
for( i= 0; i< cTmpStr.length; i++){
if( cTmpStr.substr(i,1)==""){
cTmpStr= cTmpStr.substr(getStr.length+1)
return getStr
}
getStr= getStr+ cTmpStr.substr(i,1)
}return getStr
}
//===drawDropMenu===
/*
iAutoID=自动编号
id=输入框的值
*/
var iAutoID= 0;
function SS_drawDropMenu( filter){
iAutoID++
if( filter== undefined){
filters={}
}else{
eval("filters="+ replaceFilters( filter))
}
setFilters("id","inputFrame"+iAutoID)
setFilters("form","")
setFilters("maxlength","")
setFilters("cItem","没有选项")
setFilters("value","")
setFilters("startColor","white")
setFilters("endColor","#eeeedd")
setFilters("onfocus","'javascript:;'")
setFilters("onblur","'javascript:;'")
setFilters("onmouseover","'javascript:;'")
setFilters("onmouseout","'javascript:;'")
setFilters("onmouseup","'javascript:;'")
setFilters("onmousedown","'javascript:;'")
setFilters("onkeyup","'javascript:;'")
setFilters("onkeydown","'javascript:;'")
setFilters("onchange","'javascript:;'")
if( form!=""){
parent1= form+"."+id
}else{
parent1= id
}
//---建立下拉框选项的html语句---
var itemCount//-下拉框选项的循环次数
var itemHtml=""//-html语句
var dropMenuHeight=""
var inputSize= 0//-下拉框的高度
itemCount= cItem.split('').length
cTmpStr= cItem
for( var i= 0; i< itemCount; i++){
menuValue= Separate_Str()
itemHtml= itemHtml+'<div>'+menuValue+'</div>\n'
if( menuValue.length> inputSize){
inputSize= menuValue.length
}
}
if( itemCount< 5){
dropMenuHeight=(17* itemCount+3)
}else{
dropMenuHeight= 88
}
setFilters("size", inputSize*2)
//---end---
oHtml='<div id="input_dropMenu'+id+'" style="display:inline;height:21px;">\n'+
'<table border="0" cellspacing="0" cellpadding="0">\n'+
'<tr>\n'+
'<td style="font-size:9pt;border:1px solid black;border-right:0px;">\n'+
'<input name="'+id+'" type="text" value="'+value+'" size="'+size+'" maxlength="'+maxlength+'" style="font-size:9pt;border:0px solid black;"'+
' onfocus='+onfocus+
' onblur='+onblur+
' onmouseover='+onmouseover+
' onmouseout='+onmouseout+
' onmouseup='+onmouseup+
' onmousedown='+onmousedown+
' onkeyup='+onkeyup+
' onkeydown='+onkeydown+
' onchange='+onchange+
'>'+
'</td>\n'+
'<td width="16px" style="font-size:9pt;border:1px solid black;border-left:0px;border-right:0px;">\n'+
'<div style="'+
'font-family:webdings;'+
'overflow:hidden;'+
'height:18;'+
'margin-left:-1px;'+
'border:2px solid outset;'+
'FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr='+startColor+',endColorStr='+endColor+');'+
'"'+
' onmousedown="this.style.border=\'2px inset\'"'+
' onmouseup="this.style.border=\'2px outset\'"'+
' onmouseover="this.style.border=\'2px outset\'"'+
' onmouseout="this.style.border=\'2px outset\'"'+
'>\n'+
'<div style="'+
'font-size:9pt;'+
'margin-top:-3px;'+
'margin-left:1px;'+
'cursor:hand;'+
'color:#444444'+
'"'+
' onClick="show_dropMenu(dropMenu'+id+')"'+
' onmousedown="this.style.marginLeft=\'2px\';"'+
' onmouseup="this.style.marginLeft=\'1px\'"'+
' onselectstart="return false"'+
'>6</div>\n'+
'</div>\n'+
'</td>\n'+
'</tr>\n'+
'<tr>\n'+
'<td colspan="2">\n'+
'<div id="outSide_dropMenu'+id+'"'+
' class="outSideDropMenu"'+
' onselectstart="return false"'+
'style="'+
'display:none;'+
'position:absolute;'+
'z-index:21;'+
'margin-top:-1px;'+
'height:'+dropMenuHeight+'px;'+
'width:100%;'+
'overflow:hidden;'+
'overflow-x:visible;'+
'border:0px solid black;'+
'">\n'+
'<div id="dropMenu'+id+'" class="dropMenu" style="margin-top:expression(this.parentNode.offsetHeight*(-1));parent1:'+parent1+'" onMouseover="close_dropMenu=false;" onMouseout="close_dropMenu=true;">\n'+
itemHtml+
'</div>\n'+
'</div>\n'+
'</td>\n'+
'</tr>\n'+
'</table>\n'+
'</div>\n'
document.write(oHtml)
}
</script>
<body onMousedown="hide_dropMenu();">
<form name="form1" method="post" action="">
姓名:
<input name="cName" type="text" id="cName" size="10">
<br>
年龄:
<input name="iAge" type="text" id="iAge" size="10">
<br>
职位:<script>SS_drawDropMenu('id=kkk,form=form1,cItem=科员科长所长局长')</script><script>SS_drawDropMenu('id=kkk2,form=form1,cItem=科员科长所长局长')</script>
<input name="dd" type="button" value="提交" onclick="alert(form1.kkk.value)">
</form>
<p></p></body>
</html>
最常见也最基础的表单设计-下拉列表
前三篇说了表单中的"输入框"、“单选按钮”、“复选框”，那这次就说下拉列表。
下一篇说文本域和按钮。
众所周知没有任何人，愿意填写表单，输入框让过程看起来会变得很复杂。那此时就会用到另外一个组件就是-下拉列表。
他所包含的是选项，因为不需要让用户去进行输入，所以就可以防止用户在输入时带来错误这问题了。
实际在设计中，下拉列表也有很多的“弊端”，所以需要尝试不同的方法去解决问题。
·下拉列表组成
·下拉列表步骤
·下拉列表提示也很重要
·合理排列下拉选项
·下拉列表选项数量
·下拉列表还能做的更多
·简单的数字可以输入
·选日期没那么麻烦
·步进器原则
·步进器组成
·滑块原则
·滑块的细节
·最后
下拉列表由标签[Label]、下拉的列表和选项组成，下拉列表常见的选择为单选。
呼出下拉列表的步骤：点击下拉列表控件→展开列表→滚动扫描列表选择选项关闭→关闭下拉列表。
在输入框中有个元素叫暗提示[placeholder]，作用是在用户填写信息时提供帮助，这条原则也同样适用于下拉列表。这个提示需要简短准确且告诉用户需要选什么，且在展开菜单之后依旧能够看得到选的是什么。
例如上图：“出发日期”就比“请选择”要好的多。
可以根据以往用户的选择数据进行分析，尝试将选择较多的选项放置在优先级靠前的位置。
选项较多时可以尝试只列出几个用常选的，好处在于90%的用户会立即选择满足自己目的的选项，还有10%的人可以选择“其他”(可以尝试加入一个下拉选择或输入框再满足目的)。虽然这样做会忽略10%的用户，但这样优先级排序能够提高90%用户体验。
90%以上的用户最常选的选项，就可以作为默认选项了。
避免在列表中放置太多的选项，当下拉列表中的选项超过15个时，他们将变得很难扫描。在Web端用户需要不断的滚动鼠标才可以找到满足自己目的的选项。再说在移动端有限的屏幕空间内滚动，体验可以说是非常不好了。
假设我们现在有个下拉列表，是需要收集用户的国家信息。一眼就能看出这个下拉列表是按照拼音首字母进行排序的，那“阿尔巴尼亚(A)”是排在首位的。当我要选择“中国(Z)”时候，就会很费力了。
当我要选择“中国”时？那我很清楚我需要选择的是什么，那就可以考虑把下拉选择改变成自动填充选择的列表？那这样只需要通过键盘输入一个“中”，就过滤出包含“中”(或者zhong)的候选选项了。通过简单的输入配合去提高选择的效率。
选项太多需要避免使用下拉列表，选项太少也避免使用下拉列表。
之前在《最常见也最基础的表单设计-单选按钮》中说当2≤选项个数(单选)≤7时，当下拉列表中选项少于7个时，可以考虑使用单选按钮了。
使用单选按钮，用户只需通过扫描就可以了解这问题有几个选项和每个选项是什么，从而可以去除点击触发下拉框的动作。
同样如果是简单的问题，需要回答(是/否)或(打开/关闭)时，就避免使用下拉列表了，使用复选框和开关。
通过程序的帮助去减少选择次数。
例如：如果在充值手机号必须需要用户选择运营商，当用户输入手机号后，那下拉列表就可以帮助用户选择运营商。如果在支付绑卡时需要用户选择银行，当用户输入了银行卡号后，下拉列表就可以帮助用户选择发卡银行和卡片类型了。对于不同的下拉选择会有着成千上万种的设计方法。
在移动端，我们也可以通过“调用位置”这个系统硬件功能来预填选项给到用户。
下拉列表中选项是简单数字的话，下拉列表相比输入费力度更高。可以考虑配合数字键盘输入，这样比下拉选择更简单。根据场景的不同有着不同的解决方法，适合精确数值小范围调整可以考虑使用步进器；那不精确数值大范围调整可以考虑使用滑块；选日期可以使用日期选择器。
选择日期肯定会也经常遇见，如果使用多个(年/月/日)下拉列表给用户带去的是非常不好的体验。那我们可以尝试去使用日期选择器(date picker)。
步进器[Stepper]由增加按钮、减少按钮和按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字去增加(或减少)固定的数量。比方用户更喜欢在电商App里用步进器选择商品数量，此时步进器比起下拉列表更直观，使用起来也就更轻松了。
需要注意最大限制和最小限制，在最大或最小限制时，加入禁用增加(减少)按钮。如果能通过数据分析(90%用户经常选择的)预填一个默认值是提升效率的办法。
试想：步进器的默认值离用户预期的数值越远，点击的次数也就越多，那完成选择的效率也就越低。当默认值无法满足(10%用户经常选择的)，还可以把数值显示改成输入框，再配合上数字键盘输入去做精确的修改。
常见的滑块[Sliders]由可以拖动的按钮、轴、最大数值、最小数值组成。和单选按钮一样，滑块这个行为受现实生活的行为所影响。
场景：我在听歌声音有点轻，我想让声音响点。我使用滑块配和听觉在0%-100%这个区间内调整音量，而不是我要75%的音量这个精确值，这个范围内(近似值)就行，那此时滑块比起下拉列表使用起来更简单了。
根据不同的设计场景，精确值可能是很重要的，那滑块也可以满足。加入一个数值显示，数值随着每次滑动改变。同时数字也当可以点击变成输入框，再配合上数字键盘输入去修改滑块位置。
在移动端，建议把滑块的最大数值、最小数值的位置放置在上方。那在使用时永远可以保持可见。如果在下方就容易被手指遮盖。
拖动时，使用动效做加持，给与用户交互的反馈
选择比输入的效率高，但也不是说什么时候都可以使用下拉列表。根据不同的场景利用他们(下拉列表/步进器/滑块)的原则做出变形，选择也可以变很不一样。例如：可以在下拉列表中把相关的选项分组展示，也可以让下拉列表变形为多选控件等。方便好用的选择和表单目的一样：表单只是个收集用户信息的方式，用户需要的是高效愉快的完成填写。
在上面提到一个日期选择器(date picker)没往细里说，之后在另外说一下。
以上的观点从我个人总结出发，虽说文笔拙劣，但是如果你有不同的意见，欢迎交流～
如果你看到这，下面就是其他组件的文章(广告)了：
《最常见也最基础的表单设计-输入框》
《最常见也最基础的表单设计-单选按钮》
《最常见也最基础的表单设计-复选框》
能放三条广告，心里觉得超爽了...
关于html表单下拉列表，html表单列表的介绍到此结束，希望对大家有所帮助。