manichandra/basic-raw-html-form.html

## basic-raw-html-form.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}
</style>
</head>
<body>

  <form>
    <div>
    <label for="uname">Choose a username: </label>
    <input type="text" id="uname" name="name"
           placeholder="Lower case, all one word"
           size="30" required
           minlength="4" maxlength="8">
      <span class="validity"></span>
    </div>

    <div>
    <label for="uname1">Choose a username: </label>
    <input type="text" id="uname1" name="name1"
           placeholder="pattern"
           pattern="[a-z]{4,8}">
      <span class="validity"></span>
      <p>Usernames must be lowercase and 4-8 characters in length.</p>

    </div>
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
           name="contact" value="email">
    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice2"
           name="contact" value="phone">
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice3"
           name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>


    <div>
    <input type="radio" id="contactChoice11"
           name="contact1" value="email">
    <label for="contactChoice11">Email</label>
    <input type="radio" id="contactChoice12"
           name="contact1" value="phone">
    <label for="contactChoice12">Phone</label>
    <input type="radio" id="contactChoice13"
           name="contact1" value="mail">
    <label for="contactChoice13">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre id="log">
</pre>


<script id="jsbin-javascript">
var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
    console.log(data);
//     console.log(data.getAll());
//     console.log(data.has('name'));
  var output = "";
  for (const entry of data) {
    console.log(entry);
    output = output + entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);
</script>


<script id="jsbin-source-css" type="text/css">div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">
var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
    console.log(data);
//     console.log(data.getAll());
//     console.log(data.has('name'));
  var output = "";
  for (const entry of data) {
    console.log(entry);
    output = output + entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);</script></body>
</html>

## jsbin.nejimediqi.css
div {
  margin-bottom: 10px;
  position: relative;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

## jsbin.nejimediqi.js
var form = document.querySelector("form");
var log = document.querySelector("#log");

form.addEventListener("submit", function(event) {
  var data = new FormData(form);
    console.log(data);
//     console.log(data.getAll());
//     console.log(data.has('name'));
  var output = "";
  for (const entry of data) {
    console.log(entry);
    output = output + entry[0] + "=" + entry[1] + "\r";
  };
  log.innerText = output;
  event.preventDefault();
}, false);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	div {
	margin-bottom: 10px;
	position: relative;
	}

	input + span {
	padding-right: 30px;
	}

	input:invalid+span:after {
	position: absolute; content: '✖';
	padding-left: 5px;
	}

	input:valid+span:after {
	position: absolute;
	content: '✓';
	padding-left: 5px;
	}
	</style>
	</head>
	<body>

	<form>
	<div>
	<label for="uname">Choose a username: </label>
	<input type="text" id="uname" name="name"
	placeholder="Lower case, all one word"
	size="30" required
	minlength="4" maxlength="8">
	<span class="validity"></span>
	</div>

	<div>
	<label for="uname1">Choose a username: </label>
	<input type="text" id="uname1" name="name1"
	placeholder="pattern"
	pattern="[a-z]{4,8}">
	<span class="validity"></span>
	<p>Usernames must be lowercase and 4-8 characters in length.</p>

	</div>
	<p>Please select your preferred contact method:</p>
	<div>
	<input type="radio" id="contactChoice1"
	name="contact" value="email">
	<label for="contactChoice1">Email</label>
	<input type="radio" id="contactChoice2"
	name="contact" value="phone">
	<label for="contactChoice2">Phone</label>
	<input type="radio" id="contactChoice3"
	name="contact" value="mail">
	<label for="contactChoice3">Mail</label>
	</div>


	<div>
	<input type="radio" id="contactChoice11"
	name="contact1" value="email">
	<label for="contactChoice11">Email</label>
	<input type="radio" id="contactChoice12"
	name="contact1" value="phone">
	<label for="contactChoice12">Phone</label>
	<input type="radio" id="contactChoice13"
	name="contact1" value="mail">
	<label for="contactChoice13">Mail</label>
	</div>
	<div>
	<button type="submit">Submit</button>
	</div>
	</form>
	<pre id="log">
	</pre>



	<script id="jsbin-javascript">
	var form = document.querySelector("form");
	var log = document.querySelector("#log");

	form.addEventListener("submit", function(event) {
	var data = new FormData(form);
	console.log(data);
	// console.log(data.getAll());
	// console.log(data.has('name'));
	var output = "";
	for (const entry of data) {
	console.log(entry);
	output = output + entry[0] + "=" + entry[1] + "\r";
	};
	log.innerText = output;
	event.preventDefault();
	}, false);
	</script>


	<script id="jsbin-source-css" type="text/css">div {
	margin-bottom: 10px;
	position: relative;
	}

	input + span {
	padding-right: 30px;
	}

	input:invalid+span:after {
	position: absolute; content: '✖';
	padding-left: 5px;
	}

	input:valid+span:after {
	position: absolute;
	content: '✓';
	padding-left: 5px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">
	var form = document.querySelector("form");
	var log = document.querySelector("#log");

	form.addEventListener("submit", function(event) {
	var data = new FormData(form);
	console.log(data);
	// console.log(data.getAll());
	// console.log(data.has('name'));
	var output = "";
	for (const entry of data) {
	console.log(entry);
	output = output + entry[0] + "=" + entry[1] + "\r";
	};
	log.innerText = output;
	event.preventDefault();
	}, false);</script></body>
	</html>