94 lines
3.6 KiB
HTML
94 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="tui-bg-blue-black tui-cursor">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Input Example</title>
|
|
<script src="../dist/tuicss.min.js"></script>
|
|
<link rel="stylesheet" href="../dist/tuicss.min.css">
|
|
<style>
|
|
.tui-input {
|
|
width: 430px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="center" style="padding: 50px">
|
|
<div class="tui-window" style="text-align: left">
|
|
<fieldset class="tui-fieldset">
|
|
<legend class="center">Form</legend>
|
|
Text.......: <input class="tui-input" value="text" /><br>
|
|
Disabled...: <input class="tui-input disabled" disabled value="disabled" /><br>
|
|
Number.....: <input class="tui-input" type="number" value="25" /><br>
|
|
Password...: <input class="tui-input" type="password" value="12345" /><br>
|
|
Color......: <input class="tui-input" type="color" value="#00FF00" /><br>
|
|
Select.....: <select class="tui-input">
|
|
<option>First</option>
|
|
<option>Second</option>
|
|
<option>Third</option>
|
|
<optgroup label="Group">
|
|
<option>First</option>
|
|
<option>Second</option>
|
|
<option>Third</option>
|
|
</optgroup>
|
|
</select><br>
|
|
Date.......: <input class="tui-input" type="date" value="2019-01-01" /><br>
|
|
Time.......: <input class="tui-input" type="datetime-local" value="2019-01-01T12:00" />
|
|
<br><br>
|
|
<fieldset class="tui-input-fieldset">
|
|
<legend>Checkboxes</legend>
|
|
<label class="tui-checkbox">First
|
|
<input type="checkbox" checked />
|
|
<span></span>
|
|
</label>
|
|
<label class="tui-checkbox">Second
|
|
<input type="checkbox" />
|
|
<span></span>
|
|
</label>
|
|
<label class="tui-checkbox disabled">Disabled
|
|
<input type="checkbox" disabled />
|
|
<span></span>
|
|
</label>
|
|
</fieldset>
|
|
<br>
|
|
<fieldset class="tui-input-fieldset">
|
|
<legend>Radios</legend>
|
|
<label class="tui-radio">First
|
|
<input type="radio" name="radio" checked />
|
|
<span></span>
|
|
</label>
|
|
<label class="tui-radio">Second
|
|
<input type="radio" name="radio" />
|
|
<span></span>
|
|
</label>
|
|
<label class="tui-radio disabled">Disabled
|
|
<input type="radio" name="radio" disabled />
|
|
<span></span>
|
|
</label>
|
|
</fieldset>
|
|
<br>
|
|
Textarea<br>
|
|
<textarea class="tui-input" style="width: 100%">Content ...</textarea>
|
|
<br>
|
|
Disabled Textarea<br>
|
|
<textarea class="tui-input disabled" disabled style="width: 100%">Disabled</textarea>
|
|
<br>
|
|
Multiple<br>
|
|
<select multiple class="tui-input" style="width: 100%">
|
|
<option>---</option>
|
|
<option>First</option>
|
|
<option>Second</option>
|
|
<option>Third</option>
|
|
<optgroup label="Group">
|
|
<option>First</option>
|
|
<option>Second</option>
|
|
<option>Third</option>
|
|
</optgroup>
|
|
</select><br>
|
|
File <input class="tui-input full-width" type="file" />
|
|
</fieldset>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|