代码如下：

<!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. Eve-NG-Toolkit

    Eve-NG-Toolkit 来源 http://www.emulatedlab.com/archives/694 参考 http://eve-ng.cn/doku.php   http://foru ...

  2. Linux实用命令行

    对于Linux命令,我在学习和使用过程中是有一个循序渐进的过程的.适合小白学习快速使用.大笑 跳转目录:cd +路径 例如:cd /home/workspace 查看某个文件,常用的是查看日志:tai ...

  3. Ajax请求会话过期处理（JS）

    对于页面来说,处理session过期比较简单,一般只需在过滤器里面判断session用户是否存在,不存在则跳转页面到登陆页即可. 对于Ajax请求来说,这个办法则无效,只能获取到登录页的html代码. ...

  4. 【BZOJ4802】欧拉函数（Pollard_rho）

    [BZOJ4802]欧拉函数(Pollard_rho) 题面 BZOJ 题解 这么大的范围肯定不好杜教筛. 考虑欧拉函数的计算式,显然只需要把\(n\)分解就好了. 直接\(Pollard\_rho\ ...

  5. Spring切面之一

    为什么要使用AOP,在编写程序的时候,除了不必关心依赖的组件如何实现,在实际开发过程中,还需要将程序中涉及的公共问题集中解决.AOP是Aspect-Oriented Programming的简称,意思 ...

  6. Matlab一个错误引发的血案：??? Error using ==> str2num Requires string or character array input.

    Matlab总遇到一些神奇的问题,让人摸不着头脑.昨天编写程序的时候遇到一个让我十分火大的问题,也是自己的matlab基础不好吧. 先描述一下问题,再GUI界面有个listbox,Tag属性是’lis ...

  7. libuv移植到android

    编译环境是linux + ndk,你要先添加好NDK路径的环境变量,然后进入libuv目录执行以下两句完成编译. $ source ./android-configure $NDK gyp $ mak ...

  8. struts2的action中@Autowired注入为null的解决方案

    今天遇到类似问题,记录下来以便以后查阅: @Aspect作用于action,致使action中的@Autowired注入为null的解决方案,以下三种任选一种: 1.去掉@Autowired,改用se ...

  9. Atcoder #017 agc017 A.Biscuits 简单数学

    LINK 题意:水题 求取数,使得和为奇数或偶数的方案数. 思路:统计奇数和偶数,组合求一下发现结果就是$2^{odd-1} + 2^{eve-1}$ 注意特殊情况,即奇数个为0又要求和为奇数的方案数 ...

  10. JavaScript-变量与作用域链

    jQuery片段:  1 var 2     // Will speed up references to window, and allows munging its name. 3     win ...