bootstrap简单form表单样式

jsp代码：

<div id="content" style="background-color: white;">
                    <form class="form-horizontal" id="smartForm">
                        <input id="creator_id" name="creator_id" value="${sessionScope.user.id }" type="hidden">
                     <fieldset>
                        <legend>指标定义</legend>
                         <div class="form-group">
                           <label for="disabledSelect"  class="col-sm-2 control-label text-right">编号：</label>
                           <div class="col-sm-4">
                                <input type="text" placeholder="编号" id="number" name="number" class="form-control" >
                           </div>
                           <div class="col-sm-6 control-label text-left">
                                        <font color="red"><b>*</b></font>
                                    </div>
                        </div>
                        <div class="form-group">
                           <label for="disabledSelect"  class="col-sm-2 control-label text-right">指标名称：</label>
                           <div class="col-sm-4">
                                <input type="text" placeholder="指标名称" id="name" name="name" class="form-control" >
                           </div>
                           <div class="col-sm-6 control-label text-left">
                                        <font color="red"><b>*</b></font>
                                    </div>
                        </div>
                         <div class="form-group">
                           <label for="disabledSelect"  class="col-sm-2 control-label text-right">定义：</label>
                           <div class="col-sm-4">
                                <input type="text" placeholder="指标定义" id="define" name="define" class="form-control" >
                           </div>
                           <div class="col-sm-6 control-label text-left">
                                        <font color="red"><b>*</b></font>
                                    </div>
                        </div>
                        <div class="form-group">
                           <label for="disabledSelect"  class="col-sm-2 control-label text-right">算法：</label>
                           <div class="col-sm-8">
                                <textarea class="form-control" rows="3" id="diamond" name="diamond"></textarea>
                           </div>
                        </div>
                          <div class="col-sm-2 control-label text-left">
                                        <font color="red"><b> </b></font>
                                    </div>
                    </fieldset>

                        <div class="text-center">
                            <button type="button" class="btn btn-primary"  onclick="doSubmit()">提交</button>
                            <button type="button" class="btn btn-default" onclick="canclepage()">取消</button>

                        </div>

        </form>
    </div>
时间： 2024-07-31 16:41:40

bootstrap简单form表单样式的相关文章

还不错的Table样式和form表单样式

作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <head runat="server"> <title></title> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript">&

黄聪： Bootstrap之Form表单验证神器： BootstrapValidator（转）

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来看看它如何使用吧. 一.源码及API地址 介绍它之前,还是给出它的源码以及API的地址吧. bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator boostrapvalidator api:http://bv.do

$_FILE参数详解及简单&lt;form&gt;表单无刷新上传文件

$_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容如下: $_FILES['myFile']['name'] 客户端文件的原名称 $_FILES['myFile']['type']   文件的 MIME类型,需要浏览器提供该信息的支持,例如"image/gif" $_FILES['myFile']['size']    已上传文件的大小,

bootstrap的form表单控件的事例

<html lang="en"> <head> <title>form</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width

yii2的form表单样式怎么灵活控制呢？

<?php $form = ActiveForm::begin(['id' => 'login-form', 'fieldConfig'=>[ 'template'=> "{label}<div >{input}</div>\n{error}",]]); ?> $form = ActiveForm::begin([ 'fieldConfig'=>[ 'template'=> "{label}\n<div

play freamwork 页面的form表单样式

#{form  @Users.userManagement(), enctype:'multipart/form-data'}         <input type="text" value="${searchCriteria}"  name="searchCriteria" class="input_txt" style=" text-indent:20px; width: 300px;height:28p

form表单提交，上传文件以及提交前验证的问题。

form表单是在开发中比较基础也比较常见的问题了,今天就给大家分享一下有关form表单提交的一些小问题. 首先我们来看一下基本的form结构.这里面我直接引用的bootstrap的form表单的框架. <form class="form-horizontal" id="form1" name="myForm" action="/cgjxx/fwjl_delete_servlet" method="post&qu

BootStrap的table表格，栅格系统，form表单的样式

BootStrap BootStrap的简介 1.    什么是Bootstrap 由两个前端设计师开发的一个前端的框架(Html,css,js) 简化了程序员写css的代码 2.    为什么使用BootStrap,有什么特点 l  学习比较简单,有了Html,css和js就能学习 l  响应式布局,可以适应多种的设备 l  移动设备优先 BootStrap的使用 环境的安装 官网上下载包 要想使用bootStrap 必须加载jquery bootStrap的基本模板 1.     Html文

基于Bootstrap+jQuery.validate Form表单验证实践

项目结构 : github 上源码地址:https://github.com/starzou/front-end-example    点击打开 1.form 表单代码 [html] view plaincopy <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title> <meta charset="utf-8" /> <meta