tuicss
Version:
TuiCss is a library for developing Web applications that uses text-based user interface applications (TUI) as a style
94 lines (90 loc) • 3.78 kB
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>