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属性box-shadow使用详细教程
Jan 21 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
HTML5 用动画的表现形式装载图像
Mar 08 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 HTML / CSS
HTML5实现获取地理位置信息并定位功能
Apr 25 HTML / CSS
Html5实现用户注册自动校验功能实例代码
May 24 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 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
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
JavaScript代码调试方法实例小结
2019/01/05 Javascript
javascript导出csv文件(excel)的方法示例
2019/08/25 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python实现媒体播放器功能
2018/02/11 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
python使用梯度下降算法实现一个多线性回归
2020/03/24 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
《黄河颂》教学反思
2014/02/07 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python