Forms 1

This first post on forms is about the HTML rather than the JS. The JS is covered more in part 2

Basics

HTML forms are designed to send stuff to a server and typically the action attribute is added to some elements.

When used for purely front end purposes with JavaScript the default behaviour needs to be turned off:

function onSubmit(e) {
    e.preventDefault();

    // code to execute ..
}

Form elements

Some of these are rarely used:

• <input> The most common and comes with lots of different types (below).
• <label> Use to label a given element. Has a for attribute which links the label a correspoonding elements id.
• <select> Used to create a dropdown list. Each item in the list is an <option>
• <option> A child of the select element. The default is the one at the top of the list but another can be used by adding the selected attribute.
• <textarea> A larger field that can be defined using the attriubes rows and cols or with CSS
• <button> the standard button though <input type="submit"> is more commonly used in forms.
• <fieldset> is used to group related form elements together. Works with ..
• <legend> is for creating a caption for a <fieldset>.
• <datalist> is similar to a select and contains a list of <option> tags. It is linked to an <input list="theropoda"> element <datalist id="theropoda"> When a user types in a word the most suitable option pops up.
• <output>
• <optgroup>
• <search> a semantic container for a search form.

The <input> tag

The form element is a container that’s not visible. This container holds an <input> which comes in a variety of types. The most common ones are:

The syntax is:

<input type="text" id="firstName" name="fname">

Here is input with type button: . The text "Press Me!", comes from the value attribute:

<input type="button" value="Press Me!">

See MDN for a full list of input types.

Different input fields

The <input> tag is the main substance of any form and these can be used with the optional <label> tags. The label tags are linked to the input fields using the for attribute which holds the value of the field’s id:

<input id="forValue">`

Dropdown select boxes

These use the <select> tag which holds a group of <option> tags.

By default the first option is shown but to choose a different default add the attriubte selected to the option tag you wish to use.

Textarea

The <textarea> tag is used for larger pieces of text but it is NOT actually an input field.

The <textarea> uses attributes of cols and rows to set it’s default size but these can be overridden with CSS.

You can use the placeholder attribute (as below) or put text in between the opening and closing <textarea> tags. Placeholder text disappears when you type whereas text between the tags does not.

Attributes

• autocomplete if on allows the browser to predict the term entered. <input type="text" autocomplete="on">
• autofocus makes an input is set to focus <input type="text" focus>.
• disabled prevents a form element from being used.
• maxlength limits the number of character that can be entered: <input type="text" maxlength="50">
• min and max work with numerical data and only work the the following input types:
  • number
  • range
  • date
  • datetime-local
  • month
  • time
  • week
• multiple allows multiple files or multiple email addresses to be submitted with inputs of type file or email.
• name in a group of radio buttons if they all have the same name value you can only select one at a time. Also name is used by the server and generally uses the same value as other attributes
• pattern takes a regular expression value that the input value is checked against (See Kevin P vid).
• placeholder is used for default text in the input box. It could be used as an alternative to the <label> element. <input placeholder="firstname lastname">
• readonly prevents the value from being changed. <input type="text" readonly>
• required when added to an input means the form cannot be submitted unless this is filled in. <input type="email" required>
• size set the width in characters of an input field. input type="text" size="30">
• step if step="4" then the only allowable input is numbers that are divisible by 4.
• type is very important for input fields as it defines the type of field
• value
  • in a group of radio buttons this allows the server to see which option we have selected
  • whereas in <input type="submit"> the value is used for the button text.
  • in <input type="range"> the value attribute is the page load, preset figure of the slider.

<form name="color">
    <label for="color-picker">color</label>
    <input type="color" id="color-picker">
</form>

    const colorPicker = document.getElementById('color-picker');

    colorPicker.addEventListener('input', (e) => {
        document.body.style.backgroundColor = e.target.value;
        localStorage.setItem('background-color', e.target.value);
    }, false);

    function setColor() {
        // alert('setting the color');
        let bgColor = localStorage.getItem('background-color')
        document.body.style.backgroundColor = bgColor;
        colorPicker.value = bgColor;
    }
    setColor();

Links

• W3 Schools