代码如下：

<!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. 【刷题】HDU 4966 GGS-DDU

    Problem Description Do you think this is a strange problem name? That is because you don't know its ...

  2. 洛谷 P2258 子矩阵

    题目描述 给出如下定义: 子矩阵:从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵(保持行与列的相对顺序)被称为原矩阵的一个子矩阵. 例如,下面左图中选取第2.4行和第2.4.5列交叉位置的元素 ...

  3. 洛谷 [POI2007]BIU-Offices 解题报告

    [POI2007]BIU-Offices 题意 给定\(n(\le 100000)\)个点\(m(\le 2000000)\)条边的无向图\(G\),求这个图\(G\)补图的连通块个数. 一开始想了半 ...

  4. 【bzoj4811】由乃的OJ

    Portal --> bzoj4811 Solution  这题可以用树剖+线段树做也可以用LCT做,不过大体思路是一样的  (接下来先讲的是树剖+线段树的做法,再提LCT的做法) ​  首先位 ...

  5. 【learning】洲阁筛

    问题描述 快速求素数处点值比较好求的积性函数前缀和 大致过程 Step1.求出一定范围内的素数处点值之和(\(g\)) Step2.利用上面的\(g\)求出一个\(f\)然后用\(f\)求出前缀和 具 ...

  6. Spring MVC @CookieValue注解

    @CookieValue的作用 用来获取Cookie中的值 @CookieValue参数 1.value:参数名称 2.required:是否必须 3.defaultValue:默认值 @Cookie ...

  7. Hdu1542 Atlantis

    Atlantis Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  8. C++并发编程 异步任务

    C++并发编程 异步任务 异步任务 std::async (1) std::async 会返回一个 std::future 对象, 这个对象持有最终计算出来的结果. 当需要这个值时, 只需要调用对象的 ...

  9. STL源码分析-bitset

    http://note.youdao.com/noteshare?id=0ea12c1fffd3866c6eddb8dc208c109d

  10. Tensorflow BatchNormalization详解：4_使用tf.nn.batch_normalization函数实现Batch Normalization操作

    使用tf.nn.batch_normalization函数实现Batch Normalization操作 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 吴恩达deeplearnin ...