Hi
here I am posting the latest experiment that is frozen.
I managed to make changings, so is not frozen right now, but still the cursor not blinking after the icon but before it.thank you, frank
Another problem, as you mentioned, the floating placeholder falling on the filled up field. I copied over the .inputbox input:valid~label b{} and .inputbox textarea:valid~label b{}, I placed required in the html, and still not working properely.
with the required part might be a problem, when doing the php template, making the fault checking. on my php class this part was not workng neither, someone told me the required needs to be removed if the the php checking works. thank you, frank
I’ve mentioned this padding three times to you now and was included in my code and explicitly mentioned.
input.form-control{padding-left:40px;}
Please re-read and re-check my posts. 
You haven’t married up the label to the id of the form control.
e.g.
<textarea class="form-control" rows="4" cols="50" name="comment" form="usrform" placeholder="" id="comment" required></textarea>
<label for="comment">
etc...
The for=“comment” attribute of the label must match the id of the form control.
Then you will need to resort to javascript to add a class to the label when the input is clicked and then use that class instead of the code you have for the focus and valid states. If the input is empty (or if you are error checking the input with js) then you can remove the class if invalid or empty. Form validation is a complicated process so you will need to research that yourself.
2 Likes
Hi
thank you for helping me. it is almost working, the first part : enter email is falling back on the typed text, the other two looks working. can you help me with this part?
also another thing: the text area, can I use for, id for matching label to textarea. I copied over this part and I did not change it.
thank you, frank, and sorry for inconveniences.
By the way, I forgot to ask, can you point my attention to form validation “tutorials” or anything is usefull. everybody had a start somewhere, so I have to do so too. please help , thank you , frank.
Please post your updated code, so we can see what is happening.
Hi
this is my most recent work, the email part is falling back on the filled up field,the other two don’t.
coloring doesn’t work. please help me, thank you, frank
and also glipys are a bit higher, it should be on the same lavel, being top:; on the same value. thank you, frank.
I also added this code to increase distance between inputfields:
.inputbox, textarea{
padding-bottom:12px;
}
ok coloring started to work, sorry, frank
I’m sure you could have worked that out yourself and just add a few extra pixels to the rule.
.inputbox label span{top:13px;}
As you are using an input type of ‘email’ the only valid input is in an email format (e.g. myname@mytest.com). If you enter an invalid construct then the input isn’t valid any more.
The floating label technique is only good where any type of data is valid so you would need to use an input type of text and do the error checking with js and then serverside,
You can find some more reading here:
https://css-tricks.com/form-validation-ux-html-css/
https://daverupert.com/2017/11/happier-html5-forms/
https://hyperform.js.org/
1 Like
thank you for help, it is very usefull. My question is if I just type something in email field, the floating ‘placeholder’ will fall back, because it expects email and it looks bad. do I need javascript or can be fixed the problem with css or jquery?
also glyphicons are a bit higher, I don’t understand why? thank you, frank
I told you in my last post what the options were?
If you want unsanitised input then use input type="text" instead of input type="email" and then the input will register as valid.
If you want to keep it as type=“email” then you will need to handle what happens when an invalid entry is entered. This will need to be done with JS so then you may as well do the whole thing with js and swap out classes accordingly.
I’m in a rush at the minute but will be back tomorrow to explain better
Hi
thank you for help. I am sorry for asking the same thing manytime, but it is not allways easy to understand something. what i understod, I need to use js to switch between prefered email and text. I guess by default start with text then as I want to submit/send/post apply email for proper validation. please let me know if I am wrong. thank you, frank
also if I get there to use php, to connect to database, I need to control it with php.
Whatever you do front end is only temporary and to speed up things for the user but you will always be required to do form validation on the data once its posted (even if you have done this on the front end because users could simply turn js off or inject malicious code into your data).
When you receive data serverside you need to again validate, sanitise and check it meets requirements and if not return to the page asking for the missing information etc. How you do this is likely to be through php or whatever back end approach you are using. If you have done it correctly on the front end then there would be no need to return to the original page but you do always need to do the serverside check whatever.
If you were just collecting the odd form reply and not connecting to a database etc then you could use some other simpler form handling programs.
If you are looking for help with validating form controls on the fromt end then there are some sinmple jquery plugins that will do the job.
Or you could outsource to something like this:
As far as the styling for your current form I would suggest that you place the labels above the form by default so that they are accessible. You could then use js to move the placeholders inside the input and back out again when focused using dynamically added classes. This could probably be tied into the form validation methods I mentioned above to provide better feedback for the user.
A lot for you to digest
3 Likes
Hi
thank you for help. I’ve done a bit of research and I’ve got this result.
https://codepen.io/cfrank2000/pen/PLGwKv. As I can see it is not working.
I’l try your suggestion too, but I would like to ask, can be used jquery too? I can handle it better, I learned it but js not realy.thank you
I managed to do this snippet
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".dv").mouseenter(function(){
$("#p1").css("transform", "translate(12px, -22px)");
});
});
</script>
<style>
#p1{
position:absolute;
top:20px;
}
div.dv{
position:relative;
top:0px;
height:80px;
width:300px;
background-color:pink;
}
</style>
</head>
<body>
<div class="dv">
<p id="p1">Enter this paragraph.</p>
</div>
</body>
</html>
I tried this example but isn’t working
same thing that works somehow in the previous snippet, doesn’t work in codepen version. I don’t understand it.