设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 62|回复: 9

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

[复制链接]

2

主题

49

回帖

136

积分

注册会员

积分
136
发表于 2024-4-20 10:30:48 | 显示全部楼层 |阅读模式
1.单选框代码
  1. <span>性别:</span>
  2.             <input name="sex" value="" type="radio">男
  3.             <input name="sex" value="" type="radio">女
复制代码
需要注意的是单选框name值需保持一致
样式:

复选框
2.复选框代码
  1. <span>喜欢的类型:</span>
  2.     <input type="checkbox">妩媚的
  3.     <input type="checkbox">可爱的
  4.     <input type="checkbox">小鲜肉
  5.     <input type="checkbox">老腊肉
  6.     <input type="checkbox">都喜欢
复制代码
如需要进行form表单提交 则需要name的属性一样
样式:

文本框
3.文本框代码示例
  1. <span>所在地区:</span>
  2.     <input type="text">
复制代码
代码运行界面样式:

文本域
4.文本域代码示例
  1. <span class="te2">自我介绍:</span>
  2.     <textarea rows="2" cols="21"></textarea>
复制代码
注意点:
rows相当于height , cols相当于width
若想设置为禁止拖动则添加代码
  1. <textarea style="resize:none;"></textarea>
复制代码
代码运行示例:

下拉菜单
5.下拉菜单代码示例:
  1. <select name="" id="">
  2.         <option value="" disabled selected hidden>--请选择月--</option>
  3.         <option value="">1</option>
  4.         <option value="">2</option>
  5.         <option value="">3</option>
  6.         <option value="">4</option>
  7.         <option value="">5</option>
  8.         <option value="">6</option>
  9.         <option value="">7</option>
  10.         <option value="">8</option>
  11.         <option value="">9</option>
  12.         <option value="">10</option>
  13.         <option value="">11</option>
  14.         <option value="">12</option>
  15.     </select>
复制代码
注意点:disabled selected hidden这是设置下拉菜单默认提示文字
代码运行演示:

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

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

55

回帖

111

积分

注册会员

积分
111
发表于 2024-5-31 19:33:20 | 显示全部楼层
确实牛逼

4

主题

54

回帖

196

积分

注册会员

积分
196
发表于 2024-6-24 21:28:01 | 显示全部楼层
这个话题很有趣,我想多了解一些

0

主题

61

回帖

123

积分

注册会员

积分
123
发表于 2024-7-12 06:23:11 | 显示全部楼层
让我们一起努力

0

主题

51

回帖

103

积分

注册会员

积分
103
发表于 2024-8-13 11:59:13 | 显示全部楼层
能给个链接吗?我想深入了解一下。

1

主题

22

回帖

69

积分

注册会员

积分
69

热心会员付费会员

发表于 2024-8-24 13:54:44 | 显示全部楼层
感谢分享,受益匪浅!

0

主题

49

回帖

99

积分

注册会员

积分
99
发表于 2024-9-4 19:14:01 | 显示全部楼层
我想了解更多

1

主题

61

回帖

145

积分

注册会员

积分
145
发表于 2024-9-8 22:49:41 | 显示全部楼层
谢谢你的提醒,我会注意的。

8

主题

143

回帖

359

积分

中级会员

积分
359
发表于 2024-9-14 02:52:18 | 显示全部楼层
我不太确定,可能需要再确认一下。

0

主题

49

回帖

97

积分

注册会员

积分
97
发表于 2024-9-24 13:43:41 | 显示全部楼层
同意你的观点,我们有共鸣。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-24 10:32 , Processed in 0.115766 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表