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 相关文章推荐
CSS3 三维变形实现立体方块特效源码
Dec 15 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
纯CSS3代码实现文字描边
Apr 25 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
php中关于换行的实例写法
2019/09/26 PHP
php桥接模式应用案例分析
2019/10/23 PHP
面向对象Javascript核心支持代码分享
2012/05/23 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
HTML的select控件美化
2017/03/27 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
浅谈vue父子组件怎么传值
2018/07/21 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
对layui中table组件工具栏的使用详解
2019/09/19 Javascript
微信小程序利用for循环解决内容变更问题
2020/03/05 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
2020/05/28 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
沃尔玛旗下墨西哥超市:Bodega Aurrera
2020/11/13 全球购物
汇科协同Java笔试题
2012/03/31 面试题
总结表彰大会主持词
2014/03/26 职场文书
2014年冬季防火方案
2014/05/21 职场文书
党员教师四风问题整改措施思想汇报
2014/10/08 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2014年小学校长工作总结
2014/12/08 职场文书
以权谋私检举信范文
2015/03/02 职场文书
同学聚会祝酒词
2015/08/10 职场文书
windows安装 redis 6.2.6最新步骤详解
2022/04/26 Redis