Grouping Form Data with <fieldset>

The <fieldset> element groups related data in a form.

The <legend> element defines a caption for the <fieldset> element.


<form action=”action_page.php”>
<legend>Personal information:</legend>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”><br>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”><br><br>
<input type=”submit” value=”Submit”>


Attribute Description
accept-charset Specifies the charset used in the submitted form (default: the page charset).
action Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete Specifies if the browser should autocomplete the form (default: on).
enctype Specifies the encoding of the submitted data (default: is url-encoded).
method Specifies the HTTP method used when submitting the form (default: GET).
name Specifies a name used to identify the form (for DOM usage:
novalidate Specifies that the browser should not validate the form.
target Specifies the target of the address in the action attribute (default: _self).


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

Changing HTML Elements

Method Description
element.innerHTML =  new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML element
element.setAttribute(attribute, value) Change the attribute value of an HTML element = new style Change the style of an HTML 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(element) Replace an HTML element
document.write(text) Write into the HTML output stream

Adding Events Handlers

Method Description
document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event


<p id=”p1″>Hello World!</p>

document.getElementById(“p1”).innerHTML = “New text!”;



jQuery Syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to “query (or find)” HTML elements
  • A jQuery action() to be performed on the element(s)


$(this).hide() – hides the current element.

$(“p”).hide() – hides all <p> elements.

$(“.test”).hide() – hides all elements with class=”test”.

$(“#test”).hide() – hides the element with id=”test”.

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

JavaScript Data Types

JavaScript variables can hold many data types: numbers, strings, arrays, objects and more:

var length = 16;                               // Number
var lastName = “Johnson”;                      // String
var cars = [“Saab”, “Volvo”, “BMW”];           // Array

// var cars = new Array(“Saab”, “Volvo”, “BMW”);
var x = {firstName:”John”, lastName:”Doe”};    // Object

function name(parameter1, parameter2, parameter3) {
code to be executed

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
document.getElementById(“demo”).innerHTML = toCelsius(77);









Object Properties Methods

Auto object

Auto object = Fiatcar.model = 500

car.weight = 850kg

car.color = white





var person = {

fullName : function() {

return this.firstName + ” ” + this.lastName;



Common HTML Events

Here is a list of some common HTML events:

Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

<button onclick=”this.innerHTML=Date()”>The time is?</button>


Array Properties

Property Description
constructor Returns the function that created the Array object’s prototype
length Sets or returns the number of elements in an array
prototype Allows you to add properties and methods to an Array object

Array Methods

Method Description
concat() Joins two or more arrays, and returns a copy of the joined arrays
copyWithin() Copies array elements within the array, to and from specified positions
every() Checks if every element in an array pass a test
fill() Fill the elements in an array with a static value
filter() Creates a new array with every element in an array that pass a test
find() Returns the value of the first element in an array that pass a test
findIndex() Returns the index of the first element in an array that pass a test
forEach() Calls a function for each array element
indexOf() Search the array for an element and returns its position
isArray() Checks whether an object is an array
join() Joins all elements of an array into a string
lastIndexOf() Search the array for an element, starting at the end, and returns its position
map() Creates a new array with the result of calling a function for each array element
pop() Removes the last element of an array, and returns that element
push() Adds new elements to the end of an array, and returns the new length
reduce() Reduce the values of an array to a single value (going left-to-right)
reduceRight() Reduce the values of an array to a single value (going right-to-left)
reverse() Reverses the order of the elements in an array
shift() Removes the first element of an array, and returns that element
slice() Selects a part of an array, and returns the new array
some() Checks if any of the elements in an array pass a test
sort() Sorts the elements of an array
splice() Adds/Removes elements from an array
toString() Converts an array to a string, and returns the result
unshift() Adds new elements to the beginning of an array, and returns the new length
valueOf() Returns the primitive value of an array



JavaScript Performance

Reduce Activity in Loops

Loops are often used in programming.

Each statement in a loop, including the for statement, is executed for each iteration of the loop.

Search for statements or assignments that can be placed outside the loop.

Bad Code:

for (i = 0; i < arr.length; i++) {

Better Code:

l = arr.length;
for (i = 0; i < l; i++)


Avoid Unnecessary Variables

Don’t create new variables if you don’t plan to save values.

Often you can replace code like this:

var fullName = firstName + ” ” + lastName;
document.getElementById(“demo”).innerHTML = fullName;

With this:

document.getElementById(“demo”).innerHTML = firstName + ” ” + lastName


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *