零基础学做网站培训介绍

当前位置:

如何使用input 做可编辑下拉框

INPUT是制作网站中的填写框的元素,例如制作提交表单中的填写框,都是使用INPUT标签。

常用实例代码:


<input value="www.xuewangzhan.net" >

除了input 之外,我们一般使用SELECT元素制作下拉框:


<select id="name" >
<option value="1">张三</option>
<option value="2">李四</option>
</select>

使用SELECT元素制作下拉框,只能下拉选择,无法自己输入内容。那么如何制作带有编辑填写功能的下拉选择框呢?

如果需要能编辑里面的内容则使用input实现,input有个属性,list,自定义list中的内容即可。


<div class="changeDiv">
<a>性别:</a>
<input id="sex" type="text" list="sexlist">
<datalist id="sexlist">
<option>男</option>
<option>女</option>
</datalist>
</div>

CSS样式代码:


div.changeDiv input {
font-size: 1em;
font-family: 仿宋, serif;
width: 60%;
display: block;
margin-left: 10%;
opacity: 0.8;
padding: 0.2em;
color: #000000;
border-radius: 10px;
background-color: #bed8df;
}

datalist标签里面写下拉的内容,此为一个选择性别的框,里面有男女两个选项,datalist的id一定要和input 的list属性的值一致。

效果如下

如何使用input 做可编辑下拉框

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • APMServ5.2.6本地环境配置软件介绍由于每台电脑的端口使用情况不一样,很多学员在用XAMPP环境配置软件配制本地环境的时候,经常会不成功,出现服务器或
  • SEO软件安装及使用方法 图文教程附件下载 (113264 次浏览)
    SEO软件安装及使用方法第一步:下载软件,下载地址:https://pan.baidu.com/share/link?shareid=482816&uk=404547014第二步:下载后,会得
  • 自己做了一个企业网站主题,自己感觉适合比较传统的企业网站,主题使用说明:1、主题安装成功后,在网站的右上方有百度地图和谷歌地图链接,需要安装
  • 在实现做网站过程中,我们需要经常在自己的网站中添加一个表单。表单里有很多的input输入框,为了用户体验的需要,可以在input框中添加一些提示文字。
  • INPUT是制作网站中的填写框的元素,例如制作提交表单中的填写框,都是使用INPUT标签。常用实例代码:[cce_html]<input value="www.xuewang
  • input输入框输入时触发事件就是当用户在input输入框中输入任意内容时,就会触发某个事件,这在做网站过程中经常会用于制作输入内容时解决点击按钮。
  • 学习了一些HTML知识,我们就可以自己动手去写一些HTML代码了。那么用什么写了,这就要用HTML 编辑器。常用的HTML 编辑器有二种就是记事本和Dreamweave
  • dreamweaver是个可视化的软件,你直接选中你要更改的设置,在编辑器中直接就可以更改了。或是用CSS也可以设置你说的那些内容字体大小、颜色样式。dr
  • 使用DZ程序做论坛网站建设时,它的贴子编辑器是不带发布视频按钮的,需要我们通过论坛网站后台去开启这个功能。DZ论坛编辑器开启视频按钮功能的
  • 在学做网站时,网站导航上经常有下拉菜单,这样可以在有限的导航上呈现出更多的栏目。如何在做网站时,能够制作出下拉菜单呢?【相关知识:如
  • 在制作DEDECMS织梦网站的模板和学习仿站教程时,特别头痛的莫过于去制作网站的多级菜单导航了,很多时候制作出来的下拉菜单导航很多都会移位,使用固
  • 在一些门户网站上,由于项目众多,不可能全部将这些项目显示在主导航上,就可以通过二级菜单,三级导航,甚至四级导航来显示。如何在自己做网站
  • 我们知道Select下拉框是表单中常用的元素,它可以让我们下拉选择自己要的项目。当我们选择好后,要点击提交按钮才会提交表单。那么如何实现Select下拉