HTML中做一个可以输入的下拉框,需要用户添加label标签设置我们的下拉菜单选项的内容相应的选项值,然后设置select标签,在select标签内部设置option选项标签,设置文本框,设置label标签,显示文本框的说明文字,然后添加textarea标签,内部设置我们文本框的相关属性即可。具体 *** 作步骤如下。
1、添加label标签设置我们的下拉菜单选项的内容相应的选项值,然后设置select标签,在select标签内部设置option选项标签,这里需要几个选项就设置几个标签。如下图所示。
2、将下拉菜单需要显示的每一个内容设置在option标签中,如图所示,预览的设置效果,在网页中我们可以看到一个下拉菜单。如下图所示。
3、有时候下拉菜单也需要设置一个默认的值,如果大部分内容都是相同的,可以将它设置为默认值,只需要在它相应的属性中设置为选中状态。如下图所示。
4、再次预览我们的网页,可以看到刚才设置checked的选项已经默认显示在了设置的下拉菜单中选中状态。如下图所以。
5、设置文本框,设置label标签,显示文本框的说明文字,然后添加textarea标签,内部设置文本框的相关属性。如下图所示。
6、最后,可输入下拉框制作完成。如下图所示。
注意事项:
HTML中做一个可以输入的下拉框按照上述步骤 *** 作即可制作完成。
<table><tr>
<td style="font-size: 12px">
既可以输入新的信息,又可以从下拉框中选择:
</td>
<td valign="top">
<select name="myselect" style=" width:220 position:absoluteclip: rect(2 100% 90% 201)" onchange="document.getElementById('txtPlace').value=this.value">
<option value=""> </option>
<option value="列表1"> 列表1 </option>
<option value="列表2"> 列表2 </option>
<option value="列表3"> 列表3 </option>
<option value="列表4"> 列表4 </option>
</select>
<input name="txtPlace" type="text" size="32" style="font-size:12px border: none border-bottom: 1px solid #a0a0a0 background-color:transparent">
</td>
</tr>
</table>
样式请自己定义 功能代码如上
在HTML页面中,获取当前select元素中所选中的那个值和显示值。
<tr>
<th scope="row" width="15%" nowrap >*目标字段</th>
<td><select name="idMbzd" style="width:25%" onchang=”on_idmbzd_change()”>
<option value=”1”>eg1</option>
<option value=”2”>eg2</option>
<option value=”3”>eg2</option>
</select>
</td>
</tr>
<script>
function on_idmbzd_change(){
var sel_obj = document.getElementByIdx("idMbzd ");
var index = sel_obj.selectedIndex
alert(sel_obj.options[index].value)
alert(sel_obj.options[index].text)
}
</script>
设置select元素的选中项:
通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果。
<select id = "sel" >
<option value = "1" >1</ option >
<option value = "2" selected = "selected" >2</ option >
<option value = "3" >3</ option >
</ select >
扩展资料超文本标记语言(外国语简称:HTML)标记标签通常被称为HTML标签,HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。
HTML标签的大小写无关的,例如“主体”<body>跟<BODY>表示的意思是一样的,推荐使用小写。
参考资料来源:百度百科-HTML欢迎分享,转载请注明来源:内存溢出
评论列表(0条)