Scripting Forms

The form element is used to represent a form, there are a number of properties and mehotds the form can have

acceptCharset - character sets the server can process
action - the URL to send the request to
elements - an HTMLCollection of all controls in the form
enctype - encoding type of the request
length - the number of controls in the form
method - type of HTTP request to send, for example GET/POST
name - the name of the form
reset() - resets all form fields to defaults
submit() - submit the form
target - the name of the window to use for sending the request and receiving the response

retrieve a form

let form = document.getElementById("form1");
        
// get the first form in the page
let firstForm = document.forms[0];

// get the form with a name of "form2"
let myForm = document.forms["form2"];

There are a few ways to submit a form and reset a form

submit form

// generic submit button
<input type="submit" value="Submit Form">

//custom submit button
<button type="submit">Submit Form</button>

// image button
<input type="image" src="graphic.gif">

// Just before request is sent to server you have a chance to validate the data
let form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
    // prevent form submission
    event.preventDefault();
});

reset form

// generic reset button
<input type="reset" value="Reset Form">

// custom reset button
<button type="reset">Reset Form</button>

// Like submit you have a chance before the form is reset
let form = document.getElementById("myForm");

form.addEventListener("reset", (event) => {
    event.preventDefault();
});

Form fields are accessed in much the same way as other elements on a web page, form fields have a number of common properties like disabled, form, name, readOnly, tabIndex, type and value which can all be accessed

form fields

let form = document.getElementById("form1");

// get the number of fields
let fieldCount = form.elements.length;

// get the first field in the form
let field1 = form.elements[0];

// get the field named "username"
let field2 = form.elements["username"];

// change the value
field1.value = "Another value";

// disable the field
field1.disabled = true;

There are a number of specific form-field events that you can use like blur, change and focus

focus example

textbox.addEventListener("focus", (event) => {
    let target = event.target;

    if (target.style.backgroundColor != "red") {
        target.style.backgroundColor = "yellow";
    }
});

Text boxes

There are two ways to represent text boxes in HTML input and textarea, you can use the select() event

select() example

let textbox = document.forms[0].elements["textbox1"];

textbox.addEventListener("select", (event) => {
    console.log('Text selected: ${textbox.value}');
});

HTML5 Constraint Validation

HTML5 has the capability to check data before being submitted

validation type	options
required fields	required
input types	email, url, min, max, minlength, maxlength
numeric ranges	number, range, datetime, datetime-local, date, month, week, time
input patterns	pattern

Javascript can check the validity of a form using the checkValidity() method

validity checks

if(document.forms[0].checkValidity()){
    // form is valid, proceed
} else {
    // form field is invalid
}

// the below will return true or false, there are more options than these below
input.validity.valueMissing
input.validity.typeMismatch

Select Boxes

Select boxes use select and option elements and you can use the below to retrieve the element select or option properties

select - add, multiple, options, remove, selectedIndex and size
option - index, label, selected, text and value

Select box example

let selectbox = document.forms[0].elements["location"];

let text = selectbox.options[0].text;                     // option text
let value = selectbox.options[0].value;                   // option value

// adding an option
let newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); // best solution

Serialization

A form can be serialized using the type property of form fields with the name and value, there are a few rules

field names and values are encoded and delimited using a ampersand
disabled fields are not sent at all
check boxes and radio fields are only sent of checked
buttons of tyoe reset or buttton types are not sent at all
multiselect fields have an entry for each value selected
submit button is sent if form is submitted using s submit button
value of select is the the value attribute of the selected option

serialization examples

switch(field.type) {
    case "select-one":
    case "select-multiple":
    case undefined:                     // fieldset
    case "file":                        // file input
    case "submit":                      // submit button
    case "reset":                       // reset button
    case "button":                      // custom button
        break;
    case "radio":                       // radio button
    case "checkbox":                    //
    .............
}

Note: you can then create a serialzed text string to send