以HTML5和HTML格式组织字段bootstrap 3 [英] Organisation of fields in a form HTML5 & bootstrap 3
本文介绍了以HTML5和HTML格式组织字段bootstrap 3的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在右侧挑选要填充的字段(输入,选择,...)以填充较大的列标签,并在字段旁边粘贴警告标志(如图所示) 。我尝试了很多配置,但没有任何作用。
非常亲切,非常感谢您提前。
图片
这是我的cshtml页面:
< div < span class =code-attribute> ng-app = SupportDemandeApp ng-controller = SupportDemandeCtrl >
< 表格 class = form-horizontal id = supportDemandeForm name = supportDemandeForm 方法 = 发布 ng-submit = validationSupportDemande(supportDemandeForm。$ valid) novalidate >
< fieldset >
< 图例 > Donnéesdela revue < / legend >
< div class = form-group ng-class = {'has-error' :supportDemandeForm.inputMontantGlobalAffaire。$ touching&& supportDemandeForm.inputMontantGlobalAffaire。$ invalid} >
< label for = inputMontantGlobalAffaire class = col-lg-2 control-label > Montantglobalprévudel'affaire(zh K€)< span style = color:red > * < / span > < / label >
< div class = col-lg -10 >
< input type = 数字 class = form-control id = inputMontantGlobalAffaire name = inputMontantGlobalAffaire ng-model = inputMontantGlobalAffaire ng-change = montantAnnuel() 模式 = [0- 9] +(\\。[0-9] [0-9]?)? data-toggle = popover data-trigger = 悬停 数据展示位置 = right data-content = Build + RUN + Infrastructure required >
< div class = help-block ng-messages = supportDemandeForm.inputMontantGlobalAffaire。$ error ng-if = supportDemandeForm.inputMontantGlobalAffaire。$ touch > < div < span class =code-attribute> ng-message = required > Champ requis < / div > < / div >
< / div >
< / div >
< span class =code-keyword>< div class = form-group ng-class = {'has-error':supportDemandeForm.selectTypeContrat。$ touching&& supportDemandeForm.selectTypeContrat。$ invalid} >
< label for = selectTypeContrat class = col-lg-2 control-label > 键入de contrat(IS / OS)< span 样式 = color:red > * < / span > < / label >
< div class = col-lg-10 >
< 选择 class = 表格控制 id = selectTypeContrat name = selectTypeContrat ng-model = selectedTypeContrat .type ng-init = typeContrat() ng-change = montantAnnuel() ng-options = 类型类型的类型 data-toggle = popover data-trigger = 悬停 数据放置 = 右 data-content = Voiréfinitionsdansl'onglet Type de contrat 必需 > < / select >
< div class = help-block ng-messages < span class =code-keyword> = supportDemandeF orm.selectTypeContrat。$ error ng-if = supportDemandeForm.selectTypeContrat。$ touch > < div ng-message = required > ; Champ requis < / div > ; < / div >
< / div > ;
< / div >
< div class = form-group has-warning has-feedback ng-class = {'has-warning' :!supportDemandeForm.selectTypeFacturation。$ touching} >
< label for = selectTypeFacturation class = col-lg-2 control-label > 类型解析< / label >
< ; div class < span class =code-keyword> = col-lg-10 >
< 选择 class = form-control < span class =code-attribute> id = selectTypeFacturation name = selectTypeFacturation ng-model = selectTypeFacturation >
< 选项 > < / option >
< 选项 > Régie< / option >
< 选项 > Forfait < / option >
< 选项 > Régie& Forfait < / option >
< / select >
< / div >
< < span class =code-leadattribute> / div >
< ; / fieldset >
< / form >
< / div >
我尝试过:
我尝试了很多配置,但没有任何效果。
解决方案
有效) novalidate >
< fieldset >
< 图例 > Donnéesdela revue < / legend >
< div class = form-group ng-class = {'has-error':supportDemandeForm.inputMontantGlobalAffaire。
touch&& supportDemandeForm.inputMontantGlobalAffaire。
invalid} >
< label for = inputMontantGlobalAffaire class = col-lg-2 control-label > Montantglobalprévudedel'affaire(zh K€)< span style = color:red > * < / s pan > < / label >
< div class = < span class =code-keyword> col-lg-10 >
< ; 输入 type < span class =code-keyword> = number class = form-control id = inputMontantGlobalAffaire name = inputMontantGlobalAffaire ng-model = inputMontantGlobalAffaire ng-change = montantAnnuel() pattern = [0-9] +(\\。[0-9] [0-9]?)? data-toggle = popover 数据触发器 = 悬停 数据放置 = right data-content = Build + RUN +基础设施 必需 >
< div class = help-block ng-messages = supportDemandeForm.inputMontantGlobalAffaire。
I want to sort out the fields to be filled (inputs, selects, ...) on the right to make place for larger column labels, and paste the warning-signs next to the fields (as described in the image). I tried quite a few configurations, but nothing works.
Very cordially and thank you very much in advance.
Image
Here is my cshtml page :
<div ng-app="SupportDemandeApp" ng-controller="SupportDemandeCtrl">
<form class="form-horizontal" id="supportDemandeForm" name="supportDemandeForm" method="post" ng-submit="validationSupportDemande(supportDemandeForm.$valid)" novalidate>
<fieldset>
<legend>Données de la revue</legend>
<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.inputMontantGlobalAffaire.$touched && supportDemandeForm.inputMontantGlobalAffaire.$invalid }">
<label for="inputMontantGlobalAffaire" class="col-lg-2 control-label">Montant global prévu de l'affaire (en K€)<span style="color:red"> *</span></label>
<div class="col-lg-10">
<input type="number" class="form-control" id="inputMontantGlobalAffaire" name="inputMontantGlobalAffaire" ng-model="inputMontantGlobalAffaire" ng-change="montantAnnuel()" pattern="[0-9]+(\\.[0-9][0-9]?)?" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Build + RUN + Infrastructure" required>
<div class="help-block" ng-messages="supportDemandeForm.inputMontantGlobalAffaire.$error" ng-if="supportDemandeForm.inputMontantGlobalAffaire.$touched"><div ng-message="required">Champ requis</div></div>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error': supportDemandeForm.selectTypeContrat.$touched && supportDemandeForm.selectTypeContrat.$invalid }">
<label for="selectTypeContrat" class="col-lg-2 control-label">Type de contrat (IS/OS)<span style="color:red"> *</span></label>
<div class="col-lg-10">
<select class="form-control" id="selectTypeContrat" name="selectTypeContrat" ng-model="selectedTypeContrat.type" ng-init="typeContrat()" ng-change="montantAnnuel()" ng-options="type for type in types" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Voir définitions dans l'onglet Type de contrat" required></select>
<div class="help-block" ng-messages="supportDemandeForm.selectTypeContrat.$error" ng-if="supportDemandeForm.selectTypeContrat.$touched"><div ng-message="required">Champ requis</div></div>
</div>
</div>
<div class="form-group has-warning has-feedback" ng-class="{ 'has-warning': !supportDemandeForm.selectTypeFacturation.$touched }">
<label for="selectTypeFacturation" class="col-lg-2 control-label">Type de facturation</label>
<div class="col-lg-10">
<select class="form-control" id="selectTypeFacturation" name="selectTypeFacturation" ng-model="selectTypeFacturation">
<option></option>
<option>Régie</option>
<option>Forfait</option>
<option>Régie & Forfait</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
What I have tried:
I tried quite a few configurations, but nothing works.
解决方案
valid)" novalidate> <fieldset> <legend>Données de la revue</legend> <div class="form-group" ng-class="{ 'has-error': supportDemandeForm.inputMontantGlobalAffaire.
touched && supportDemandeForm.inputMontantGlobalAffaire.
invalid }"> <label for="inputMontantGlobalAffaire" class="col-lg-2 control-label">Montant global prévu de l'affaire (en K€)<span style="color:red"> *</span></label> <div class="col-lg-10"> <input type="number" class="form-control" id="inputMontantGlobalAffaire" name="inputMontantGlobalAffaire" ng-model="inputMontantGlobalAffaire" ng-change="montantAnnuel()" pattern="[0-9]+(\\.[0-9][0-9]?)?" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Build + RUN + Infrastructure" required> <div class="help-block" ng-messages="supportDemandeForm.inputMontantGlobalAffaire.
这篇关于以HTML5和HTML格式组织字段bootstrap 3的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文