How To Create A Simple HTML Form – A Quick Guide

Welcome to a quick tutorial on how to create an HTML form. Just started with HTML and overwhelmed by how “complicated” it is to create an HTML form? Well, no, 10 minutes is actually all you need to learn how.

Creating an HTML form is a simple 3-steps process:

  1. Define the HTML <form> tag.
  2. Sandwich the fields in-between.
  3. Add a submit button <input type="submit" value="Go!"/>.
<form>
  <input type="text"/>
  <input type="submit" value="Go!"/>
</form>

Yes, that about covers the basics. All that remains is to walk through all the available form fields and attributes. Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

Download & Notes Basic Form Form Fields
Field Attributes Form Layout Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

BASIC FORM

All right, let us now expand a little bit more on the basic HTML form first.

 

BASIC FORM ATTRIBUTES

1-basic.html
<form action="dummy.php" method="post" target="_blank">
  <input type="text" name="user-name" value="Jon" required/>
  <input type="submit" value="Go"/>
</form>

This is the same introduction snippet above, but with extra attributes that you should know.

  • action The server-side script that will be handling the form submission – Save into the database, send an email, or whatever else. Defaults to the current page if omitted.
  • method This can either be get or post, defaults to get.
    • With get, the form data will be visible in the URL when submitted. For example, http://site.com/dummy.php?user-name=Jon.
    • But post will hide the form data. I.E. will only show http://site.com/dummy.php.
  • target can be _blank or _self, default is _self.
    • _blank Submits the form to a new tab/window.
    • _self In the same tab/window.
  • Notice the extra attributes in the text field?
    • name="user-name" is how we identify the field upon submission. I.E. ?user-name=Jon
    • We can also define a default value with value="Jon".
    • Lastly, required marks a required field. The form cannot be submitted until all required fields are filled.

 

 

COMMON FORM FIELDS

Next, let us go walk through the common types of form fields – Text, password, dropdown, buttons, selectors, etc…

 

TEXT INPUT FIELDS

2-text.html
<!-- (A) TEXT -->
<h1>Text Fields</h1>
Text <input type="text"/> <br>
Password <input type="password"/> <br>
Email <input type="email"/> <br>
URL <input type="url"/> <br>
Search <input type="search"/> <br>
Number <input type="number"/> <br>
Telephone <input type="tel"/> <br>
Textarea <textarea></textarea> <br>
Hidden <input type="hidden"/> <br>
 
<!-- (B) DATE-TIME -->
<h1>Date Time</h1>
Date <input type="date"/> <br>
Time <input type="time"/> <br>
Date Time <input type="datetime-local"/> <br>
 
<!-- (C) OTHERS -->
<h1>Others</h1>
Color Select <input type="color"/> <br>
File <input type="file"/> <br>

Text Fields

Text
Password
Email
URL
Search
Number
Telephone
Textarea
Hidden

Date Time

Date
Time
Date Time

Others

Color Select
File

I know, there are quite a crazy number of input fields in HTML.

  • <input type="text"/> is a simple text field.
  • <input type="password"/> is also a text field, but the text will be obfuscated.
  • <input type="email"/> only accepts email addresses.
  • <input type="number"/> only accepts numbers.
  • <input type="url"/> only accepts website URLs.
  • <input type="hidden"/> a ninja field that you want to include in the form, but not want the user to mess with it.

Yep, I am going to stop here and not explain every single one of them. These are thankfully very straightforward.

 

DATA LIST

3-datalist.html
<input type="text" list="fruits"/>
<datalist id="fruits">
  <option value="Papaya">
  <option value="Orange">
  <option value="Apple">
  <option value="Pear">
  <option value="Durian">
</datalist>

While we are still on the topic of text input, here is something cool we can do for the text fields – Add a <datalist> to create a suggestions list. Take note though, this does not restrict the user from entering whatever they want. Use <select> (will walkthrough below) if you want to restrict the options.

 

 

BUTTONS & SELECTORS

4-button-selector.html
<h1>Buttons</h1>
<input type="button" value="Button"/> <br>
<button>Also Button</button> <br>
<input type="reset" value="Reset"/> <br>
<input type="submit" value="Submit"/> <br>
 
<h1>Dropdown Selector</h1>
<select name="animal">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="bird">Bird</option>
</select>
 
<h1>Checkbox</h1>
<input type="checkbox" name="has_doge" value="yes" checked/> Doge
<input type="checkbox" name="haz_cate" value="yes" /> Cate
 
<h1>Radio Buttons</h1>
<input type="radio" name="animal" value="Doge" /> Doge
<input type="radio" name="animal" value="Cate" /> Cate
<input type="radio" name="animal" value="Birb" /> Birb

Buttons




Dropdown Selector

Checkbox

Doge
Cate

Radio Buttons

Doge
Cate
Birb

Again, we have a whole load of form fields and controls here. Not going to explain in details, but here are the quick things that are good to know:

  • We have to attach Javascript onclick="DO SOMETHING" to the buttons for them to do something useful. Javascript is an entire topic on its own, so we will not touch on it here.
  • Reset buttons restore the form to its initial state, not wipe everything clean. For example – If we have <input type="text" value="Jon"/>, it will reset to “Jon” and not empty.
  • Take note of how we group radio buttons together. All of them have the same name="animal", and only one button can be selected at a time.

 

ATTRIBUTES & FORM CHECKING

So far so good? In this section, we walk through the common form field attributes.

 

COMMON FIELD ATTRIBUTES

5-attributes.html
Autocomplete off 
<input type="email" autocomplete="off" /> <br>

Autofocus
<input type="text" autofocus /> <br>

Placeholder 
<input type="text" placeholder="Please enter something" /> <br>

Step
<input type="number" step="0.1"/> <br>

Disabled + Read-only
<input type="text" disabled /> <br>
<input type="text" readonly /> <br>

Checked + Selected
<input type="checkbox" checked /> <input type="radio" checked /> <br>
<select>
  <option>First</option>
  <option selected>Second</option>
  <option>Third</option>
</select>
Autocomplete off

Placeholder

Step

Disabled + Read-only


Checked + Selected

  • autocomplete – Specifies if this field should be auto-completed. Takes the values on or off.
  • autofocus – The cursor will be focused on this field when the page loads.
  • placeholder – Placeholder text.
  • step – For number fields only, specifies how much to increment/decrement when the user clicks on the up/down button.
  • disabled – The user cannot change this field.
  • readonly – The user can copy, but cannot change this field.
  • checked – For checkbox and radio only, specifies the default option.
  • selected – For <option>, specifies which the default option.

 

 

FORM CHECKING

6-check.html
<input type="text" minlength="3" maxlength="8" required/>
<input type="number" min="1" max="99" required/>
<input type="text" pattern="doge" required placeholder="Must be doge"/>
<input type="submit" value="Go"/>
  • minlength Minimum number of characters.
  • maxlength Maximum number of characters.
  • min Minimum number.
  • max Maximum number.
  • required Required field.
  • pattern Must match this pattern… Will leave a link to another tutorial below.

 

FORM LAYOUT

For this final section, let us walk through a couple more HTML tags that will help you layout the form nicely.

 

GROUPS & LABELS

7-groups-labels.html
<fieldset>
  <legend>Personal Information</legend>
  <label for="user_name">Name</label>
  <input type="text" name="full_name"/>
  <label for="user_email">Email</label>
  <input type="email" name="user_email"/>
</fieldset>
<fieldset>
  <legend>Pets</legend>
  <label for="haz_cate">Cate</label>
  <input type="checkbox" id="haz_cate" name="haz_cate" value="yes"/> 
  <label for="haz_doge">Doge</label>
  <input type="checkbox" id="haz_doge" name="haz_doge" value="yes"/> 
</fieldset>
Personal Information




Pets




Just 3 form layout tags here to know:

  • <fieldset> simply creates sections in the form.
  • <legend> is the “header” of each <fieldset>.
  • <label> attach a label to the specified field. Take note of how it is used here with the checkboxes – Clicking on the label will also check/uncheck the box itself, making it easier to navigate.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

HOW ABOUT THE PROCESSING?

We have now walked through all the basic elements necessary to create an HTML form, but how about the “afterward”? It all depends on what you want to do – Save to database, send to email, etc… That requires server-side programming and is totally out-of-scope for this tutorial. This is your own homework.

 

HOW ABOUT STYLING THE FORM

Change the font, spacing, colors, and whatever else? Sadly, that will involve the use of CSS, which is another long basics tutorial – Links below, run through if you are interested.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *