当前位置:首页 >  站长 >  编程技术 >  正文

HTML5输入框下拉菜单功能的示例代码

 2020-10-16 16:57  来源: 脚本之家   我来投稿 撤稿纠错

  域名预订/竞价,好“米”不错过

这篇文章主要介绍了HTML5输入框下拉菜单功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1.单选框代码

<span>性别:</span>
            <input name="sex" value="" type="radio">男
            <input name="sex" value="" type="radio">女

需要注意的是单选框name值需保持一致

样式:

复选框

2.复选框代码

 <span>喜欢的类型:</span>
    <input type="checkbox">妩媚的
    <input type="checkbox">可爱的
    <input type="checkbox">小鲜肉
    <input type="checkbox">老腊肉
    <input type="checkbox">都喜欢

如需要进行form表单提交 则需要name的属性一样

样式

文本框

3.文本框代码示例

<span>所在地区:</span>
    <input type="text">

代码运行界面样式:

文本域

4.文本域代码示例

<span class="te2">自我介绍:</span>
    <textarea rows="2" cols="21"></textarea>

注意点:

rows相当于height , cols相当于width

若想设置为禁止拖动则添加代码

<textarea style="resize:none;"></textarea>

代码运行示例:

下拉菜单

5.下拉菜单代码示例:

<select name="" id="">
        <option value="" disabled selected hidden>--请选择月--</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
        <option value="">6</option>
        <option value="">7</option>
        <option value="">8</option>
        <option value="">9</option>
        <option value="">10</option>
        <option value="">11</option>
        <option value="">12</option>
    </select>

注意点:disabled selected hidden这是设置下拉菜单默认提示文字

代码运行演示:

到此这篇关于HTML5输入框下拉菜单功能的示例代码的文章就介绍到这了,更多相关HTML5输入框下拉菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/html5/744182.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
html5教程
下拉菜单

相关文章

  • 怎么刷百度下拉框 刷百度下拉框代码

    百度此次的下拉框新模式目前还处于小流量测试阶段,到底会变成什么样,我们不得而知。象百度这样的互联网巨无霸,靠在自己的肩膀上生存的公司,个人不计其数,一旦这个巨人换了一个方向,就会让很多人摇摇欲坠,迷失在互联网里。

  • 刷百度下拉框原理和办法

    对一般刷词者来说,不要频繁修改,假如频繁修改,肯定会影响下拉出单词的时刻和作用。至于现在已经刷出下拉效果的单词,我们可以把点卡量减一半以维持下拉效果,用余额的另一半月卡来刷其他单词。这可以节省开支,做更多的事情,然后降低市场推广的本钱。

  • 百度下拉框营销推广怎么做?有工具可以刷?

    现在很多网民在使用百度搜索相关内容的过程中,会发现只要我们在搜索框中输入关键词,那么百度的下拉框就会出现一些相关关键词,这就是百度下拉框。

  • 做好这5点基本要求 才能算一个合格的HTML5动画

    随着CSS3和HTML5建站技术的发展,动效在网页设计中的作用越来越显著。与静态界面相比,动态的转变更符合人们的认知体系,可以有效降低用户认知负载。这是因为,在网站界面使用动画效果能让元素的变化、界面的转变、层次结构之间的关系更加清晰自然。从某种程度上来说,动效还是用户交互的基础。那么,什么样的动效

  • HTML5/CSS3系列教程:HTML5 区域(Sectioning)的重要性

    不管你以前在web页面布局中如何称呼它们-“区域”还是“块”,我们一直都在布局中将页面分成可视的不同区域。但真正的问题在于我们并没有使用任何正确的工具来实现。一般情况下我们使用典型的网格来划分页头,页面主题,页尾等等区域来实现所谓的页面布局。在过去的很多年以来,我们都使用DIV来帮助我们划分页面区域

热门排行

信息推荐