HTML Forms Cheatsheet

Posted Saturday, March 12, 2022 by Sri. Tagged MEMO, CHEATSHEET
EDITING PHASE:outlining ideas...

Forms using a Server

All form elements have a name and value attribute. The name is the key of the value you look-up when processing form data on the server.

<form method="post" action="http://server1">
name: <input type="text" name="fname">
age: <input type="text" name="age">
<input type="submit" value="Submit">

Forms using Javascript

In Javascript, you can have the form without the action, and instead use a routine like this

<form method="POST" enctype="multipart/form-data"
onsubmit="return check(event)">

function check(e) {
const form = new FormData(;
const formProps = Object.fromEntries(formData);

Or you can read elements directly using getElementById(), `get

In Javascript, you read the value property from the HTMLElement directly through one of the following calls on document or Element objects:


returns one element


returns all matches


returns one element


returns all matches


returns all matches

For event handlers, the event will contain a target property that is the clicked element. It's similar to the check() function above:

function handleClick(e) {
const { target } = e;

Basic Form Controls


Three kinds! Normally just use 'button'

<button type='button'>normal button</button>
<button type='reset'>clear form</button>
<button type='submit'>send form to server</button>

image buttons

<input type="image" alt="Login"

text area

<textarea rows="10" cols="30" name="comment">...</textarea>

text field

<input type="text" name="username" />

password text

<input type="password" name="password" />

number field

<input type="number" name="balance" />

number slider

<input type="range" name="movie-rating" min="0" max="10" step="0.1">


<input type="checkbox" name="breakfast" value="bacon"/> Bacon
<input type="checkbox" name="breakfast" value="eggs"/> Eggs
<input type="checkbox" name="breakfast" value="pancakes"/> Pancakes

radio button

<input name="delivery_option" type="radio" value="pickup" />
<input name="delivery_option" type="radio" value="delivery" />

selection list

<select name="rental-option">
<option value="small">Small</option>
<option value="lux">Luxury</option>
<optgroup label="Boats">
<option value="raft">Raft</option>

Add <optgroup label> to the selection list for grouping!

text data list

<input list="ide">
<datalist id="ide">
<option value="Visual Studio Code" />
<option value="Atom" />
<option value="Sublime Text" />

Specialized Form Controls

color selector

<input type='color'/>

date selector

<input type='date'/>


<input type='datetime-local'/>


<input type="month" />


<input type='time'/>


<input type='week'/>

email field

<input type='email'/>

file selector

<input type='file' accept='image/png, image/jpeg' />


Used for holding data to send to server

<input type='hidden'/>


<input type='search'/>


<input type='tel'/>


<input type='url'/>

Form Control Decorations


Can associate a label with a control, which uses its id, not its name!

<label for="fuel">Fuel level:</label>
<input type="text" id="username" name="username" />

Alternatively, wrap the control inside the label to not bother with for or id

<label>Fuel level:
<input type="text" name="username" />

But you can also associate multiple labels to the same control is you use the for and id syntax.


Use <fieldset> <legend>

output field

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>

progress meter

<label for="file">File progress:</label>
<progress id="file" max="100" value="70"> 70% </progress>


<meter id="fuel"
min="0" max="100"
low="33" high="66" optimum="80"

at 50/100

distilled from this codeacademy link