prof3ssorSt3v3/form.css

## form.css
/*
Remember that form control elements don't inherit font properties (size, color, family) from the body.
Default font-family for body and elements that inherit from them is Serif.
Default font-family for <input> and <button> is sans-serif.
label will inherit from <form> or <div>.
label default font-size is 1.0rem.
<input> and <button> default size is 13.33333px (0.83333333333rem).
<input> and <button> elements have no margin by default.
*/

body {
  font-family: monospace;
  font-size: 16px;
  color: cadetblue;
}
form {
  /* font-family: monospace; */
}
label {
  /* font-family: monospace; */
}
input {
  font-family: monospace;
}
button {
  /* font-family: monospace; */
}

form > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 1rem 0;
}
form > div > label {
  width: 10rem;
}
form > div > * {
  font-size: 1rem;
}
form > div > button {
  margin-left: 10rem;
}

## form.js
document.querySelector('form').addEventListener('input', (ev) => {
  console.log(ev.target.localName, ev.target.id, ev.type);
  //bubbles
});
document.querySelector('form').addEventListener('change', (ev) => {
  console.log(ev.target.localName, ev.target.id, ev.type);
  //bubbles
});
document.querySelector('form').addEventListener('keypress', (ev) => {
  console.log(ev.target.localName, ev.target.id, ev.type);
  //bubbles
});

document.querySelector('form').addEventListener('submit', (ev) => {
  console.log(ev.target.localName, ev.target.id, ev.type);
  //bubbles
});

document.querySelector('#btnGo').addEventListener('click', (ev) => {
  console.log(ev.target.localName, ev.target.id, ev.type);
  //bubbles
});

document.querySelector('form').addEventListener('focus', (ev) => {
  console.log(ev.target.localName, ev.target.id, ev.type);
  //does not bubble - need to be added to the input elements
});
document.querySelector('form').addEventListener('blur', (ev) => {
  console.log(ev.target.localName, ev.target.id, ev.type);
  //does not bubble - need to be added to the input elements
});

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form Events</title>
    <link rel="stylesheet" href="./forms.css" />
    <script src="./forms.js" defer></script>
  </head>
  <body>
    <header>
      <h1>Form Events</h1>
    </header>
    <form action="#">
      <div>
        <label for="username">Username</label>
        <input id="username" name="username" type="text" />
      </div>
      <div>
        <label for="email">Email</label>
        <input id="email" name="email" type="email" />
      </div>
      <div>
        <label for="homepage">Homepage</label>
        <input id="homepage" name="homepage" type="url" />
      </div>
      <div>
        <button id="btnGo">Do Stuff</button>
      </div>
    </form>
  </body>
</html>
	/*
	Remember that form control elements don't inherit font properties (size, color, family) from the body.
	Default font-family for body and elements that inherit from them is Serif.
	Default font-family for <input> and <button> is sans-serif.
	label will inherit from <form> or <div>.
	label default font-size is 1.0rem.
	<input> and <button> default size is 13.33333px (0.83333333333rem).
	<input> and <button> elements have no margin by default.
	*/

	body {
	font-family: monospace;
	font-size: 16px;
	color: cadetblue;
	}
	form {
	/* font-family: monospace; */
	}
	label {
	/* font-family: monospace; */
	}
	input {
	font-family: monospace;
	}
	button {
	/* font-family: monospace; */
	}

	form > div {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 1rem 0;
	}
	form > div > label {
	width: 10rem;
	}
	form > div > * {
	font-size: 1rem;
	}
	form > div > button {
	margin-left: 10rem;
	}
	document.querySelector('form').addEventListener('input', (ev) => {
	console.log(ev.target.localName, ev.target.id, ev.type);
	//bubbles
	});
	document.querySelector('form').addEventListener('change', (ev) => {
	console.log(ev.target.localName, ev.target.id, ev.type);
	//bubbles
	});
	document.querySelector('form').addEventListener('keypress', (ev) => {
	console.log(ev.target.localName, ev.target.id, ev.type);
	//bubbles
	});

	document.querySelector('form').addEventListener('submit', (ev) => {
	console.log(ev.target.localName, ev.target.id, ev.type);
	//bubbles
	});

	document.querySelector('#btnGo').addEventListener('click', (ev) => {
	console.log(ev.target.localName, ev.target.id, ev.type);
	//bubbles
	});

	document.querySelector('form').addEventListener('focus', (ev) => {
	console.log(ev.target.localName, ev.target.id, ev.type);
	//does not bubble - need to be added to the input elements
	});
	document.querySelector('form').addEventListener('blur', (ev) => {
	console.log(ev.target.localName, ev.target.id, ev.type);
	//does not bubble - need to be added to the input elements
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Form Events</title>
	<link rel="stylesheet" href="./forms.css" />
	<script src="./forms.js" defer></script>
	</head>
	<body>
	<header>
	<h1>Form Events</h1>
	</header>
	<form action="#">
	<div>
	<label for="username">Username</label>
	<input id="username" name="username" type="text" />
	</div>
	<div>
	<label for="email">Email</label>
	<input id="email" name="email" type="email" />
	</div>
	<div>
	<label for="homepage">Homepage</label>
	<input id="homepage" name="homepage" type="url" />
	</div>
	<div>
	<button id="btnGo">Do Stuff</button>
	</div>
	</form>
	</body>
	</html>