Originally published on inspiredwebdev.com
Responsive HTML Login Form
Difficulty Level: Beginner
Duration: 1 Hour
Github Reposito...
For further actions, you may consider blocking this person and/or reporting abuse
Please use semantic html, right now this is very bad for accessibility. Use
<form>and<label>to markup your code.#form-rightcould be the<form>and.input-containercould be a<label>. And add a real label, maybe hide it but let it be readable for screenreaders or use a floating label. Relying on theplaceholderattribute is not enough.Thanks for the feedback! What you said is correct, I'll probably update the code to follow better practices, this was more just a basic tutorial on on how to design one, but you are absolutely correct.
This code is semantic enough. We can all tell what pieces of code go to what, and that's really all that matters now and all that ever mattered.
SCREW Semantic HTML. Does anyone think someone who can read the code of a webpage is not going to be able to determine the difference between the header and the sidebar when looking at the webpage? Does anyone think that a developer who is editing this code is going to be lost? No. The whole point of semantic html is to make life easier for google. And seriously, if there's no benefit to the website, I'm no longer willing to put an ounce of effort to appease google.
Wow. Lost for words. Have you ever considered a blind person using the web?
It is not about the developer, it is about accessibility.
Tutorials like this make accessibility hard. Juniors see this markup and think it's alright, which it is not. A few changes and it would have the accessibility basics covered.
Nice and simple however the semantic points have already been made, so please consider updating this to reflect better sematic mark up.
Also, as you are using font-anything-but-awesome then you are using JavaScript therefore claiming that it's only HTML and CSS is not accurate.
It's a good practical example otherwise.
Very clean code, nice. If anyone is interested in learning html/css in a more visual way should check this youtube tutorial.
Great Article! CSS part was very interesting! I'm a back-end developer, so I've referred your code and made changes to login page, still in progress though. Take a look at my work:
github.com/MilburnGomes/SimpleWebs...
We could also keep adding features to make a better website for newbies.
Thanks for sharing!
Saludos me gustaría algo así como / mi primer juego en HTML,CSS y javascript. Nivel principiante 🔰 / mi primer formulario un buen aporte para los que iniciamos en el mundo CSS. Bien 👍
¡sí! Es un buen recurso para principiantes.
Great stuffs thank you!
Valuable stuff to learn CSS/HTML :)
Thanks!
Really nice, loved it
Thanks!
Awesome!