Analyse complète de la façon d'utiliser les formulaires Bootstrap (état du contrôle des formulaires)_compétences javascript

Cet article analyse en détail comment utiliser les formulaires Bootstrap. Cet article se concentre sur les trois situations d'états de contrôle des formulaires Bootstrap. Les amis intéressés peuvent se référer à

État de focus
. L'état focus est obtenu grâce à la pseudo-classe ":focus". L'état de focus du contrôle de formulaire dans le framework Bootstrap supprime le style de contour par défaut et rajoute l'effet d'ombre.

<form role="form" class="form-horizontal">
 <p class="form-group">
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
 </p>
 <p class="col-xs-6">
 <input class="form-control input-lg" type="text" placeholder="焦点点状态下效果">
 </p>
 </p>
</form>

État désactivé
L'état désactivé du contrôle de formulaire dans le framework Bootstrap est implémenté de la même manière que l'état désactivé du formulaire ordinaire. Ajoutez l'attribut "disabled" au contrôle de formulaire correspondant.

<form role="form">
 <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表单已被禁用，不可输入" disabled>
 <fieldset disabled>
 <p class="form-group">
 <label for="disabledTextInput">禁用的输入框</label>
 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
 </p>
 <p class="form-group">
 <label for="disabledSelect">禁用的下拉框</label>
 <select id="disabledSelect" class="form-control">
 <option>不可选择</option>
 </select>
 </p>
 <p class="checkbox">
 <label>
 <input type="checkbox"> 无法选择
 </label>
 </p>
 <button type="submit" class="btn btn-primary">提交</button>
 </fieldset>
</form>

Statut de vérification
Lors de la création d'un formulaire , il est inévitable de faire une vérification de formulaire. Il est également nécessaire de fournir des styles de statut de vérification, et ces effets sont également fournis dans le framework Bootstrap.
1. .has-warning : statut d'avertissement (jaune)
2. .has-error : statut d'erreur (rouge)
3. .has-success : statut de réussite (vert)
Vous avez utilisé il vous suffit d'ajouter le nom de la classe de statut

<form role="form">
 <p class="form-group has-success">
 <label class="control-label" for="inputSuccess1">成功状态</label>
 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
 </p>
 <p class="form-group has-warning">
 <label class="control-label" for="inputWarning1">警告状态</label>
 <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
 </p>
 <p class="form-group has-error">
 <label class="control-label" for="inputError1">错误状态</label>
 <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
 </p>
</form>

au conteneur de groupe de formulaires si vous le souhaitez. encore Si vous souhaitez apprendre en profondeur, vous pouvez cliquer ici pour apprendre, et voici deux sujets passionnants pour vous : Tutoriel d'apprentissage Bootstrap Tutoriel pratique Bootstrap

Ce qui précède est une introduction détaillée à l'état des contrôles de formulaire Bootstrap , et il y aura plus de contenu plus tard. Mise à jour continue, j'espère que tout le monde continuera à y prêter attention.