实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件（一般不使用） --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <title>注册页面表单</title> </head> <body> <h3 class="text-center">用户注册</h3> <div class="container"> <div class="row"> <form action="" class="form-horizontal"> <div class="form-group"> <label for="user" class="col-sm-2 control-label">用户名:</label> <div class="col-sm-8"> <input type="text" id="user" class="form-control" placeholder="输入用户名"> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">密码:</label> <div class="col-sm-8"> <input type="password" id='password' class="form-control" placeholder="********"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">爱好:</label> <div class="col-sm-8"> <div class="checkbox-inline"><label><input type="checkbox" name="hobby[]">篮球</label></div> <div class="checkbox-inline"><label><input type="checkbox" name="hobby[]">足球</label></div> <div class="checkbox-inline"><label><input type="checkbox" name="hobby[]">排球</label></div> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性别</label> <div class='col-sm-8'> <div class="radio"><label><input type="radio" name='sex' value=1>男</label></div> <div class="radio"><label><input type="radio" name='sex' value=2>女</label></div> <div class="radio"><label><input type="radio" name='sex' value=3>保密</label></div> </div> </div> <div class="form-group"> <label for="bz" class="col-sm-2 control-label">备注:</label> <div class="col-sm-8"> <textarea name="bz" id="bz" rows="5" class="form-control"></textarea> </div> </div> <div class="form-group"> <div class="col-sm-4 col-sm-offset-2"> <button class="btn btn-block btn-primary">提交</button> </div> <div class="col-sm-4"> <button class="btn btn-block btn-info">重置</button> </div> </div> </form> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
