代码如下：

<!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. MFC中ON_COMMAND,ON_MESSAGE,ON_NOTIFY的区别

    原文链接地址:https://blog.csdn.net/sufwei/article/details/3635489 ON_COMMAND //用来响应相应工具栏和菜单栏的命令WM_COMMAND, ...

  2. 洛谷P1273 有线电视网 【树上分组背包】

    题目描述 某收费有线电视网计划转播一场重要的足球比赛.他们的转播网和用户终端构成一棵树状结构,这棵树的根结点位于足球比赛的现场,树叶为各个用户终端,其他中转站为该树的内部节点. 从转播站到转播站以及从 ...

  3. yd的拔钉子之路之 POI 2017

    写在前面的一些话 如果我NOIP没退役,这大概会写成一个系列吧,所以这算是系列的开始,要写一些奇怪的东西? 首先解释下什么叫“拔钉子”,其实就是在钉子上做题嘛......至于钉子具体是个什么东西就当面 ...

  4. Codeforces 894.C Marco and GCD Sequence

    C. Marco and GCD Sequence time limit per test 1 second memory limit per test 256 megabytes input sta ...

  5. [CQOI2009] 中位数 (前缀和)

    [CQOI2009] 中位数 题目描述 给出1~n的一个排列,统计该排列有多少个长度为奇数的连续子序列的中位数是b.中位数是指把所有元素从小到大排列后,位于中间的数. 输入输出格式 输入格式: 第一行 ...

  6. tf.slice函数解析

    tf.slice函数解析 觉得有用的话,欢迎一起讨论相互学习~Follow Me tf.slice(input_, begin, size, name = None) 解释 : 这个函数的作用是从输入 ...

  7. Spring整合JMS(二)——三种消息监听器（转）

    *注:别人那复制来的 1.3     消息监听器MessageListener 在Spring整合JMS的应用中我们在定义消息监听器的时候一共可以定义三种类型的消息监听器,分别是MessageList ...

  8. Ping命令网络监测

    按照由近到远原则: 1. ping 127.0.0.1 先检查TCP/IP协议栈是否正常. 2. ping 本地ip 检查网卡是否工作正常. 3. ping 网关地址 检查和网关连接性. 4. pin ...

  9. （转）使用Excel批量给数据添加单引号和逗号

    在使用PLSQL连接oracle数据库处理数据的过程中,常用的操作是通过ID查询出数据,ID需要附上单引号,如果查询的ID为一条或者几条,我们手动添加即可,但是如果是几百条.几千条的话,就需要使用一些 ...

  10. Distributed Systems 分布式系统

    先来扯淡,几天是14年12月31日了,茫茫然,2014就剩最后一天了.这两天国大都放假,我给自己安排了四篇博客欠账,这就是其中的第一篇,简单介绍一些分布式系统的一些概念和设计思想吧.后面三篇分别是Ne ...