html盒子form使用,HTML-基于bootstrap的面板panels和表单的form-control

 //面板组件用于将DOM组件插入到一个盒子中

添加品牌

Id:

//向所有的文本元素 、 和 添加 class ="form-control" ;基本表单结构

Name:

搜索名字关键字:

1、使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger,来设置带语境色彩的面板,如

2、面板基本样式

面板标题

这是一个基本的面板
面板脚注

3、常见的表单元素:文本框、文本域、下拉菜单、单选框、复选框、按钮等

4、表单控件加上类form-control后,效果为:

宽度为100%

设置边框为浅灰色

控件具有4px的圆角

设置阴影效果,元素得到焦点时,阴影和边框效果会发生变化

设置placeholder的颜色为#999

5、如果在input之前增加一个label标签,会导致input换行显示,如果必须添加这样一个label标签,且不想让input换行,就需要将label标签也放在容器.form-group中。实现联表单效果只需在form元素中添加类名.form-inline即可,实现原理:将表单控件设置成内联块元素(display:inline-block),让表单控件在一行显示。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个基于 Bootstrap 的多关键词添加表单页面: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Multi-keyword Form</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <h2 class="text-center mb-5">Multi-keyword Form</h2> <form> <div class="form-group"> <label for="keywords">Keywords:</label> <div class="input-group"> <input type="text" class="form-control" id="keywords" name="keywords[]"> <div class="input-group-append"> <button class="btn btn-outline-secondary add-keyword" type="button">Add</button> </div> </div> </div> <div id="keyword-group"></div> <button type="submit" class="btn btn-primary">Submit</button> </form> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(function() { // 添加关键词输入框 $('.add-keyword').click(function() { var html = ` <div class="input-group mt-3"> <input type="text" class="form-control" name="keywords[]"> <div class="input-group-append"> <button class="btn btn-outline-secondary remove-keyword" type="button">Remove</button> </div> </div> `; $('#keyword-group').append(html); }); // 删除关键词输入框 $(document).on('click', '.remove-keyword', function() { $(this).closest('.input-group').remove(); }); }); </script> </body> </html> ``` 这个表单页面有一个初始的关键词输入框和一个 "Add" 按钮,点击 "Add" 按钮可以动态添加更多的关键词输入框,每个关键词输入框都有一个 "Remove" 按钮可以删除该输入框。所有关键词的值都会以数组的形式提交到服务器端。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值