以HTML5和HTML格式组织字段bootstrap 3 [英] Organisation of fields in a form HTML5 & bootstrap 3

问题描述

我想在右侧挑选要填充的字段（输入，选择，...）以填充较大的列标签，并在字段旁边粘贴警告标志（如图所示） 。我尝试了很多配置，但没有任何作用。



非常亲切，非常感谢您提前。



图片



这是我的cshtml页面：

 <   div  < span class =code-attribute>   ng-app   =  SupportDemandeApp    ng-controller   =  SupportDemandeCtrl >  
 <  表格    class   =  form-horizo​​ntal    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屋！