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

Maison

interface Web

tutoriel HTML

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

PHPz

Aug 03, 2018 pm 04:22 PM

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)

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

4 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

3 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

4 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

1 Il y a quelques mois By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

1 Il y a quelques mois By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7700

Tutoriel Java

1640

Tutoriel CakePHP

1393

Tutoriel Laravel

1287

Tutoriel PHP

1230

Afficher plus

Related knowledge

HTML est-il facile à apprendre pour les débutants? Apr 07, 2025 am 12:11 AM

HTML convient aux débutants car il est simple et facile à apprendre et peut rapidement voir les résultats. 1) La courbe d'apprentissage de HTML est fluide et facile à démarrer. 2) Il suffit de maîtriser les balises de base pour commencer à créer des pages Web. 3) Flexibilité élevée et peut être utilisée en combinaison avec CSS et JavaScript. 4) Les ressources d'apprentissage riches et les outils modernes soutiennent le processus d'apprentissage.

Les rôles de HTML, CSS et JavaScript: responsabilités de base Apr 08, 2025 pm 07:05 PM

HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.

Quel est un exemple d'une balise de départ dans HTML? Apr 06, 2025 am 12:04 AM

Anexampleofastartingtaginhtmlis, qui abinginsaparagraph.startingtagsaressentialtinhtmlastheyinitiateelements, définit les éventualités, et la faculté de réduction des pages et de la construction de la création.

Comprendre HTML, CSS et JavaScript: un guide pour débutant Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnHTML, CSS, etjavascript: 1) HTMLSTRUCTURESCONTENT, 2) CSSSTYLESIT, et3) JavascriptAdddsInterActivity, Forming TheasisofmodernweBEBExperiences.

Gitee Pages STATIQUE Le déploiement du site Web a échoué: comment dépanner et résoudre les erreurs de fichier unique 404? Apr 04, 2025 pm 11:54 PM

GiteEpages STATIQUE Le déploiement du site Web a échoué: 404 Dépannage des erreurs et résolution lors de l'utilisation de Gitee ...

Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web? Apr 04, 2025 pm 11:30 PM

L'algorithme adaptatif de la position de l'axe y pour la fonction d'annotation Web Cet article explorera comment implémenter des fonctions d'annotation similaires aux documents de mots, en particulier comment gérer l'intervalle entre les annotations ...

HTML, CSS et JavaScript: outils essentiels pour les développeurs Web Apr 09, 2025 am 12:12 AM

HTML, CSS et JavaScript sont les trois piliers du développement Web. 1. HTML définit la structure de la page Web et utilise des balises telles que, etc. 2. CSS contrôle le style de page Web, en utilisant des sélecteurs et des attributs tels que la couleur, la taille de la police, etc. 3. JavaScript réalise les effets dynamiques et l'interaction, par la surveillance des événements et les opérations DOM.

Comment utiliser CSS3 et JavaScript pour réaliser l'effet de la diffusion et de l'agrandissement des images environnantes après avoir cliqué? Apr 05, 2025 am 06:15 AM

Pour obtenir l'effet de la diffusion et de l'élargissement des images environnantes après avoir cliqué sur l'image, de nombreuses conceptions Web doivent obtenir un effet interactif: cliquez sur une certaine image pour faire les environs ...

See all articles