mini-strap/packages/website/src/templates/form.html

127 lines
3.3 KiB
HTML

<form>
<fieldset>
<div class="msp-mb-3">
<label for="exampleInputEmail1" class="">Email address</label>
<input
type="email"
class=""
id="exampleInputEmail1"
aria-describedby="emailHelp"
placeholder="user@email.com"
/>
<div id="emailHelp" class="">
We'll never share your email with anyone else.
</div>
</div>
<div class="msp-mb-3">
<label for="exampleInputPassword1" class="">Password</label>
<input
type="password"
class=""
id="exampleInputPassword1"
placeholder="Secret..."
/>
</div>
<div class="msp-mb-3">
<input type="checkbox" class="" id="exampleCheck1" />
<label class="" for="exampleCheck1">Check me out</label>
</div>
<div class="msp-mb-3">
<input
class="form-check-input"
type="radio"
name="flexRadioDefault"
id="flexRadioDefault1"
/>
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="msp-mb-3">
<label class="form-check-label" for="flexRadioDefault1">
Default range
</label>
<input
class="form-check-input"
type="range"
name="flexRadioDefault"
id="flexRadioDefault1"
/>
</div>
<div class="msp-mb-3">
<label class="" for="example-select">Select</label>
<select
id="example-select"
class="form-select"
aria-label="Default select example"
>
<option selected disabled hidden>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="msp-mb-3">
<label for="formFile" class="form-label"
>Default file input example</label
>
<input class="form-control" type="file" id="formFile" />
</div>
<div class="msp-mb-3">
<label for="exampleColorInput" class="form-label">Color picker</label>
<input
type="color"
class="form-control form-control-color"
id="exampleColorInput"
value="#563d7c"
title="Choose your color"
/>
</div>
<button type="submit" class="">Submit</button>
</fieldset>
</form>
<br />
<form>
<fieldset disabled class="msp-fieldset-border">
<legend>Disabled fieldset example</legend>
<div class="msp-mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input
type="text"
id="disabledTextInput"
class="form-control"
placeholder="Disabled input"
/>
</div>
<div class="msp-mb-3">
<label for="disabledSelect" class="form-label"
>Disabled select menu</label
>
<select id="disabledSelect" class="form-select">
<option>Disabled select</option>
</select>
</div>
<div class="msp-mb-3">
<div class="form-check">
<input
class="form-check-input"
type="checkbox"
id="disabledFieldsetCheck"
disabled
/>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>