bootstrap3.0教程之表单(form)使用详解-前端开发

以下是关于“bootstrap3.0教程之表单(form)使用详解”的完整攻略。

以下是关于“bootstrap3.0教程之表单(form)使用详解”的完整攻略。

标题

Bootstrap表单简介

Bootstrap表单是一种用于收集用户输入数据的表单组件。您可以使用Bootstrap的表单组件创建一个美观、易于使用和响应式的表单。

表单元素

在Bootstrap中，表单需要使用一些元素来实现不同的输入字段和交互，以下是一些通常用到的表单元素：

input 元素：用于输入文本、数字、日期等，如单行文本框、密码框、日期选择器等
select 元素：下拉列表框，可以选择一个或多个选项
textarea 元素：输入多行文本
checkbox 元素：复选框，可同时选择多个选项
radio 元素：单选按钮，只能选择一个选项
button 元素：包括提交按钮和重置按钮

Bootstrap表单布局

Bootstrap表单布局被分成12列，可以使用Bootstrap的网格系统来设置表单元素的宽度和排列顺序，可以通过在 form-group 下嵌套 row 和 col 完成表单的布局。

以下是一个包含两个输入框的水平排列的表单布局示例：

<form>
    <div class="form-group row">
        <label for="inputUsername" class="col-sm-2 col-form-label">用户名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名">
        </div>
    </div>
    <div class="form-group row">
        <label for="inputPassword" class="col-sm-2 col-form-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码">
        </div>
    </div>
</form>

Bootstrap表单验证

Bootstrap表单验证是一种交互式的验证方式，当用户输入不符合要求时会实时提示用户错误信息，提高了用户体验和数据输入准确性。

以下是一个包含简单验证的表单示例：

<form>
    <div class="form-group">
        <label for="inputEmail">邮箱</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="邮箱" required>
        <div class="invalid-feedback">请输入正确的邮箱格式</div>
    </div>
    <div class="form-group">
        <label for="inputPassword">密码</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="密码" required>
        <div class="invalid-feedback">请输入密码</div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">登录</button>
    </div>
</form>

以上代码中，表单内的 email 和 password 输入框都添加了 required 属性，并配合 invalid-feedback 显示错误信息。

示例

下面，我将通过两个示例详细讲解如何使用Bootstrap的表单。

示例1：注册表单

下面是一个简单的注册表单，包括用户名、密码和确认密码等元素：

<form>
    <div class="form-group">
        <label for="inputUsername">用户名</label>
        <input type="text" class="form-control" id="inputUsername" placeholder="请输入用户名" required>
        <div class="invalid-feedback">请输入用户名</div>
    </div>
    <div class="form-group">
        <label for="inputPassword">密码</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" required>
        <div class="invalid-feedback">请输入密码</div>
    </div>
    <div class="form-group">
        <label for="inputConfirmPassword">确认密码</label>
        <input type="password" class="form-control" id="inputConfirmPassword" placeholder="请再次输入密码" required>
        <div class="invalid-feedback">请再次输入密码</div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">注册</button>
    </div>
</form>

以上代码中，我们定义了三个输入框，并通过 required 属性指定了它们为必填项，并加上了错误提示信息。

示例2：用户信息表单

下面是一个包含多个表单元素和验证功能的用户信息表单示例：

<form>
    <div class="form-group">
        <label for="inputName">姓名</label>
        <input type="text" class="form-control" id="inputName" placeholder="请输入您的姓名" required>
        <div class="invalid-feedback">请输入您的姓名</div>
    </div>
    <div class="form-group row">
        <label class="col-sm-3 col-form-label">性别</label>
        <div class="col-sm-9">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="radioMale" value="male">
                <label class="form-check-label" for="radioMale">男</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="radioFemale" value="female">
                <label class="form-check-label" for="radioFemale">女</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="radioOther" value="other">
                <label class="form-check-label" for="radioOther">其他</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail">邮箱</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="请输入您的邮箱" required>
        <div class="invalid-feedback">请输入正确的邮箱格式</div>
    </div>
    <div class="form-group">
        <label for="inputPassword">密码</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="请输入密码" required>
        <div class="invalid-feedback">请输入密码</div>
    </div>
    <div class="form-group">
        <label for="inputConfirmPassword">确认密码</label>
        <input type="password" class="form-control" id="inputConfirmPassword" placeholder="请再次输入密码" required>
        <div class="invalid-feedback">请再次输入密码</div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

以上代码中，我们定义了姓名、性别、邮箱、密码和确认密码等表单元素，需要注意的是，性别使用了单选按钮实现，邮箱和密码元素添加了验证功能。

希望这篇攻略对您有所帮助，谢谢。