场景

Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：

text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

适当的 type 声明是必需的，这样才能让 input 获得完整的样式。

举例

添加对输入内容是否为数字的验证

只需要将type改为number，则只能输入数字

<form action="addUser"><div class="form-group"><label for="name">用户名</label><input type="text" class="form-control" id="name" name ="name" placeholder="name"></div><div class="form-group"><label for="age">年龄</label><input type="number" class="form-control" id="age"  name="age" placeholder="age"></div><button type="submit" class="btn btn-default">新增用户</button>
</form>

效果

BootStrap中对input的type自带的验证种类相关推荐

小程序中输入框input的type属性 text、number、idcard、digit 区别
微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点.有个 X 键) digit:数 ...
JS中设置input的type=radio默认选中
html: <input id="Radio1" type="radio" value="男" name="st_Sex&q ...
bootstrap中如何使input中的小图标获得点击事件
bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...
JQuery中如何动态修改input的type属性
代码如下: 1 jQuery(".member_id").focus(function() { 2 jQuery(this).val(''); 3 }).blur(function ...
如何隐藏Safari中input输入框内自带的小人图标
如何隐藏Safari中input输入框内自带的小人图标 problem 页面表单包含input,在 safari 浏览器下,右边有个小人标志并且在 safari 16.1 版本发现 safari 1 ...
css3搜索框呼出键盘,移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: 但要实现点击键盘右下角搜索,来发送请求,js代码如下( ...
bootstrap 中这段代码使bundles 失败
bootstrap 中这段代码使bundles 失败 _:-ms-fullscreen, :root input[type="date"], _:-ms-fullscreen, ...
bootstrap中导航、导航栏、表单及自定义表单
导航: bootstrap中使用列表封装了水平导航,其类样式如: 类名描述 .nav 给ul或ol,用于清除列表默认样式,并将列表项水平排列 .nav-item 给li,用于布局 .nav-link ...
bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名
表格: bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下: 类名描述 .table 基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条 .ta ...

BootStrap中对input的type自带的验证种类

场景

举例

效果

BootStrap中对input的type自带的验证种类相关推荐

最新文章

热门文章