| Server IP : 134.29.175.74 / Your IP : 216.73.216.160 Web Server : nginx/1.10.2 System : Windows NT CST-WEBSERVER 10.0 build 19045 (Windows 10) i586 User : Administrator ( 0) PHP Version : 7.1.0 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : C:/nginx/html/JimMartinson/CST1022/Resources/Week/14/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Formexamples</title>
<meta charset="utf-8">
<link href="form.css" rel="stylesheet">
<script src="form.js"></script>
</head>
<body>
<h1>Form examples</h1>
<p id="para1">Before the script...</p>
<div class="p">
From https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_attributes_maxlength
<form action="https://www.w3schools.com/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="10"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="p">
From https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_autofocus
<form action="https://www.w3schools.com/action_page.php">
<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"><br><br>
<input type="submit" value="Submit">
</form>
</div>
<div class="p">
From https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_datalist
<form action="https://www.w3schools.com/action_page.php">
<input list="browsers" name="browser" autofocus>
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit" value="Submit">
</form>
</div>
<div class="p">
From https://www.w3schools.com/js/tryit.asp?filename=tryjs_validation_check
<h2>JavaScript Validation</h2>
<p>Enter a number and click OK:</p>
<input id="id1" type="number" min="100" max="300" required>
<div id="error"></div>
<button onclick="myFunction()">OK</button>
<p>If the number is less than 100 or greater than 300, an error message will be displayed.</p>
<p id="demo" style="border:1px solid red;">ooga</p>
<p id="demo2"></p>
<script>
const inpObj = document.getElementById("id1");
let demo = document.getElementById("demo");
demo.innerHTML = 'validity=' + JSON.stringify(inpObj.validity) +
"<br>" + JSON.stringify(inpObj.validationMessage) +
"<br>" + JSON.stringify(inpObj.willValidate);
function myFunction() {
inpObj.setCustomValidity('Enter a number between 100 and 300');
if (!inpObj.checkValidity()) {
document.getElementById("demo2").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo2").innerHTML = "Input OK";
}
demo.innerHTML = 'validity=' + JSON.stringify(inpObj.validity) +
"<br>" + JSON.stringify(inpObj.validationMessage) +
"<br>" + JSON.stringify(inpObj.willValidate);
}
</script>
</div>
<script>
"use strict";
</script>
<p id="para2">...After the script.</p>
</body>
</html>