Unit 4: Forms and JavaScript objects

html<form action="register.php" method="post">
  ...controls...
</form>

• action: where the data is sent (a server script).
• method: GET sends data in the URL (visible, limited length, for searches); POST sends it in the request body (hidden, for passwords and large data).

Useful attributes: name (identifies the data), value, placeholder, maxlength, size and required.

• Checkbox: choose any number of options. <input type="checkbox" name="skills" value="C++"> C++
• Radio button: choose only one option from a group; all buttons in the group share the same name. <input type="radio" name="gender" value="F"> Female
• checked pre-selects an option.

• Textarea: multi-line text such as an address: <textarea name="address" rows="4" cols="40"></textarea>
• Select (drop-down) list:

html<select name="course">
  <option value="bca">BCA</option>
  <option value="bba" selected>BBA</option>
</select>

• Multi-choice select list: add multiple (and often size) so the user can select several options with Ctrl.

An event is something that happens on the page: click, change, submit, load, mouseover, keyup. JavaScript can respond to it.

html<form name="login" onsubmit="return validate()">
  <input name="user"> <input type="password" name="pwd">
  <input type="submit" value="Login">
</form>
<script>
function validate() {
  const f = document.forms["login"];
  if (f.user.value === "") { alert("Enter username"); return false; }
  if (f.pwd.value.length < 6) { alert("Password too short"); return false; }
  return true;
}
</script>

Returning false from the submit handler stops the form from being sent.

• Objects: let student = { name: "Ana", roll: 12 }; student.name;
• Array methods: push, pop, shift, slice, splice, indexOf, map, filter, forEach, join.
• JSON (JavaScript Object Notation) is a text format for exchanging data with servers.

javascript// Object literal
const student = { name: "Aman", marks: 82, grade() { return this.marks >= 75 ? "A" : "B"; } };

// Constructor function and instances
function Book(title, price) {
  this.title = title;
  this.price = price;
  this.discount = function (pct) { return this.price * (1 - pct / 100); };
}
const b1 = new Book("C Programming", 450);
const b2 = new Book("Web Design", 600);
console.log(b1.discount(10));   // 405

// ES6 class
class Account {
  constructor(owner, balance) { this.owner = owner; this.balance = balance; }
  deposit(amt) { this.balance += amt; return this.balance; }
}