I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
You should think about the verical spacing, fonts, shadows, and curves vs. angles. Adding some padding between elements would make it easier to read, and changing to a sans-serif font would probably make it look more "professional" as well.
Personally, I'm not a fan of the curves and shadows on the input elements. It makes the submit button look odd because its different scale makes its curves slightly different, entering a kind of widget-uncanny-valley.
Red isn't a great choice for the text colour, as people might associate it with an error state.
input type="number" triggers the number pad on some mobile devices but input type="tel" is probably better as it's specifically designed for phone numbers (which can contain other characters).
The placeholder attributes don't add anything, and they're almost the same colour as the input text itself meaning it's not obvious at a glance which fields you've entered and which you haven't.
The label elements should either wrap their inputs or should be related to them using label for="..." and input id="...".
I'd remove the br elements and make sure the inputs were (inline-)blocks instead. That's my personal preference, because I see br as an unnecessary non-semantic element.
I'd also remove the colon suffix on labels. It doesn't add anything to the meaning of the markup, and you can always style it with label:after { content: ':'; } or something like that if you want. Personally, I think it'd look better without them. The legend (which could go into a legend and a fieldset itself rather than a p tag...) also has the same colon suffix, and there's kind of an unwritten style rule that you don't nest things with colons.
I am a passionate Front-end Developer, Data Scientist, Blogger and Teacher.
I am also a Tech Writer and YouTube Educator.
Aside tech, I'm a football fan and a musical instrumentalist.
I am a passionate Front-end Developer, Data Scientist, Blogger and Teacher.
I am also a Tech Writer and YouTube Educator.
Aside tech, I'm a football fan and a musical instrumentalist.
Top comments (3)
You should think about the verical spacing, fonts, shadows, and curves vs. angles. Adding some padding between elements would make it easier to read, and changing to a sans-serif font would probably make it look more "professional" as well.
Personally, I'm not a fan of the curves and shadows on the input elements. It makes the submit button look odd because its different scale makes its curves slightly different, entering a kind of widget-uncanny-valley.
Red isn't a great choice for the text colour, as people might associate it with an error state.
input type="number"
triggers the number pad on some mobile devices butinput type="tel"
is probably better as it's specifically designed for phone numbers (which can contain other characters).The
placeholder
attributes don't add anything, and they're almost the same colour as the input text itself meaning it's not obvious at a glance which fields you've entered and which you haven't.The
label
elements should either wrap theirinput
s or should be related to them usinglabel for="..."
andinput id="..."
.I'd remove the
br
elements and make sure the inputs were (inline-)blocks instead. That's my personal preference, because I seebr
as an unnecessary non-semantic element.I'd also remove the colon suffix on labels. It doesn't add anything to the meaning of the markup, and you can always style it with
label:after { content: ':'; }
or something like that if you want. Personally, I think it'd look better without them. The legend (which could go into alegend
and afieldset
itself rather than ap
tag...) also has the same colon suffix, and there's kind of an unwritten style rule that you don't nest things with colons.Hope this helps!
This is the kind of comments I have expecting. Thanks so much as I will be working on your observations and opinions.
But when I added the fieldset and legend, they scattered my work