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!

Discussion (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 on

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 Author • Edited on

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
DevLorenzo Author

Sure I will!

solotoo_48 profile image
PBt • Edited on

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

devlorenzo profile image
DevLorenzo Author • Edited on

I'll check, thank for sharing