BootStarp的form表单的基本写法

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了BootStarp的form表单的基本写法相关的知识，希望对你有一定的参考价值。

 

代码如下：

<!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表单的基本写法的主要内容，如果未能解决你的问题，请参考以下文章

Spring Boot 一个接口同时支持 form 表单、form-data、json 优雅写法

Vue3 form表单通过ref获取dom的写法

SpringBoot 一个接口同时支持 form 表单form-datajson 的优雅写法

Spring Boot 一个接口同时支持 form 表单form-datajson 的优雅写法

bootstarp表单—利用bootstarp的响应式

SpringBoot中表单提交报错“Content type ‘application/x-www-form-urlencoded；charset=UTF-8‘ not supported“(代码片段