Floating label input web component.
$ npm install @yishiashia/floating-label-input
<script src="fl-input.js"></script>
<form action="#" method="POST">
<fl-input
name="username"
type="text"
placeholder="Please enter your name"
height="50"
>
</fl-input>
<fl-input
name="username"
type="password"
placeholder="Please enter your password"
height="50"
>
</fl-input>
<input type="submit" value="submit" />
</form>
The demo page: https://yishiashia.github.io/floating-label-input/
If you want to customize this web component, you can import the library and
implement your new class by extend FLInput
.
import FLInput from "floating-label-input";
class customizedFLInput extends FLInput {
// override here
}
The name of input, it would be the POST parameter name.
The floating label of input field.
The height of input field (unit: pixel).
The input type, default text
.