DEV Community

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

Posted on • Edited 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>
    </select>
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

:hover

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

:focus

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

Alt Text

After a long search: here some stylish form:

Simplicity:
Contact Us Form (CodePen)
Quiet:
Login Form
Extravagance:
Registration Form
Interactivity:
Login Form
Colorful:
Contact Us Form

And now a list of 41, yes 41! responsive forms:
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) {
    e.preventDefault();
});
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)

Collapse
 
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 = e.target.inputName.value;
});

Collapse
 
mertcanyucel profile image
Mertcan Yücel • Edited

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

Collapse
 
lorenzoblog profile image
Lorenzo • 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.

Collapse
 
mertcanyucel profile image
Mertcan Yücel

I came across to your post from the Dev.to'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 :)
Cheers!

Thread Thread
 
lorenzoblog profile image
Lorenzo

Sure I will!

Collapse
 
solotoo_48 profile image
PBt • Edited

If you are making a HTML form 'like a pro' then you have to ensure its WCAG21 compliant
w3.org/WAI/WCAG21/quickref/

Collapse
 
lorenzoblog profile image
Lorenzo • Edited

I'll check, thank for sharing