Quelles sont les manières de mettre en page les formulaires Bootstrap ? Comment créer une mise en page de formulaire Bootstrap (avec code)-tutoriel HTML-php.cn

Qu'est-ce que Bootstrap ? Bootstrap est un framework frontal pour le développement rapide d'applications Web et de sites Web. Alors, comment créer un formulaire avec Bootstrap ? Bootstrap utilise des balises HTML simples et des classes étendues pour créer des formulaires de styles différents. Voyons comment Bootstrap crée des formulaires.

Mise en page du formulaire Bootstrap

[Recommandations vidéo associées : Tutoriel Bootstrap]

Bootstrap fournit le types suivants de présentations de formulaire : formulaire vertical (par défaut), formulaire en ligne, formulaire horizontal, formulaire vertical ou de base

La structure de base du formulaire est fournie avec Bootstrap et les contrôles de formulaire individuels reçoivent automatiquement certains styles globaux. Vous trouverez ci-dessous les étapes pour créer un formulaire de base :

Ajoutez role="form" à l'élément parent

Mettez les étiquettes et les contrôles dans un

avec la classe .form-group . Ceci est nécessaire pour obtenir un espacement optimal.

Ajoutez la classe ="form-control" à tous les éléments de texte , et <select>. </select>

Exemple :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 基本表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
        <p class="help-block">这里是块级帮助文本的实例。</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 选择打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>
    
</body>
</html>

Copier après la connexion

Les résultats en cours d'exécution sont les suivants :

Quelles sont les manières de mettre en page les formulaires Bootstrap ? Comment créer une mise en page de formulaire Bootstrap (avec code)

Formulaire en ligne

Si vous devez créer un formulaire avec tous ses éléments en ligne, alignés à gauche et les étiquettes côte à côte, ajoutez la classe .form- à la balise en ligne.

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 内联表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-inline" role="form">
    <div class="form-group">
        <label class="sr-only" for="name">名称</label>
        <input type="text" class="form-control" id="name" 
               placeholder="请输入名称">
    </div>
    <div class="form-group">
        <label class="sr-only" for="inputfile">文件输入</label>
        <input type="file" id="inputfile">
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> 请打勾
        </label>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

</body>
</html>

Copier après la connexion

Les résultats d'exécution sont les suivants :

Quelles sont les manières de mettre en page les formulaires Bootstrap ? Comment créer une mise en page de formulaire Bootstrap (avec code)

Par défaut, Bootstrap L'entrée, la sélection et la zone de texte ont une largeur de 100 %. Lorsque vous utilisez des formulaires en ligne, vous devez définir une largeur sur le contrôle du formulaire.

En utilisant la classe .sr uniquement, vous pouvez masquer l'étiquette d'un formulaire en ligne.

Forme horizontale

Les formes horizontales sont différentes des autres formes non seulement par le nombre de notes, mais aussi par la présentation du formulaire. Pour créer un formulaire disposé horizontalement, procédez comme suit :

Ajoutez la classe .form-horizontal à l'élément parent

Mettez les étiquettes et les contrôles dans un

avec la classe .form-group .

Ajoutez la classe .control-label à l'étiquette.

Exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 水平表单</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="firstname" class="col-sm-2 control-label">名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="firstname" 
                   placeholder="请输入名字">
        </div>
    </div>
    <div class="form-group">
        <label for="lastname" class="col-sm-2 control-label">姓</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="lastname" 
                   placeholder="请输入姓">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 是否记住
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

</body>
</html>

Copier après la connexion

Le résultat est le suivant

Contrôles de formulaire pris en charge

Bootstrap prend en charge les contrôles de formulaire les plus courants, Principalement saisie, zone de texte, case à cocher, radio et sélection.

Zone de saisie (Saisie)

Le champ de texte de formulaire le plus courant est la zone de saisie. Les utilisateurs peuvent y saisir les données de formulaire les plus nécessaires. Bootstrap prend en charge tous les types d'entrée HTML5 natifs, notamment : texte, mot de passe, dateheure, dateheure-locale, date, mois, heure, semaine, numéro, e-mail, URL, recherche, numéro de téléphone et couleur. Des déclarations de type appropriées sont requises pour que l'entrée soit entièrement stylisée.

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 输入框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">标签</label>
        <input type="text" class="form-control" placeholder="文本输入">
    </div>
 </form>

</body>
</html>

Copier après la connexion

Les résultats d'exécution sont les suivants :

Quelles sont les manières de mettre en page les formulaires Bootstrap ? Comment créer une mise en page de formulaire Bootstrap (avec code)

Textarea

Lorsque vous devez saisir plusieurs lignes, vous pouvez utiliser la zone de texte de la zone de texte. Modifiez l'attribut rows si nécessaire (moins de lignes = cases plus petites, plus de lignes = cases plus grandes).

Exemple

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 文本框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <div class="form-group">
        <label for="name">文本框</label>
        <textarea class="form-control" rows="3"></textarea>
    </div>
</form>

</body>
</html>

Copier après la connexion

Le résultat est le suivant :

Quelles sont les manières de mettre en page les formulaires Bootstrap ? Comment créer une mise en page de formulaire Bootstrap (avec code)

case à cocher et bouton radio (Radio)

Des cases à cocher et des boutons radio sont utilisés pour permettre à l'utilisateur de choisir parmi une gamme d'options prédéfinies.

Lors de la création d'un formulaire, utilisez une case à cocher si vous souhaitez que l'utilisateur sélectionne plusieurs options dans une liste. Si vous limitez les utilisateurs à sélectionner une seule option, utilisez la radio.

Utilisez la classe .checkbox-inline ou .radio-inline pour une série de cases à cocher et de boutons radio afin de contrôler leur affichage sur la même ligne.

L'exemple suivant montre les deux types (par défaut et en ligne) :

Instance

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 复选框和单选按钮</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<label for="name">默认的复选框和单选按钮的实例</label>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 1</label>
</div>
<div class="checkbox">
    <label><input type="checkbox" value="">选项 2</label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
    </label>
</div>
<div class="radio">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
    </label>
</div>
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4"  value="option2"> 选项 2
    </label>
</div>

</body>
</html>

Copier après la connexion

Les résultats sont les suivants :

Quelles sont les manières de mettre en page les formulaires Bootstrap ? Comment créer une mise en page de formulaire Bootstrap (avec code)

Sélectionner

Lorsque vous souhaitez que l'utilisateur choisisse parmi plusieurs options, mais par défaut Utilisez une zone de sélection lorsqu'une seule option peut être sélectionné.

Utilisez 后使用 .help-block。下面的实例演示了这点：

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 表单帮助文本</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<form role="form">
    <span>帮助文本实例</span>
    <input class="form-control" type="text" placeholder="">
    <span class="help-block">一个较长的帮助文本块，超过一行，
        需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

</body>
</html>

Copier après la connexion

运行结果如下：

Quelles sont les manières de mettre en page les formulaires Bootstrap ? Comment créer une mise en page de formulaire Bootstrap (avec code)