HTML Forms Cheatsheet

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">
</form>

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)">
  ...
</form>

function check(e) {
  e.preventDefault();
  const form = new FormData(e.target);
  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:

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) {
  e.preventDefault();
  const { target } = e;
  console.log(e.value);
}

Basic Form Controls

buttons

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"
       src="/media/examples/login-button.png">

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">

checkbox

<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>
  </optgroup>
</select>

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" />
</datalist>

Specialized Form Controls

color selector

<input type='color'/>

date selector

<input type='date'/>

datetime-local

<input type='datetime-local'/>

month

<input type="month" />

time

<input type='time'/>

week

<input type='week'/>

email field

<input type='email'/>

file selector

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

hidden

Used for holding data to send to server

<input type='hidden'/>

search

<input type='search'/>

telephone

<input type='tel'/>

url

<input type='url'/>

Form Control Decorations

labels

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" />
</label>

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

groups

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>
</form>

progress meter

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

meters

<meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter>

distilled from this codeacademy link