表单 - Forms

垂直排列表单

一般输入控件都用 .form-group元素包裹起来

<form>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>

    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>

    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>

    <button type="submit" class="btn btn-primary">Login</button>
</form>

01.PNG

水平排列表单

水平排列表单要给表单添加 .form-horizontal 样式，同一行上的元素用 .form-group包裹起来，并且要设定列宽度

<form class="form-horizontal">

    <div class="form-group">
        <label for="inputEmail" class="control-label col-xs-2">Email</label>
        <div class="col-xs-10">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>

    <div class="form-group">
        <label for="inputPassword" class="control-label col-xs-2">Password</label>
        <div class="col-xs-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

02.PNG

内联式表单

使用 .form-inline 样式，为了保证残障人士可以使用屏幕阅读器，必须为每个输入控件设置一个 Label ，并将其设置为 .sr-only 样式。外观呈现：所有元素都在同一行内

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

03.PNG

静态文本

使用 .form-control-static 样式

<form class="form-horizontal">

    <div class="form-group">
        <label for="inputEmail" class="control-label col-xs-2">Email</label>
        <div class="col-xs-10">
            <!-- 静态文本 -->
            <p class="form-control-static">harrypotter@mail.com</p>
        </div>
    </div>

    <div class="form-group">
        <label for="inputPassword" class="control-label col-xs-2">Password</label>
        <div class="col-xs-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-offset-2 col-xs-10">
            <button type="submit" class="btn btn-primary">Login</button>
        </div>
    </div>
</form>

04.PNG

输入控件的大小

输入控件可以设置大中小三种样式，大为 .input-lg 小为 .input-sm

<form>
    <!-- 大 -->
    <div class="row">
        <div class="col-xs-6">
            <input type="text" class="form-control input-lg" placeholder="Large input">
        </div>

        <div class="col-xs-6">
            <select class="form-control input-lg">
                <option>Large select</option>
            </select>
        </div>
    </div>


    <br>
    <!-- 中 -->
    <div class="row">
        <div class="col-xs-6">
            <input type="text" class="form-control" placeholder="Default input">
        </div>

        <div class="col-xs-6">
            <select class="form-control">
                <option>Default select</option>
            </select>
        </div>
    </div>


    <br>
    <!-- 小 -->
    <div class="row">
        <div class="col-xs-6">
            <input type="text" class="form-control input-sm" placeholder="Small input">
        </div>

        <div class="col-xs-6">
            <select class="form-control input-sm">
                <option>Small select</option>
            </select>
        </div>
    </div>
</form>

05.PNG

输入控件列宽设置

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

<form>

    <div class="row">
        <div class="col-xs-3">
            <input type="text" class="form-control">
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control">
        </div>
        <div class="col-xs-5">
            <input type="text" class="form-control">
        </div>
    </div>

    <br>
    <div class="row">
        <!-- 3列 -->
        <div class="col-xs-3">
            <textarea class="form-control"></textarea>
        </div>
        <!-- 4列 -->
        <div class="col-xs-4">
            <textarea class="form-control"></textarea>
        </div>
        <!-- 5列 -->
        <div class="col-xs-5">
            <textarea class="form-control"></textarea>
        </div>
    </div>

    <br>
    <div class="row">
        <div class="col-xs-3">
            <select class="form-control">
                <option>Select</option>
            </select>
        </div>
        <div class="col-xs-4">
            <select class="form-control">
                <option>Select</option>
            </select>
        </div>
        <div class="col-xs-5">
            <select class="form-control">
                <option>Select</option>
            </select>
        </div>
    </div>
</form>

06.PNG

水平排列表单中控件大小的设置

需要在表单组中设置 .form-group-lg 和 .form-group-sm 样式

<form class="form-horizontal">
    <div class="form-group form-group-lg">
        <label class="col-sm-3 control-label" for="inputLarge">Large label</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="inputLarge" placeholder="Large input">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label" for="inputDefault">Default label</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="inputDefault" placeholder="Default input">
        </div>
    </div>

    <div class="form-group form-group-sm">
        <label class="col-sm-3 control-label" for="inputSmall">Small label</label>
        <div class="col-sm-9">
            <input type="text" class="form-control" id="inputSmall" placeholder="Small input">
        </div>
    </div>
</form>

07.PNG

只读状态和禁用状态

在元素上设置 readonly 属性和 disable 属性

<form>
    <input type="text" class="form-control" placeholder="禁用输入框" disabled="disabled">

    <input type="text" class="form-control" placeholder="只读输入框 input" readonly="readonly">
</form>

08.PNG

禁用 fieldset

给 <fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

<!-- 里面的组件全部被禁用 -->
<form>
    <fieldset disabled="disabled">
        <div class="form-group">
            <label for="inputEmail" class="control-label col-xs-2">Email</label>
            <div class="col-xs-10">
                <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="control-label col-xs-2">Password</label>
            <div class="col-xs-10">
                <input type="password" class="form-control" id="inputPassword" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-offset-2 col-xs-10">
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </div>
    </fieldset>
</form>

09.PNG

辅助文本

针对表单控件的“块（block）”级辅助文本

<input type="text" class="form-control">
<span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

10.PNG

表单验证状态

为 .form-group 设置 .has-success .has-warning .has-error 等样式

<form class="form-horizontal">
    <!-- 成功 -->
    <div class="form-group has-success">
        <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
        <div class="col-xs-10">
            <input type="text" id="inputSuccess" class="form-control" placeholder="Input with success">
            <span class="help-block">Username is available</span>
        </div>
    </div>

    <!-- 警告 -->
    <div class="form-group has-warning">
        <label class="col-xs-2 control-label" for="inputWarning">Password</label>
        <div class="col-xs-10">
            <input type="password" id="inputWarning" class="form-control" placeholder="Input with warning">
            <span class="help-block">Password strength: Weak</span>
        </div>
    </div>

    <!-- 错误 -->
    <div class="form-group has-error">
        <label class="col-xs-2 control-label" for="inputError">Email</label>
        <div class="col-xs-10">
            <input type="email" id="inputError" class="form-control" placeholder="Input with error">
            <span class="help-block">Please enter a valid email address</span>
        </div>
    </div>
</form>

11.PNG

所有可以被使用的表单控件

<h1>Sign Up</h1>
<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-xs-3" for="inputEmail">Email:</label>
        <div class="col-xs-9">
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="inputPassword">Password:</label>
        <div class="col-xs-9">
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="confirmPassword">Confirm Password:</label>
        <div class="col-xs-9">
            <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="firstName">First Name:</label>
        <div class="col-xs-9">
            <input type="text" class="form-control" id="firstName" placeholder="First Name">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="lastName">Last Name:</label>
        <div class="col-xs-9">
            <input type="text" class="form-control" id="lastName" placeholder="Last Name">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="phoneNumber">Phone:</label>
        <div class="col-xs-9">
            <input type="tel" class="form-control" id="phoneNumber" placeholder="Phone Number">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">Date of Birth:</label>
        <div class="col-xs-3">
            <select class="form-control">
                <option>Date</option>
            </select>
        </div>
        <div class="col-xs-3">
            <select class="form-control">
                <option>Month</option>
            </select>
        </div>
        <div class="col-xs-3">
            <select class="form-control">
                <option>Year</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="postalAddress">Address:</label>
        <div class="col-xs-9">
            <textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3" for="ZipCode">Zip Code:</label>
        <div class="col-xs-9">
            <input type="text" class="form-control" id="ZipCode" placeholder="Zip Code">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-3">Gender:</label>
        <div class="col-xs-2">
            <label class="radio-inline">
                <input type="radio" name="genderRadios" value="male"> Male
            </label>
        </div>
        <div class="col-xs-2">
            <label class="radio-inline">
                <input type="radio" name="genderRadios" value="female"> Female
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
            <label class="checkbox-inline">
                <input type="checkbox" value="news"> Send me latest news and updates.
            </label>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
            <label class="checkbox-inline">
                <input type="checkbox" value="agree">  I agree to the <a href="#">Terms and Conditions</a>.
            </label>
        </div>
    </div>
    <br>
    <div class="form-group">
        <div class="col-xs-offset-3 col-xs-9">
            <input type="submit" class="btn btn-primary" value="Submit">
            <input type="reset" class="btn btn-default" value="Reset">
        </div>
    </div>
</form>

12.PNG