DEV Community

Cover image for How to make an HTML form like a pro

Posted on • Updated on

How to make an HTML form like a pro

Hello World! Today we are talking about HTML form, it's mostly for beginners but anyone needs a refresh sometimes.
So although I'm sure that you already knew this...

Here is the list of all input types in html5!

Read also:

And remember the like❤️❤️

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
Enter fullscreen mode Exit fullscreen mode

Source: w3schools

Alt Text

You can also have:

  • A label --> <label for="username">Click me to focus on input</label>
  • A Disabled input --> <input type="text" placeholder="This is a text input Disabled" disabled>
  • A multiple answer input (maybe with disabled options) -->
<select name="Select" id="Select">
      <option value="Default">Default field</option>
      <option value="1">Field 1</option>
      <option value="2" disabled>Fiel 2</option>
      <option value="3">Field 3</option>
      <option value="4" disabled>Fiel 4</option>
Enter fullscreen mode Exit fullscreen mode
  • A placeholder --> <input type="text" placeholder="I am the placeholder"> Alt Text
  • A cool user-friendly form --> ...

You can have here a live preview (in case you missed something):
Click Me

Now it's time to add Some style!

First the basics


  input:hover {
  background-color: whitesmoke;
  margin-bottom: 1%;
  border-width: 3px;
Enter fullscreen mode Exit fullscreen mode


  input:focus {
  background-color: yellow;
  color: black;
Enter fullscreen mode Exit fullscreen mode

Alt Text

After a long search: here some stylish form:

Contact Us Form (CodePen)
Login Form
Registration Form
Login Form
Contact Us Form

And now a list of 41, yes 41! responsive forms:
On Alt Text

Please press like Button♡

And now, I'm sorry if you started web development last week, but you also need a little bit of JS:

A Prevent default never hurt anyone

form.addEventListener("submit", function (e) {
Enter fullscreen mode Exit fullscreen mode

Retrieve info from the form:

form.addEventListener("submit", function (e) {
    InputValue = document.getElementById("InputId").value;
Enter fullscreen mode Exit fullscreen mode

Check if email is valid:

Check if password is valid:

Codepen sample:

Hope this helped and thanks for reading!

Check this article: The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀

Subscribe to my newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Top comments (7)

carl0smore1ra profile image
Carlos Moreira

It's been a while since I handle native event without a framework but if I'm right you can get a input value inside the form form the event using input name

form.addEventListener("submit", function (e) {
const inputValue =;

mertcanyucel profile image
Mertcan Yücel • Edited

Great post!
Once you are done creating your HTML form, you can use services like to setup an action URL to handle your form submissions.

devlorenzo profile image
DevLorenzo • Edited

Thanks for your comment!
Just a question, where are you coming from?
This was my first article (published around 2 months ago) and I don't understand why I just made 500 views in two days.

mertcanyucel profile image
Mertcan Yücel

I came across to your post from the's search actually. I was checking out the HTML Form tags and ran into your post.
Btw, I have sent an email for possible collaboration opportunity to the email address under your profile. I hope you check and get back to me :)

Thread Thread
devlorenzo profile image

Sure I will!

solotoo_48 profile image
PBt • Edited

If you are making a HTML form 'like a pro' then you have to ensure its WCAG21 compliant

devlorenzo profile image
DevLorenzo • Edited

I'll check, thank for sharing