您的位置:首页 > 网页设计

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

出处:网络 时间:2020-11-11 05:10:12

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输入框下拉菜单内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

最新信息
1.单选框代码<span>性别:</span> <input name="sex"... [详细]
HTML5中input输入框默认提示文字向左向右移动首先演示input输入... [详细]
1、文章背景我们在做后台项目管理时,常用 Ifram 框架来加载页面,即... [详细]
CSS外观属性1.color:文本颜色作用:color属性用于定义文本的颜色取... [详细]
最近在进行无障碍相关文档翻译的时候遇到了 landmark 的概念,在网... [详细]
YY语音是目前国内最受欢迎的直播与聊天交友软件,而在YY语音最具的... [详细]
TextImages是一款能够帮助用户将文字内容制作成图片的软件。该软... [详细]
很多用户在使用钉钉APP的时候都收到过一些系统推荐的好友,其中有... [详细]
微信信息太多,有时候重要的内容来不及回复,回头又容易忘记,所以我们... [详细]
很多用户选择在腾讯会议进行线上开会,有时我们查找参会的人员有谁... [详细]