Cheatsheet:
How a Form Works in HTML

What is a Form?

We can see forms in our day-to-day life. When we go to a bank to make an
account, applying for a college that you dreamed of or for jobs, we use forms
to write a personal information and give it to personnel to process it. Just like
a physical form, HTML <form> collects the information and send it somewhere else.

<form action ="/example.html"
method="Post"></form>

In this example, the action attribute is to know where the information is sent
method attribute as request in the HTTP.

Text Input

Tag/Attribute Name Actual Formatted Tag Description Code
Input type, name <input type>
<input type="text" name="first-text field">
  • The <input> has a type attribute to determine how it renders on the web page and what kind of data it can accept.
  • A name attribute for the <input> is include, without the name attribute the information won't be send if the form is submitted.
 <form action=”/example.html” method=”POST”>
<input type=”text” name=”first-text-field”> </form>

Adding a Label

Tag/Attribute Name Actual Formatted Tag Description Code
label <label> To properly identify an <input> <form action=”/example.html”method=”POST”>
<label for=”toppings”>What do you want for your icecream?</label>
<br>
<input type=”text” name=”marshmallow” id=”toppings”>
</form>

Password Input

Tag/Attribute Name Actual Formatted Tag Description Code
input type="password" <input type="password> A string of characters to confirm user's identity <form>
<label for=”user-password”>Password</label>
<br> <input type=”password” id=”user-password” name=”user-password”>
</form>

Number Input

Tag/Attribute Name Actual Formatted Tag Description Code
input type="number" <input type="number"> To let users type in a number <form>
<label for=”years”>Years of Experience</label>
<br>
<input id=”years” type=”number” step=”1”>
</form>

Range Input

Tag/Attribute Name Actual Formatted Tag Description Code
input type="range" <input type="number" min="0" max="100" step="1"> To limit what numbers the users could type which will create
a slider.

Notes:
  • to set the minimum and maximum values of the slider assign values to the min and max attribute.
  • Step attribute control how smooth and fluid the slider works. Smaller step values will make the slider move more fluidly.
 <form>
<label for=”years”>Years of Experience</label>
<br>
<input id=”years” type=”number” step=”1”>
</form>

Checkbox Input

Tag/Attribute Name Actual Formatted Tag Description Code
input type="checkbox" <input type="checkbox"> To present multiple options that allow users to select any number of given options. <form>
<p>Choose your pizza toppings</p>
<br>
<label for="cheese">Extra Cheese </label>
<input id="cheese" name"topping type="checkbox" value="cheese">
<br>
<label for="pepperoni">Pepperoni </label>
<input id="pepperoni" name"topping type="checkbox" value="pepperoni">
<br>
<label for="anchovy">Anchovy </label>
<input id="anchovy" name"topping type="checkbox" value="anchovy">
<br>
</form>

Radio Button Input

Tag/Attribute Name Actual Formatted Tag Description Code
input type="radio" <input type="radio"> To present multiple options that allow users to select only one option. <form>
<p>Are you a night owl? </p>
<input type="radio" id="yes" name="answer" value="Yes">
<label for="Yes">Yes, I am. </label>
<br>
<input type="radio" id="no" name="answer" value="No">
<br>
<label for="No">No, I'm not. </label>
</form>

Dropdown List

Tag/Attribute Name Actual Formatted Tag Description Code
option value <option value="info">info</option> To allow users to choose one option from an organized list. <form>
<label for="animal">What animal do you like? </label>
<select id="animal" name="animal">
<option value="dog">Dog</option>
<br>
<option value="cat">Cat</option>
<br>
<option value="rabbit">Rabbit</option>
<option value="fish">Fish</option>
<option value="hamster">Hamster</option>
</select> </form>

Datalist Input

Tag/Attribute Name Actual Formatted Tag Description Code
datalist <datalist id ="info">
<option value="info"></option>
</datalist>		 To allow users to type in the input field to search for a particular. And if there's not option match, the user can still use what they typed in <form>
<label for="city">Ideal City to Visit? </label>
<input type="text" list="cities" id="city" name="city">
<datalist id="cities">
<option value ="New York City"></option>
<option value ="Tokyo"></option>
<option value ="Barcelona"></option>
<option value ="Melbourne"></option>
<option value ="Other"></option>
</datalist> </form>

Textarea Element

Tag/Attribute Name Actual Formatted Tag Description Code
textarea <textarea></textarea> To create a bigger text field for the users to write more text. <form>
<label for=”blog”>New Blog Post:</label>
<br>
<text area id="blog" name="blog" rows="5" cols="30">
</textarea> </form>

Submit Form

Tag/Attribute Name Actual Formatted Tag Description Code
input type="submit" <input type="submit"> To collect the information that will be submitted. <form>
<input type="submit" value="Send> </form>