91 lines
3.0 KiB
HTML
91 lines
3.0 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
form {
|
|
padding: 5px;
|
|
margin: 2px;
|
|
border: 1px solid black;
|
|
}
|
|
form:invalid {
|
|
background-color: red;
|
|
}
|
|
form:not(:invalid) {
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
<script>
|
|
function createTestDOM() {
|
|
var body = document.body;
|
|
|
|
{
|
|
body.appendChild(document.createElement("form"));
|
|
}
|
|
{
|
|
var form = document.createElement("form");
|
|
form.appendChild(document.createElement("input"));
|
|
body.appendChild(form);
|
|
}
|
|
{
|
|
var container = document.createElement("div");
|
|
var form = document.createElement("form");
|
|
form.setAttribute("id", "basic_input");
|
|
container.appendChild(form);
|
|
|
|
var input = document.createElement("input");
|
|
input.setAttribute("form", "basic_input");
|
|
container.appendChild(input);
|
|
|
|
body.appendChild(container);
|
|
}
|
|
{
|
|
var form = document.createElement("form");
|
|
var input = document.createElement("input");
|
|
input.setAttribute("required", "");
|
|
form.appendChild(input);
|
|
body.appendChild(form);
|
|
}
|
|
{
|
|
var container = document.createElement("div");
|
|
var form = document.createElement("form");
|
|
form.setAttribute("id", "required_input");
|
|
container.appendChild(form);
|
|
|
|
var input = document.createElement("input");
|
|
input.setAttribute("form", "required_input");
|
|
input.setAttribute("required", "");
|
|
container.appendChild(input);
|
|
|
|
body.appendChild(container);
|
|
}
|
|
{
|
|
var form = document.createElement("form");
|
|
var input = document.createElement("input");
|
|
input.setAttribute("required", "");
|
|
input.value = "WebKit!";
|
|
form.appendChild(input);
|
|
body.appendChild(form);
|
|
}
|
|
{
|
|
var container = document.createElement("div");
|
|
var form = document.createElement("form");
|
|
form.setAttribute("id", "valid_required_input");
|
|
container.appendChild(form);
|
|
|
|
var input = document.createElement("input");
|
|
input.setAttribute("form", "valid_required_input");
|
|
input.setAttribute("required", "");
|
|
input.value = "WebKit!";
|
|
container.appendChild(input);
|
|
|
|
body.appendChild(container);
|
|
}
|
|
}
|
|
window.addEventListener("load", createTestDOM);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<p>Test the basics of the pseudo class :invalid with the <form> element. This test creates the test DOM with JavaScript.</p>
|
|
</body>
|
|
</html>
|