HTML Forms Cheatsheet

Posted Sunday, March 13, 2022 by Sri.Tagged MEMO, CHEATSHEET
EDIT STATUS:outline

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:

.querySelector()

returns one element

.querySelectorAll()

returns all matches

.getElementById()

returns one element

.getElementsByClassName()

returns all matches

.getElementsByTagNames()

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