This question is about best practice. Can I use form-horizontal class on a <div> element. I am trying to use style that these form class provides but I don't want to use form tag.
Is it good practice ?
<div class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-4">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</div>
Related
I have a form for adding new users and I am having problems with the form reset because it does not remove the valid class of materialize.
The form:
<div class="col s12 m12 l4 xl4">
<form (ngSubmit)="onSubmit(); newLabMember.reset()" #newLabMember="ngForm" ngNativeValidate>
<!-- New lab member form -->
<div class="section">
<h5>Add lab member</h5>
<div class="input-field">
<input type="text" name="firstName" [(ngModel)]="user.firstname" class="validate" id="firstName" validate required>
<label for="firstName">First name</label>
</div>
<div class="input-field">
<input type="text" name="lastName" [(ngModel)]="user.lastname" class="validate" id="lastName" validate required>
<label for="firstName">Last name</label>
</div>
<div class="input-field">
<input type="text" name="email" [(ngModel)]="user.email" class="validate" id="email" validate required>
<label for="email">Member email</label>
</div>
<blockquote>An email will be sent to the new user with a password and further instructions.
</blockquote>
<div class="input-field">
<button type="submit" class="waves-effect waves-light btn blue-grey darken-1">Add new member</button>
</div>
</div>
</form>
</div>
As you can see, when I submit the form I use reset() form but the class .valid from materialize still there.
My form is to be capable of switching between view and edit modes. By default the form should display in view mode and when I click edit button the fields should be available for change. The form is working good between view and edit modes as expected, but in view mode the span element (for display value) is misaligned with the label, I mean the span element's value is displaying a bit higher to the horizontal line of the label.
Below is a piece of code from my form:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<span class="control-label" *ngIf="!editMode">{{model.name}</span>
<div class="col-sm-6" *ngIf="editMode">
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Use a form static control instead of a <span> element:
div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6" *ngIf="editMode">
<p class="form-control-static" *ngIf="!editMode">{{model.name}}</p>
<input class="form-control" type="text" name="name" [(ngModel)]="model.name" />
</div>
</div>
</form>
</div>
Here is a "static" Bootstrap snippet (view in full page):
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<input class="form-control" type="text" name="name" value="model name" />
</div>
</div>
</form>
</div>
<div class="container">
<h1>Deal Form</h1>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #dealForm="ngForm">
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static">model name</p>
</div>
</div>
</form>
</div>
It works now. Thanks for the help. However I have modified the code to meet my requirement and it's as below.
<div class="form-group">
<label class="control-label col-sm-2">First Name</label>
<div class="col-sm-6">
<p class="form-control-static" *ngIf="!editMode">{{var1}}</p>
<input class="form-control" *ngIf="editMode" type="text" name="var1" [(ngModel)]="var1" />
</div>
</div>
This question already has answers here:
Bootstrap: Input inside a label
(2 answers)
Closed 5 years ago.
I would expect the following HTML to show a UI like this
Label [Input]
Label [Input]
But it is showing the labels above the inputs at all resolutions. Can anyone tell me why?
<form class="form-horizontal">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
specify label width and input tye's width
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" >
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
</form>
Expand snippet to see in large display
This is the base of what you are looking for.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
I have created form using bootstrap 3. how can I make a 2 column form. that is the label on the left and the input, drop down box etc on the right
<fieldset>
<div class="form-group">
<label for="exampleInputProject">Map info</label>
<input type="text" class="form-control" id="exampleInput" placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Class</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Team Project information">
</div>
<div class="form-group">
<label for="exampleInputProject"> info</label>
<input type="text" class="form-control" id="exampleInput" placeholder="Build Defintion">
</div>
</fieldset>
<fieldset>
<div class="form-group">
<label for="exampleInputPassword1">Name</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Build Def Name">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Location</label>
<input type="text" class="form-control" id="exampleInputTeam" placeholder="Config Location">
</div>
</fieldset>
by adding <div class="col-md-6"> surrounding the two fieldsets
<div class="row">
<div class="col-md-6">
<fieldset>
...
</fielset>
</div>
<div class="col-md-6">
<fieldset>
...
</fielset>
</div>
</div>
http://www.bootply.com/JziKUuxQYM
I have bootstrap form where I need to fix two element alignment. Screenshot show the current look of the form http://s27.postimg.org/j8h3d0203/screen2.png by using the following markup
<fieldset class="col-md-8">
<div class="form-group">
<label for="BI16" class="col-md-4 control-label">Visual Acuity L:20/:</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control" />
</div>
<label for="BI16" class="col-md-2 control-label">R: 20/</label>
<div class="col-md-2">
<input type="text" id="BI16" name="medicareNumber" class="form-control"/>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B19" value1="BV8" value2="BV9"></yesno-button>
<label for="B19" class="radio-inline control-label">
Creative Lens Used?
</label>
</div>
</div>
<div class="form-group">
<div>
<yesno-button button1="yes" button2="no" id="B20" value1="BV6" value2="BV7"></yesno-button>
<label for="B20" class="radio-inline control-label">
Will the patient consent to an End of Life Planning discussion?
</label>
</div>
</div>
<div class="form-group">
<div>
<label for="B12" class="col-md-2 control-label">Comments:</label>
<div class="col-md-10">
<input type="text" id="B12" class="form-control" />
</div>
</div>
</div>
</fieldset>
Which form do you want to align? You can use
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>