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


Posted in HTML / CSS onSeptember 08, 2020

1.单选框代码

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

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

样式:

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

复选框

2.复选框代码

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

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

样式:

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

文本框

3.文本框代码示例

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

代码运行界面样式:

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

文本域

4.文本域代码示例

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

注意点:

rows相当于height , cols相当于width

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

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

代码运行示例:

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

下拉菜单

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输入框下拉菜单功能的示例代码的文章就介绍到这了,更多相关HTML5输入框下拉菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
CSS3 选择器 伪类选择器介绍
Jan 21 HTML / CSS
CSS3媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
html5读取本地文件示例代码
Apr 22 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 #HTML / CSS
HTML5 SEO优化的一些建议
Aug 27 #HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 #HTML / CSS
h5封装下拉刷新
Aug 25 #HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 #HTML / CSS
详解淘宝H5 sign加密算法
Aug 25 #HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 #HTML / CSS
You might like
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Python类如何定义私有变量
2020/02/03 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
HTML5不支持frameset的两种解决方法
2016/11/14 HTML / CSS
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
中学生自我评价范文
2014/02/08 职场文书
教师求职自荐信
2014/03/09 职场文书
生物科学专业自荐书
2014/06/20 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
连锁超市项目计划书
2014/09/15 职场文书
团代会邀请函
2015/02/02 职场文书
2015中学学校工作总结
2015/07/20 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
解除合同协议书范本
2016/03/21 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
一篇文章带你复习java知识点
2021/06/28 Java/Android