代码如下：

<!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>

　　

BootStarp的form表单的基本写法的更多相关文章

  1. 细说 Form (表单)

    细说 Form (表单) Form(表单)对于每个WEB开发人员来说,应该是再熟悉不过的东西了,可它却是页面与WEB服务器交互过程中最重要的信息来源. 虽然Asp.net WebForms框架为了帮助 ...

  2. react引用antd的form表单

    引用form是第三方插件ant插件,官网网址:https://ant.design/.用到的antd的版本是@2.0.1.form(https://ant.design/components/form ...

  3. django之form表单验证

    django中的Form一般有两种功能: 输入html 验证用户输入 #!/usr/bin/env python # -*- coding:utf- -*- import re from django ...

  4. JS form表单提交的方法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  5. 【转】细说 Form (表单)

    阅读目录 开始 简单的表单,简单的处理方式 表单提交,成功控件 多提交按钮的表单 上传文件的表单 MVC Controller中多个自定义类型的传入参数 F5刷新问题并不是WebForms的错 以Aj ...

  6. form表单的两种提交方式，submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  7. 关于form表单或者Ajax向后台发送数据时，数据格式的探究

    最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...

  8. form表单提交引发的血案

    最近,公司某条产品线上的一个功能出了问题:点击查询的时候,该页面在IE上直接卡死,chrome上会卡顿一段时间候提交表单进行查询.拿到这个bug单子以后,简单重现了下,基本上定位到是查询操作中的问题, ...

  9. Django学习笔记（6）——Form表单

    知识储备:HTML表单form学习 表单,在前端页面中属于最常见的一个东西了.基本上网站信息的提交都用到了表单,所以下面来学习Django中优雅的表单系统:Form 表单的主要作用是在网页上提供一个图 ...

随机推荐

  1. Docker学习笔记四：Docker镜像、容器管理工具shipyard

    一.拉取以下几种镜像: docker pull alpineshipyard/shipyarddocker pull swarm docker pull shipyard/shipyarddocker ...

  2. 【JavaScript】简介、<Script>标签及基本概念

    一.前言 时光荏苒,岁月匆匆.今年年初进入数据平台部门转型做Web平台.要想搞好前端肯定要学好JavaScript,于是准备抓上一俩本书从基础学起. 二.内容       简介 JavaScript是 ...

  3. 最小生成树-----Prim算法与Kruskal算法（未完

    生成树(spanning tree):无向联通图的某个子图中,任意两个顶点互相都联通并且形成了一棵树,那么这棵树就叫做生成树. 最小生成树(MST,minimum spanning tree):如果为 ...

  4. Linux下C高手成长过程----经典书籍推荐

    http://www.cnblogs.com/shanzhizi/archive/2012/07/10/2585357.html

  5. Linux（六）shell操作实用技巧

    一.shell操作日期时间 linux 系统为我们提供了一个命令 date,专门用来显示或者设置系统日期时间的.      语法格式为:      date [OPTION]... [+FORMAT] ...

  6. java-压缩文件成zip文件(多文件/单文件/多目录/单目录/无目录)，用于下载

    本博客是自己在学习和工作途中的积累与总结,仅供自己参考,也欢迎大家转载,转载时请注明出处. http://www.cnblogs.com/king-xg/p/6424788.html 上代码: pac ...

  7. [DeeplearningAI笔记]卷积神经网络4.11一维和三维卷积

    4.4特殊应用:人脸识别和神经网络风格转换 觉得有用的话,欢迎一起讨论相互学习~Follow Me 4.11一维和三维卷积 二维和一维卷积 对于2D卷积来说,假设原始图像为\(14*14*3\)的三通 ...

  8. AbstractTransactionalJUnit4SpringContextTests事务回滚

    在单元测试中继承AbstractTransactionalJUnit4SpringContextTests类的 时候,会默认事务回滚. 需要照常执行的话,在执行的测试方法上添加@Rollback(fa ...

  9. 初学者必看：.NET 中的静态与非静态的异同

    对于初学者来说,.NET 的静态和非静态一直比较难掌握,这里做一个总结,介绍静态类和普通类,静态方法和实例方法,静态构造函数和实例构造函数,静态字段和非静态字段的区别. 静态类 vs 普通类 静态类与 ...

  10. c++树，知道前序和中序求后序遍历

    经常有面试题就是知道一棵树的前序遍历和中序遍历让你写出后序遍历,这个慢慢画是能画出来的,但是要很快的弄出来还是要懂原理. 首先说一下三种遍历:所谓的前序后序和中序都是遍历时遍历根节点的顺序.子树的话依 ...