Question on input attributes

HTML-CSS
1

Hy campers,
For my survey form I like to have non specific content written in the the < input text/email/number > cause a certain action of < label > both together in the same < div > .
I mostly want to know this because of the floating action but it would be good to know in general.
For now I am using the :focus and :valid, but it causes some problem for the email input if it has no correct address as well as for the number input. I can find my way around it by using a text input instead of the email and put no limitations (min="" max="") to the number input, but I do rather not if not necessary…

Similarly I would like any input in the < text area > to cause some effect to its background. I managed to do this with :focus but I’d like to have it remain in a different state once there is text in there and :focus is out.

Also I am wondering, is this JavaScript territory? I am unfamiliar with it but feel it has to do with scripts right; if-statements etc. , maybe this kind of stuff I am trying with CSS now?

Let me know if the question is not clear.
This is the CodePen: https://codepen.io/21karat/pen/LYLRQGz?editors=1100

2

Javascript territory

1 Like
3

Currently you have a min of “q” in your number field which is causing you to fail your test.

 <div class="form-group fg-number fg-phone">
            <input type="number" name="phone" id="number" class="form-control fc-phone" min="q" max="999999999999" required="required" placeholder="Enter your phone number here">
1 Like
4

Ah must have been a typo.

So JS. In that case I will leave it as such I guess.

Thanks alot!

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.