How to make this input box?

Please look at this input box. When there is no mouse focus, you can use placeholder to generate the contents of the box


input

Email address or other Red Hat Login ID is still in the box. When you enter an account and, submit form, how do you ensure that only the account you enter will be sent?
excuse me, how do you do this?

https://developers.redhat.com.

Sep.24,2021

submit you can send data manually instead of calling the default form submission, so you don't have to worry about the data sent by

.
submit = function(ev){
    ev.prevenDefault();
    ajax({
        ...
    })
}

[ idea ]: it has been shown upstairs that the example is controlled by bottom. In fact, if these effects are not too complicated, you can view the code through the F12 console.
to see how it changes. Here you can check the focus status to check the effect

.

clipboard.png

[ Demo ]: https://jsbin.com/jekufajipi/.


look at the code. There is a label under the input that is placeholder,. The two of them are in the same div. When input:focus drives the font-size of the label to become smaller, and add a little bit of slow motion under the embellishment of bits and pieces.


if you want me to do it, label and input are in the same div. When label absolutely locates
input focus, the padding-top of input increases and the font-size of label becomes smaller
. The rest is fine-tuning of some details

.
Menu