DEV Community

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

How to make an HTML form like a pro

devlorenzo profile image DevLorenzo ใƒปUpdated on ใƒป3 min read

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:
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) {
    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!

Discussion (7)

pic
Editor guide
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
devlorenzo profile image
DevLorenzo Author • 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
devlorenzo profile image
DevLorenzo Author

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
devlorenzo profile image
DevLorenzo Author • Edited

I'll check, thank for sharing