BootStarp的form表单的基本写法

最新推荐文章于 2022-06-13 23:36:23 发布
最新推荐文章于 2022-06-13 23:36:23 发布
阅读量153 收藏
点赞数
文章标签： javascript 前端 ViewUI
原文链接：http://www.cnblogs.com/zhanghaoliang/p/6294226.html
版权

 

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>BootStrap的基础入门</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--根据设备的宽度自动调整网页的大小 -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="bootstrap/js/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="padding: 50px;background-color: #9fcbcc"> <!--底板背静 -->
    <div class="container" style="padding:50px;background-color: #ffffff;">
        <form class="form-horizontal">
            <div class="form-group">
                    <label class="col-md-2 control-label" for="username">用户名：</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名"/>
                    </div>
            </div>
            <div class="form-group">
                <label for="password" class="col-md-2 control-label">密码：</label>
                <div class="col-md-10" >
                    <input type="password" class="form-control" id="password" placeholder="请输入密码"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">上传图片：</label>
                <div class="col-md-10">
                    <input type="file"/>
                </div>
                <!--<p class="help-block">上传的图片只能是：jpg，png，jpeg</p>-->
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">兴趣爱好：</label>
                <div class="col-md-10">
                    <label class="checkbox-inline"><input type="checkbox" value="lanqiu" >篮球</label> <!-- 这个label 是控制框到文字的距离-->
                    <label class="checkbox-inline"><input type="checkbox" value="zuqiu">足球</label>
                    <label class="checkbox-inline"><input type="checkbox" value="pingpang">乒乓球</label>
                    <label class="checkbox-inline"><input type="checkbox" value="paiqiu">排球</label>
                    <label class="checkbox-inline"><input type="checkbox" value="wangqiu">网球</label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">学历：</label>
                <div class="col-md-10">
                    <label class="radio-inline"><input type="radio" value="chuzhong">初中</label>
                    <label class="radio-inline"><input type="radio" value="gaozhong">高中</label>
                    <label class="radio-inline"><input type="radio" value="daxue">大学</label>
                    <label class="radio-inline"><input type="radio" value="shuoshi">硕士</label>
                    <label class="radio-inline"><input type="radio" value="boshi">博士</label>
                </div>
            </div>
            <div class="form-group">
                <label class="col-md-2 control-label">个人简介：</label>
                <div class="col-md-10">
                    <textarea class="form-control" rows="5" placeholder="请输入你的个人信息。。。"></textarea>
                </div>
            </div>
                <div class="col-md-10 col-md-offset-2">
                    <input type="button" class="btn btn-success" value="提交">
                </div>
        </form>
    </div>
</body>
</html>

　　

转载于:https://www.cnblogs.com/zhanghaoliang/p/6294226.html

z-pan
关注
bootstrap from必填_bootstrap 表单验证使用方法
weixin_36284062的博客
01-26 2574
前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。二、代码以及效果展示1、初级用法来看bootstrapvalidator的描述：A jQuery form val...
Bootstrap之Form表单验证神器： BootstrapValidator
沈荣荣的博客
11-04 1506
1、初级用法 来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件 　　 我们知道，既然是表单验证，那么我们在cshtml页面
bootstarp表单验证
05-10
集成bootstarp前端样式和Jquery的常见表单元素验证示例代码
Bootstrap系列之表单（Forms）
老__L的博客
06-13 5744
表单控件样式、布局选项和用于创建各种表单的自定义组件的示例和使用指南。Bootstrap 表单控件通过类来扩展我们的表单样式。使用这些类可以选择使用它们的定制显示，以便在浏览器和设备之间实现更一致的呈现。确保在所有输入中使用适当的type属性(例如，用于电子邮件地址，用于数字信息)，以利用较新的输入控件，如电子邮件验证、数字选择等。这里有一个演示Bootstrap表单样式的快速示例。 文本表单控件，如、和都使用类进行样式化。包括一般外观、焦点状态、大小等样式。一定要探索我们的自定义表单以进一步样式化。 对
Bootstrap(二) 表单(form)
wangchaohpu的博客
08-28 1150
表单(form)、表单样式、textarea、select、复选框(checkbox)、单选框(radio)、内联表单(form-inline)、水平表单(form-horizontal)、 输入框(input-group) 1、一般的form表单   2、bootstrap表单样式、textarea、select    3、复选框、单选框 3.1复选框   3.2单选框 ...
bootstrap form php,如何使用bootstrap制作form表单
weixin_35645230的博客
03-29 169
Bootstrap可以轻松创建经常看到的表单类型，编码非常的简单，所以本篇文章我们就来看看使用bootstrap创建表单的方法。制作表单的方法首先利用标签设置表单，然后为表单的每个元素设置class =”form - group“(用“”等标签设置你想要设置class =”form-group“的范围)。最后通过在标签中设置class =”form-control“来完成。我们来看bootstra...
form表单写法
erdouzhang
03-23 1万+
<form> <fieldset style="border:none"> <legend style="display:none">登录表单</legend> <p><label for="name">账号: </label><input type="text" id="name" /></p> <p><label for="pw">密码:
bootstrapValidator自定验证方法写法
09-01
最后，`success.form.bv` 和 `error.form.bv` 事件分别在表单验证成功和失败时触发。`issueInvoiceForm.issueInvoiceFormBtn` 可能是一个提交表单的函数，而错误事件处理程序中，去除保存按钮的 `disabled` 属性并...
form表单、控制器中接收表单提交数据的4种方式
weixin_49756484的博客
05-18 5919
Form表单 这篇文章主要讲的是form表单的提交 之前我们接触过的form表单元素是在Bootstrap框架里面，这次也将用到Bootstrap框架去布局（见图表1）通过Bootstrap框架布局呈现的一个效果，就直接讲form表单提交的方式了 图表 1 【复习】 在开始讲form表单提交的方式之前会复习一下form表单元素 Form表单元素 Text： 文本框 <select> <option&gt...
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
01-21
如图，这是使用Validator插件，所完成的功能，效果很强大，也很方便，这边推荐使用这种方式，最后介绍一下原始js验证写法。 首先，导入插件： <link href=<%=basePath %>bootstrap/css/bootstrap-...
用Bootstrap栅格系统表单
编程之路
08-06 2254
Bootstrap 实例 - 页面标题 用户名: 密码:
【07】Bootstrap — Form表单
有心博客
09-04 281
基本实例<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid
学习 Bootstrap 5 之 Forms
qq_37354060的博客
01-22 3945
学习 Bootstrap 5 之 概述表单 (Forms)
bootstrap form表单提交_Flask：表单
weixin_42496830的博客
12-27 1145
摘自 李辉《Flask Web开发实战：入门、进阶与原理解析》WTForms支持在Python中使用类定义表单，然后直接通过类定义生成对应的HTML代码。使用Flask-WTF处理表单扩展Flask-WTF集成了WTForms，使用它可以在Flask中更方便地使用WTForms。Flask-WTF将表单数据解析、CSRF保护、文件上传等功能与Flask集成。Flask-WTF默认为每个表单启用CS...
bootstrap 表单提交验证
热门推荐
蓝星花
02-06 1万+
直接上我写的一个实例: 11 姓名 密码
标准bootstrap3 form表单美化
懒得安分的博客
01-31 7950
/*文本框美化*/ .form-control[type='text'], .form-control[type='password'] { padding-left: 20px; } .form-group:last-child label:before { position: a...
bootstrap validator表单提交初体验 基于HTML
王宜超的博客
11-28 5067
bootstrap validator是twitter的表单验证前端框架。
bootstrap 模态框提交表单
围巾的ACM博客
04-26 7404
&lt;!-- Button trigger modal --&gt; &lt;button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"&gt; 点击就送 &lt;/button&gt; &lt;!-- Modal --&gt;
Bootstrap initTable参数传递
不期而遇
09-15 1447
queryParams: function (params) { var searchParams = $('#searchForm').getValues(); var temp = { paraId: arr['id'], paraLB: arr['leibie'] , ...
Bootstrap formValidation动态表单验证实现
"Bootstrap 表单验证formValidation 是一个强大的前端表单验证库，它能够帮助开发者轻松实现动态的、自定义的验证规则，确保用户输入的数据满足预设条件。" 在Bootstrap表单验证中，formValidation插件是一个非常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值