cssOMS/tests/app/forms.php
2019-03-31 20:01:13 +02:00

119 lines
6.1 KiB
PHP

<div class="row">
<div class="col-xs-12 col-md-6">
<section class="box wf-100">
<header><h1>Default</h1></header>
<div class="inner">
<form>
<table class="layout wf-100">
<tr>
<td colspan="2"><label>Placeholder</label></td>
<tr>
<td colspan="2"><input type="text" placeholder="&#61447; User">
<tr>
<td colspan="2"><label>Input+Button+Required</label></td>
<tr>
<td colspan="2">
<div class="ipt-wrap">
<div class="ipt-first"><input type="text" required></div>
<div class="ipt-second"><input type="submit" value="Text"></div>
</div>
<tr>
<td colspan="2"><label>Password</label></td>
<tr>
<td colspan="2"><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder="&#xf023; Pa55w0rd?">
<tr>
<td colspan="2"><label>Datalist</label></td>
<tr>
<td colspan="2"><input list="test" type="text">
<datalist id="test">
<option>Chrome</option>
<option>IE</option>
<option>Opera</option>
<option>Safari</option>
<option>Firefox</option>
</datalist>
</td>
<tr>
<tr>
<td colspan="2"><label>Special</label></td>
<tr>
<td colspan="2">
<span class="input"><button type="button"><i class="fa fa-pencil"></i></button><input type="text"></span></td>
<tr>
<td colspan="2"><label>Number</label></td>
<tr>
<td colspan="2"><input type="number" step="any" min="0"></td>
<tr>
<td><label>Label1</label></td>
<td><label>Pattern Validation</label>
<tr>
<td><input type="text"></td>
<td><input type="text" pattern="[a-zA-Z]" required>
<tr>
<td colspan="2"><label>Localtime</label></td>
<tr>
<td colspan="2"><input type="datetime-local">
<tr>
<td><label>Localtime</label></td>
<td><label>Localtime</label>
<tr>
<td><input type="datetime-local"></td>
<td><input type="datetime-local">
<tr>
<td><label>Checkbox</label></td>
<td><label>Radio</label></td>
<tr>
<td><span class="check"><input type="checkbox" checked>Check</span>
<td><span class="radio"><input type="radio" name="test">Radio</span>
<tr>
<td><span class="check"><input type="checkbox">Check</span>
<td><span class="radio"><input type="radio" name="test" checked>Radio</span>
<tr>
<td></td>
<td><span class="radio"><input type="radio" name="test">Radio</span>
<tr>
<td><label>Option</label></td>
<tr>
<td colspan="2"><select>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<tr>
<td><label multiple>Multiselect</label></td>
<tr>
<td colspan="2"><select multiple>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<tr>
<td><label>Option Default</label></td>
<td><label>Select Selected</label>
<tr>
<td>
<select>
<option disabled selected>Select something</option>
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
</td>
<td>
<select>
<option>Option1</option>
<option selected>Option2</option>
<option>Option3</option>
</select>
<tr>
<td colspan="2"><label>Textarea</label></td>
<tr>
<td colspan="2"><textarea></textarea>
<tr>
<td colspan="2"><input type="submit" value="Submit"> <input type="submit" value="Cancel"> <button type="submit">SButton</button>
</table>
</form>
</div>
</section>
</div>
</div>