• 目录

表单Form

阅读量: 42 编辑

表单Form

一、表单Form介绍

  • 表单用来做文字输入、数据提交等

  • role="form" // bootstrap 加强语法

  • class="form-horizontal" //水平排列，结合 col-md-* 使用

  • class="form-group" // 一组

  • class="control-label" //label样式

  • class="form-control" // form表单元素

  • 颜色：has-warning、 has-error 、 has-success

二、代码实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link href="./res/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="./res/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="./res/bootstrap.min.js"></script>

</head>
<body style="padding: 50px;">

    <h1>Form表单</h1>
    <form role="form" class="form-horizontal" >
        <div class="form-group">
            <label class="control-label col-md-2">名字</label>
            <div class="col-md-8">
                <input type="text" class="form-control" placeholder="请输入名字">
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">编程语言</label>
            <div class="col-md-8">
                <label class="checkbox-inline">
                    <input type="checkbox" value="1">Java
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" value="2">Python
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">描述</label>
            <div class="col-md-8">
                <textarea class="form-control" rows="3"></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">选择器</label>
            <div class="col-md-8">
                <select class="form-control" multiple>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
        </div>

    </form>

</body>
</html>
  • 目录