bootstrap表单的基本操作

使用Visual Studio 2015完成表单的自动提交方式 今天我们将使用Visual Studio 2015来完成一个表单提交,同时我们还需要使用到bootstrap和jQuery插件。 首先布局页面我们在一个div标签中嵌套一个form标签,form标签嵌套四个div标签。 第一个div标签中包含有label标签和一个input标签,label标签中的是“姓名”input标签则是用来接收传入的数据的 ... 阅读详情
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>bootstrap表单的基本操作</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <form action="" role="form">
                <fieldset>
                    <legend>用户登陆</legend>
                    <div class="form-group">
                        <label for="name">用户名登陆:</label>
                        <input type="text" class="form-control" id="name" placeholder="UserName">
                        <p class="help-block">可以用手机号和邮箱登陆</p>
                    </div>
                    <div class="form-group">
                        <label for="password">密码:</label>
                        <input type="text" class="form-control" id="password" placeholder="PassWord">
                        <p class="help-block">密码不得少于6位</p>
                    </div>
                </fieldset>
                <button type="submit" name="button" class="btn btn-info btn-block">提交</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>



其他的请参考:https://v3.bootcss.com/css/#forms

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>bootstrap表单自适用设计</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>  
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">

            <form action="" role="form" class="form-horizontal">
                <fieldset>
                    <legend class="text-center">用户登陆</legend>
                    <div class="form-group">
                        <label for="name" class="col-md-2 control-label">用户名登陆:</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="name" placeholder="UserName">
                        </div>   
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-md-2 control-label">密码:</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="password" placeholder="PassWord">
                        </div>
                        
                        
                    </div>                    
                </fieldset>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                       <button type="submit" name="button" class="btn btn-info">提交</button> 
                    </div>
                    
                </div>
            </form>


</div>
</body>
</html>



spring boot基础学习之(一)向属性赋值的几种方法 spring boot新手入门,向Java实体类进行赋值的几种方法,释放双手 阅读详情

相关推荐

Bootstrap 4 表单

Bootstrap 4 的表单组件设计遵循简洁、直观的原则,易于集成到各种项目中。它们基于 HTML5 标签和属性,通过 Bootstrap 的 CSS 类进行样式化和增强。表单组件包括输入框、选择框、单选按钮、复选框等,以及用于布局和分组这些控件的元素。Bootstrap 4 的表单组件为开发者提供了一套强大、灵活的工具,用于构建响应式、易于使用的表单界面。通过掌握这些组件的使用方法和定制技巧,开发者可以快速实现各种表单设计,提高项目的开发效率。

lsx202406的博客 676

bootstrap之表单

关于作者: 郑云飞, 程序员Java(web前端,web后端,oracle数据库or mysql数据库) 艺名:天放 weibo:@tianFang blog: zhengyunfei.iteye.com email: zhengyunfei8@gmail.com 本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单。 本...

zhengun的专栏 415

测试人必看!正交表与Allpairs工具对比:如何选择最适合你的组合测试方案?

本文深入对比了正交表、PICT与Allpairs三种主流组合测试方案,帮助测试人员根据项目场景做出最佳选择。文章分析了各自的核心原理、优劣势及适用场景,特别强调了在涉及复杂约束时PICT工具的强大功能,并提供了从原理学习到CI/CD集成的实战选型指南。

weixin_29224309的博客 268

Django+Bootstrap的form表单

{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>常用样式</title> <link rel="stylesheet" type="text/css" href="{% static 'dist/css/bootstrap.css' %}"/> </head> &

南栀子。的博客 729

ISP调试工程师相关面试问题_001

Qualcomm、MTK等ISP pipeline的框架原理及算法原理,还有调试经验。

notgoodenouf的博客 3552

相机标定原理与张氏标定法

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar

heeweii的博客 2280

Bootstrap初级学习(一)表单<form>

水平表单

Monday_B的博客 501

Starlink vs Kuiper vs OneWeb:三大低轨卫星网络架构对比与实战应用场景解析

本文对比分析了Starlink、Kuiper和OneWeb三大低轨卫星网络架构的技术差异与商业应用场景。从轨道设计、通信性能到商业落地,详细解析了各系统在近地卫星网络领域的独特优势与挑战,为未来全球宽带服务格局提供专业见解。

weixin_29255731的博客 809

Bootstrap4 表单

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下,宽度都是设置为 100%。

unber的博客 954

ThingsBoard集群部署之k8s

今天终于有时间去搞这个啦,拖了很久了,一直没时间,因为我本地没有那么多机器资源,开虚拟机不够,如果租用阿里云服务器,需要有充值的时间,因为这个费用是按小时付费,需要有连贯的时间来搞才行,今天恰好有时间,就开始搞了,弄成功搞出来了,特地写博客记录下来。

AldrichEugene 1175

基于YOLOv8深度学习的夜视行人检测系统:UI界面 + YOLOv8 + 数据集的实现

为了解决这一问题,基于深度学习的行人检测技术,尤其是YOLO(You Only Look Once)系列算法,成为了一个有效的解决方案。本文将详细介绍如何构建一个夜视行人检测系统,利用YOLOv8模型实现高效的行人检测,并设计用户友好的界面以便于使用。本博客详细介绍了如何构建一个基于深度学习的夜视行人检测系统,包括数据准备、YOLOv8模型训练、用户界面设计和实时监控模块的实现。为了将数据集转换为YOLO格式,我们需要确保每个图像文件都有一个对应的标签文件,标签文件中包含行人的边界框信息。

YOLO 1172

Bootstrap表单

文章目录基本实例内联表单水平排列的表单静态控件焦点状态禁用状态只读状态Help text校验状态控件尺寸 基本实例 独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 ...

方温热的博客 2078

32GB Jetson Orin SOM 不能刷机问题排查

拿到了一个新的Orin SOM,当用orin Devkit CVB或定制的CVB不能用Linux_For_Tegra刷机,flash日志(JetPack5.0DP和5.0.1DP都失败了) 2. 确认mb2配置中将CVB的eeprom读取大小设置是否为0 ? 已经确认是正常的 在定制的orin cvb flash上使用Orin devkit som,启动是成功的。但新得到的Orin som并不工作可以排除理由:使用Orin Devkit CVB和Orin SOM(不是Devkit SOM)仍然不能

jzwjzw19900922的博客 1499

Bootstrap 表单

基础表单表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。 对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制

soindy 2579

智慧加油站小程序数据库设计文档

【代码】智慧加油站小程序数据库设计文档。

低代码布道师的博客 1404

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

Bootstrap3 表单

表单 Bootstrap 为表单和表单控件提供了一些全局样式,不需要添加任何辅助类,即可让表单使用默认布局。默认布局中,表单元素采用垂直布局,标签和输入框采用顶对齐方式。 Bootstrap 中创建表单的基本步骤如下: 为每个表单控件<input>、<textarea>和<select>元素添加.form-control类; 把成对的<labe...

歪脖先生的博客 944

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

Bootstrap3 行内表单

行内表单 为<form>元素添加.form-inline类,就可以创建一个表现为inline-block的行内表单。行内表单采用紧凑布局,它的所有控件都在一行内显示,标签和输入框使用左对齐方式。如: <formclass="form-inline"> <divclass="form-group"> <labelfor="...

歪脖先生的博客 2517

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

bootstrap必填红心_bootstrap如何设置表单必填

在有jquery和bootstrap的页面里引入bootstrapValidator.js和bootstrapValidator.css文件然后建立一个form表单,添加表单控件,表单控件必须有绝对定位,不然会报错Form titlelabelSubmit编写js文件,通过js文件验证表单:$(function () {$("#form-test").bootstrapValidator({liv...

weixin_42511712的博客 2100

【亲测免费】 Bootstrap表单构建器教程

Bootstrap表单构建器教程 项目介绍 Bootstrap表单构建器 是一个基于Bootstrap框架的高效工具,它允许开发者和网页设计师通过直观的界面拖拽组件来迅速创建复杂的HTML表单。这个开源项目简化了表单设计流程,无需手动编码即可实现高度定制化的表单结构,极大地提高了工作效率。项目托管在GitHub上,地址为 https://github.com/Bloggify/bootstrap...

gitblog_01129的博客 1174

Bootstrap创建表单,垂直表单,内联表单,水平表单

按照布局的不同,分为三类表单: 垂直表单(默认),内联表单和水平表单 垂直表单: 垂直表单又称基本表单,制作步骤如下 1.向父form标签添加role="form" 2.把标签和控件放在一个类名为form-group的div中,获得最佳间距 3.向所有的文本标签input,textarea,select添加.form-control类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

yangaoyuan1999的博客 1302

bootstrap from必填_bootstrap表单必填项

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以 将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现......这篇文章主要为大家详细介绍了 bootstrap 布局中 input 输入框右侧图标点击功能实现的 相关代码,感兴趣的小伙伴们可以参考一下 使用 bootstrap 布局可以在 inpu...

weixin_33205138的博客 2503

Bootstrap4 表单控件

在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。表单元素 <input>, <textarea>, 和 <select> elements 在使用 .form-control 类的情况下,宽度都是设置为 100%。

unber的博客 652

Bootstrap样式之表单样式

表单 基本表单 class=”form-control”:可以给<input>、<textarea>、<select>元素设置宽度为100% 示例代码: <form action="" method=""> <label>用户名:</label> <input type="text" class="form-control" /> </form> 之前我们写在文本框前面写用户名 一直都是直接写字,

haibianxiatain的博客 2609

用Bootstrap写表单

一、表单 在一个网站中登录注册都会用到表单,下面我们来看看在boostrap中表单的使用。 1、表单的布局 垂直表单(默认) <form role="form"> <div class="form-group"> <label for="name">name</label> <input type="text" clas...

CSH_lucky的博客 753
上一篇: bootstrap表格的基本操作
下一篇: html5 media自适应基本操作
samcPHP
博客等级 码龄9年 2粉丝 19原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值