HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.

Usually, the form data is sent to a file on the server when the user clicks on the submit
button.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

The Target Attribute

The target attribute specifies where to display the response that is received after
submitting the form.

The Method Attribute

The method attribute specifies the HTTP method to be used when submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP post
transaction (with method="post").

The default HTTP method when submitting form data is GET.

GET:

 Appends the form data to the URL, in name/value pairs

 NEVER use GET to send sensitive data! (the submitted form data is visible in the URL!)
 The length of a URL is limited (2048 characters)
  Useful for form submissions where a user wants to bookmark the result
 GET is good for non-secure data, like query strings in Google

POST:

 Appends the form data inside the body of the HTTP request (the submitted form data
is not shown in the URL)
 POST has no size limitations, and can be used to send large amounts of data.
 Form submissions with POST cannot be bookmarked

The autocomplete attribute specifies whether a form should have autocomplete on or off.

The novalidate attribute is a boolean attribute.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on the type attribute.

<input type="text"> Displays a single-line text input field

<input type="checkbox"> Displays a checkbox (for selecting zero or

more of many choices)
<input type="submit"> Displays a submit button (for submitting the
form)

<input type="reset"> defines a reset button that will reset all

form values to their default values

<input type="button"> Displays a clickable

button

<input type="radio"> Displays a radio button (for selecting one of

many choices)
 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="email">
 <input type="file">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="submit">
 <input type="text">
 <input type="week">
HTML Input Attributes

The input value attribute specifies an initial value for an input field:

The input readonly attribute specifies that an input field is read-only.A read-only input field cannot be
modified (however, a user can tab to it, highlight it, and copy the text from it).The value of a read-only
input field will be sent when submitting the form!

The input disabled attribute specifies that an input field should be disabled.A disabled input field is
unusable and un-clickable.The value of a disabled input field will not be sent when submitting the
form!

The input size attribute specifies the visible width, in characters, of an input field.The default value
for size is 20.

The input maxlength attribute specifies the maximum number of characters allowed in an input
field.The input min and max attributes specify the minimum and maximum values for an input
field.The min and max attributes work with the following input types: number, range, date, datetime-
local, month, time and week.

The input required attribute specifies that an input field must be filled out before submitting the form.

The input autofocus attribute specifies that an input field should automatically get focus when the page
loads.

The input autocomplete attribute specifies whether a form or an input field should have autocomplete
on or off.

The required attribute works with the following input types: text, search, url, tel, email, password, date
pickers, number, checkbox, radio, and file.

Text Fields

The <input type="text"> defines a single-line input field for text input.

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.
</textarea>
The <button> Element

The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The <label> Element

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within
the <label> element, it toggles the radio button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

<p>Choose your favorite Web language:</p>

<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
</form>

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
</form>

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-
handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

Note: each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent at all.

The <select> Element

The <select> element defines a drop-down list:

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> element defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Use the size attribute to specify the number of visible values:

Use the multiple attribute to allow the user to select more than one value:

JavaScript HTML DOM

With the HTML DOM, JavaScript can access and change all the elements of an HTML
document.
The HTML DOM (Document Object Model)

When a web page is loaded, the browser creates a Document Object Model of the
page.The HTML DOM model is constructed as a tree of Objects:

The HTML DOM Tree of Objects

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

 JavaScript can change all the HTML elements in the page

 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and
style of a document."

The W3C DOM standard is separated into 3 different parts:

 Core DOM - standard model for all document types

 XML DOM - standard model for XML documents
 HTML DOM - standard model for HTML documents

The HTML DOM is a standard object model and programming interface for HTML. It
defines:

 The HTML elements as objects

 The properties of all HTML elements
  The methods to access all HTML elements
 The events for all HTML elements

In other words: The HTML DOM is a standard for how to get, change, add, or delete
HTML elements.

The DOM Programming Interface

The HTML DOM can be accessed with JavaScript (and with other programming languages).In
the DOM, all HTML elements are defined as objects.The programming interface is the
properties and methods of each object.A property is a value that you can get or set (like
changing the content of an HTML element).A method is an action you can do (like add or
deleting an HTML element).

<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

The getElementById Method

The most common way to access an HTML element is to use the id of the element.In the
example above the getElementById method used id="demo" to find the element.

The innerHTML Property

The easiest way to get the content of an element is by using

the innerHTML property.The innerHTML property is useful for getting or replacing the
content of HTML elements.The HTML DOM document object is the owner of all other
objects in your web page.

The HTML DOM Document Object

The document object represents your web page.

If you want to access any element in an HTML page, you always start with accessing the
document object.

Finding HTML Elements

Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName( Find elements by tag name
name)
document.getElementsByClassNam Find elements by class name
e(name)

Changing HTML Elements

Property Description
element.innerHTML = new html Change the inner HTML of an element
content
element.attribute = new value Change the attribute value of an HTML
element
element.style.property = new Change the style of an HTML element
style
Method Description
element.setAttribute(attribute, Change the attribute value of an HTML
value) element

Adding and Deleting Elements

Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream

Reacting to Events
A JavaScript can be executed when an event occurs, like when a user clicks on an HTML
element.

To execute code when a user clicks on an element, add JavaScript code to an HTML event
attribute:

onclick=JavaScript

Examples of HTML events:

  When a user clicks the mouse
 When a web page has loaded
 When an image has been loaded
 When the mouse moves over an element
 When an input field is changed
 When an HTML form is submitted
 When a user strokes a key

In this example, the content of the <h1> element is changed when a user clicks on it:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>

<h2 onclick="this.innerHTML='Ooops!'">Click on this text!</h2>

</body>
</html>

<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

The onload and onunload Events

The onload and onunload events are triggered when the user enters or leaves the page.

The onload event can be used to check the visitor's browser type and browser version, and
load the proper version of the web page based on the information.
The onload and onunload events can be used to deal with cookies.

<body onload="checkCookies()">

The onchange Event

The onchange event is often used in combination with validation of input fields.

Below is an example of how to use the onchange. The upperCase() function will be called
when a user changes the content of an input field.

<input type="text" id="fname" onchange="upperCase()">

The onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger a function when the user
mouses over, or out of, an HTML element:

Mouse Over Me

The onmousedown, onmouseup and onclick Events

The onmousedown, onmouseup, and onclick events are all parts of a mouse-click. First when
a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-
button is released, the onmouseup event is triggered, finally, when the mouse-click is
completed, the onclick event is triggered.

Input Events
onblur - When a user leaves an input field onchange - When a user changes the content of
an input field onchange - When a user selects a dropdown value onfocus - When an input
field gets focus onselect - When input text is selected onsubmit - When a user clicks the
submit button onreset - When a user clicks the reset button onkeydown - When a user is
pressing/holding down a key onkeypress - When a user is pressing/holding down a
keyonkeyup - When the user releases a key onkeyup - When the user releases a key
onkeydown vs onkeyup - Both
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML Events</h2>

Enter your name: <input type="text" id="fname" onchange="upperCase()">
<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>

<script>
function upperCase() {
const x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(x) {
x.style.background = "yellow";
}
</script>
</head>
<body>

Enter your name: <input type="text" onfocus="myFunction(this)">

<p>When the input field gets focus, a function is triggered which changes the background-color.</p>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>

<p>A function is triggered when the user is pressing a key in the input field.</p>

<input type="text" onkeydown="myFunction()">

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</head>
<body>

<p>Click the button to trigger a function.</p>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

</body>
</html>