Hello Dear coders, I am not yet good at styling css form. Please i need help to make my form more professional thank you for help.
This is the HTML
and the css
the output
Thank you for your kind contribution!
and the css
the output
Thank you for your kind contribution!
2 Likes
What do you mean by making forms look professional? Can you describe how you want them to look? Also make sure you are giving a link to your demo via codepen so we can checkout an actual page.
1 Like
You are going good refer W3schoool for more Css effect and style
3 Likes
To keep the label align to left and the input field to right nicely
1 Like
I see Bootstrap in your HTML. See getbootstrap/docs/4.0/components/forms/ There are Examples with elements of the form alignment.
1 Like
No it is flexboxgrid
1 Like
Your <input> is in <label>. I`d separate them.
Parent tag of your alignment elements must have display: flex;
<Fieldset> display: flex;
<label>
<input>
align it as you want! :) :smile:
2 Likes
Ok leme try that out.
1 Like
Hi Vulkan12, display = flex worked fine with chrome and opera and very ugly with IE and firefox. Can there be a way to fix this? (Do mind i show you)
2 Likes
Hello! I think, this links will help you
https://css-tricks.com/using-flexbox/
https://dev.opera.com/articles/advanced-cross-browser-flexbox/#fallbacks
1 Like
Thank you very much for the help.
2 Likes
I think placeholders are better if you want your input-fields to align properly without labels, or you can give your form a display of “flex” and "flex-direction: column; style your input fields with CSS properties like "border, border-radius, give it a padding and much more, haha. sorry for too much stories. i hope it helps.
3 Likes
yeah @japhheth it worked fine now
3 Likes
I like W3school very much - it helps me a lot
1 Like