HTML Forms Cheat Sheet

This is a continuation of my HTML cheat sheet with a focus on the form elements.

the minimalist form

Forms start with a form ta that uses the format:

<form action="" method="get" target="_self" id="sample1"
autocomplete="off">
<button type="submit" name="submit1" value="submit"
form="sample1">Sample Submit button</button>
<button type="submit" name="submit1b" value="submit"
formaction="https://spelchan.com/index.php">
Sample Submit button</button>
</form>

This looks like:

input

While can have anything in a form, to better tie text to the element that is receiving input, we use <label> to create labels with the for attribute linking the label to the input. Forms can have boxed areas in them by using <fieldset> with a title attached to the box by using the <legend> tag. Labels have a type as weill as the following attributes:

autocaptialize for browsers to aid in input. None, character, word, sentence.
autocomplete lets you turn off browser autocomplete.
disabled disables the box
form lets you specify which form input is for
maxlength maximum number of characters
minlength maximum number of characters for valid input
placeholder text that shows up as hint, but not a value
readonly makes text in input non-editable
required makes it required that value in field before can submit
size number of Ms that make up field (can be more entered).

Here is a form going over all the different input types.

text input controls input type="text":
input type="email":
input type="hidden":
input type="number":
input type="password":
input type="search":
input type="tel":
input type="url":

checkbox and radio buttons

Fieldsets are important for checkboxes and radio buttons as they group them so that it is clear where they belong. While you don't need to group them, it is important to remember that each checkbox is a unique item while radiobuttons are grouped based on the name so all radio buttons in a group share the same name field with the value sent to the server being the selected radio button value. You use checked attribute to set or check if a button is set.

Checkbox group Choice 1 Choice 2 Choice 3

Radio button group Choice 1 Choice 2 Choice 3

date and time input type="date":
input type="datetime-local":
input type="month":
input type="time":
input type="week":

other range input type="range":
input type="color":
input type="button" (disabled):
input type="reset" (disabled):
input type="submit" (disabled):
input type="file":
input type="image":

TextArea

In addition to types we can have resizable boxes of text using the <textarea> tag with the attributes cols and rows determining the initial size of the text area. Unlike input tags, you need to close the textarea tag, with the contents of the textarea being the default text.

Select

The <select> tag is used to create a combo-box control with each of the elements in the control set up using the <option value="value"> tag. the name attribute in the select is what the form will send to the server and the value of the selected option will be the result.

Select a color:

dataList

Datalists work similar to select/option lists but are tied to input controls. Big difference is you can type in non-list items.

output Output example: x =

validating forms

Attributes like minlength are used to validate forms. The form won't be submitted if not valid. Manual validation possible by using the form's onsubmit event. Returning true submits the form otherwise not submitted. Values of the form elements can be obtained using:

let s = document.getElementById("elementId").value;

or if you don't have id's but have names:

let s = document.form["formName"]["elementName"].value;

Checkboxes and radio buttons have a .checked attribute to see if selected.

To see if an element meets the HTML validity requirements (minlength, maxlength, pattern, required, and type specific) use the checkValidity() method.

Dialog boxes

Dialog demo

Dialog boxes have been faked for a long time by taking advantage of css hiding but in 2022 they were added to HTML5. Can be modal (part of the page) using .show() or modeless (float above page) using showModal().

← Return to chapter

HTML Forms cheat sheet

the minimalist form

input

validating forms

Dialog boxes