代码如下：

<!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. 【转】Castle.ActiveRecord的嵌套事务处理

    嵌套的情况下,怎么处理Castle.ActiveRecord的事务? 今天试了一下,原来还是很简单的,只需要使用Castle.ActiveRecord.TransactionMode.Inherits ...

  2. 【洛谷】CYJian的水题大赛【第二弹】解题报告

    点此进入比赛 T1: JerryC Loves Driving 第一题应该就是一道水分题(然而我只水了130分),我的主要做法就是暴力模拟,再做一些小小的优化(蠢得我自己都不想说了). My Code ...

  3. Mybatis笔记五：Mybatis的全局配置文件Configuration.xml讲解

    从 XML 中构建 SqlSessionFactory 每个基于Mybatis应用都是以一个SqlSessionFactory实例为中心.SqlSessionFactory实例可以由SqlSessio ...

  4. linux-----遇到的问题----tab键不补全sh文件不能运行

    在linux上部署tomcat,进入bin目录后 遇到了tab键不补全sh文件不能运行的情况. 如果自己输入sh文件名后也会报错: [x@web bin]$ ./startup.shbash: ./s ...

  5. 常用Transformation算子

    map 产生的键值对是tupple,      split分隔出来的是数组 一.常用Transformation算子 (map  .flatMap .filter .groupByKey .reduc ...

  6. NOIP 2012 洛谷P1081 开车旅行

    Description: 就是两个人开车,只能向东开.向东有n个城市,城市之间的距离为他们的高度差.A,B轮流开车,A喜欢到次近的城市,B喜欢到最近的城市.如果车子开到底了或者车子开的路程已经超过了限 ...

  7. Introducing my blog

    作为一名计算机专业的学生,在我的博客中我会记录以下几方面的内容: 1.在阅读各类专业书籍的过程中,遇到了一些自己通过很大努力才思考.解决出来的问题/知识/概念,我会通过我自己的讲解将这些问题较为全面. ...

  8. Covariance 协方差分析

    sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction.htm?courseId=1005269003&utm_campai ...

  9. P4752 Divided Prime

    P4752 Divided Prime 题目描述 给定一个数字 AA ,这个 AA 由 a_1,a_2,\cdots,a_Na 1 ​ ,a 2 ​ ,⋯,a N ​ 相乘得到. 给定一个数字 BB ...

  10. base64解码

    网络传输经常用base64编码的数据,因此我们需要将其解码成正常字符集合. base64.h #ifdef __cplusplus extern "C" { #endif char ...