<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>表单</title>
        <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
         <script type="text/javascript" src="js/bootstrap.js" ></script>
         <link rel="stylesheet" href="css/bootstrap.css" />
    </head>
    <body>
        <!--创建基本表单-->
        <form role="form " >
            <div class="form-group">
                <label >姓名:</label>
                <input type="text" id="username" class="form-control" />
                <span id="userInfo"></span>
                <label >密码:</label>
                <input type="text" id="password" class="form-control" />
                <input type="button" value="提交" class="btn btn-success"/>
                <span id="passInfo"></span>
            </div>
        </form>
        
    
        
        <!--进一步改进,创建水平表单-->
        <form role="form" class="form-horizontal" >
            <div class="form-group">
                <div class="col-md-3" style="text-align: right;">
                <label class="control-label">姓名:</label>
                </div>
                <div class="col-md-5">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-md-4">
                    <label id="passInfo" style="color: red;" class="control-label">*输入格式不正确</label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-3" style="text-align: right;">
                <label class="control-label">密码:</label>
                </div>
                <div class="col-md-5">
                    <input type="text" class="form-control" />
                </div>
                <div class="col-md-4">
                    <label id="passInfo" style="color: red;" class="control-label">*输入格式不正确</label>
                </div>
            </div>
            <div class="form-group" style="text-align: center;">
                <input type="button" value="提交"  class="btn btn-success"/>
            </div>
        </form>
    </body>
</html>

bookstrap表单的用法相关推荐

  1. EASYUI 表单(FORM)用法

    1,ajax提交只是简单的异步和文本提交.提交的数据需要序列化或程序指定.同时,数据也需要自己验证.如果使用easyui的验证组件validatebox,则需要在提交前调用,如下: if ($(&qu ...

  2. Validate 表单验证用法说明

    前言 Validate 是 jQuery 的一个子插件, 该插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足用户的各种验证需求.该插件捆绑了一套有用的验证方法 ...

  3. html表单文本框作用,HTML表单的用法

    在 HTML 中,表单是由 标记定界的区域,包含文本输入框.按钮.复选框和图形用户界面的其他功能部件.Web 应用程序使用表单以允许最终用户提供要发送到服务器的数据. form元素 常用属性: act ...

  4. php销售清单录入界面,列表,表格,商品清单表,注册表单的用法 2019年8月31日

    1.谈谈你对html标签,元素与属性的理解,并举例说明. 2.列表有几种,如何定义? 3.列表与表格的区别与联系?什么时候用列表,什么时候用表格,为什么? 4.编程实现,用列表制作你的工作计划,要求使 ...

  5. Jquery ValidateEngine表单验证

    Jquery ValidateEngine表单验证 用法:http://www.position-relative.net/creation/formValidator/demoValidators. ...

  6. Angular2+PrimeNG+Form表单

    注:下面我说的Form表单的用法是在一个完整的项目中的用法 1.引入组件 在 app.module.ts 文件中引入组件,代码如下所示: import {FormsModule, ReactiveFo ...

  7. bui java,前端BUI框架表单教程

    在开发后台的过程中,前后端需要频繁的通信,后台页面使用BUI模板,后端使用Java开发. BUI表单使用 BUI提供了4种表单布局,这四种表单布局,我觉得都可以使用 水平表单来替代.DIV本身就是一个 ...

  8. jQuery 表单验证插件,jQuery Validation Engine用法详解

    jQuery 表单验证插件,jQuery Validation Engine用法详解 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身 ...

  9. html如何让a标签提交表单提交,html post请求之a标签的两种用法解析

    这篇文章主要介绍了html post请求之a标签的两种用法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧 html post请求之a标签的两种用法 ...

最新文章

  1. 那个分分钟处理10亿节点图计算的Plato,现在怎么样了?
  2. SQL查询或删除数据库中重复记录
  3. 算法笔记_080:蓝桥杯练习 队列操作(Java)
  4. python mysql 性能监控_MySQL性能监控工具 orzdba python版本
  5. Ubuntu 16.04上安装SkyEye及测试
  6. Windows忘记mysql的密码
  7. Centos-启动network报错RTNETLINK answers: File exists解决方法
  8. linux date 常用格式,5、总结Linux常用命令使用格式,并用实例说明。例如echo、screen、date、ifconfig、export等命令...
  9. oracle odi 资料档案库访问期间出现未分类的异常错误,oracle学习_基本语法
  10. Spring 数据处理框架的演变
  11. 同一个项目,项目名称不一致,这两个项目同时在Eclipse中出现
  12. 算法基础部分3-动态规划
  13. 经典排序算法(四)--基数排序Radix Sort
  14. springMVC学习(1)
  15. 3dmax用vr渲染还是cr渲染器?
  16. 如何从零开始学习Java语言
  17. java 判断标点符号_Java判断中英文符号、标点的实现
  18. isolinux.cfg配置文件的写法
  19. 教你巧用后视镜判断车距
  20. MATLAB利用FFT对信号进行频谱分析

热门文章

  1. vscode问题解决:Setting up SSH Host 202.38.95.226: Copying VS Code Server to host with scp 卡住
  2. 三维地图前端arcgis_通过ArcGIS创建2D及3D地图
  3. OpenShift 容器平台社区版 OKD 4.10.0部署
  4. 【Jenkins】【Jenkins 使用】Jenkins 与 Git
  5. 三种win10任务栏频繁卡死的解决方法
  6. back键的几种使用方法
  7. MongoDB超详细教程(保姆级)
  8. google推出了新闻搜索服务!
  9. 【SQLite数据库学习】 初步了解Sqlite3数据库
  10. 一元线性回归VS多元线性回归