ngx-admin/src/app/pages/forms/form-layouts/form-layouts.component.html

212 lines
7.6 KiB
HTML
Raw Normal View History

<div class="row">
<div class="col-md-12">
<nga-card>
<nga-card-header>
Inline form
</nga-card-header>
<nga-card-body>
<form class="form-inline">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<div class="input-group-addon">@</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2 mb-sm-0">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</nga-card-body>
</nga-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<nga-card>
<nga-card-header>Using the Grid</nga-card-header>
<nga-card-body>
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-legend col-sm-2">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<label class="col-sm-2">Checkbox</label>
<div class="col-sm-10">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Check me out
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
</nga-card-body>
</nga-card>
<nga-card>
<nga-card-header>
Form without labels
</nga-card-header>
<nga-card-body>
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Recipients">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Subject">
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Message"></textarea>
</div>
<button type="submit" class="btn btn-success">Send</button>
</form>
</nga-card-body>
</nga-card>
</div>
<div class="col-md-6">
<nga-card>
<nga-card-header>
Basic form
</nga-card-header>
<nga-card-body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label>
Check me out
<input type="checkbox"/>
</label>
</div>
<button type="submit" class="btn btn-danger">Submit</button>
</form>
</nga-card-body>
</nga-card>
<nga-card>
<nga-card-header>
Block form
</nga-card-header>
<nga-card-body>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputFirstName">First Name</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputLastName">Last Name</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputWebsite">Website</label>
<input type="text" class="form-control" id="inputWebsite" placeholder="Website">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</nga-card-body>
</nga-card>
</div>
</div>
<div class="row">
<div class="col-md-6">
<nga-card>
<nga-card-header>
Horizontal form
</nga-card-header>
<nga-card-body>
<form class="form-horizontal">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<div class="checkbox">
<label>
Remember me
<input type="checkbox"/>
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-warning">Sign in</button>
</div>
</div>
</form>
</nga-card-body>
</nga-card>
</div>
</div>