Skip to content

Commit

Permalink
98
Browse files Browse the repository at this point in the history
  • Loading branch information
@bgoonz
bgoonz committed Mar 11, 2022
1 parent dc2aedb commit 0240102
Show file tree
Hide file tree
Showing 98 changed files with 4,767 additions and 5,078 deletions.
38 changes: 18 additions & 20 deletions docs/content/learning-area/html/forms/html-form-structure/required-labels.html
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Required label examples</title>
</head>

<head>
<meta charset="utf-8" />
<title>Required label examples</title>
</head>
<body>
<form>
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<body>
<form>
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>

<!-- So this: -->
<!--<div>
<!-- So this: -->
<!--<div>
<label for="username">Name:</label>
<input type="text" name="username">
<label for="username"><abbr title="required">*</abbr></label>
</div>-->

<!-- would be better done like this: -->
<!--<div>
<!-- would be better done like this: -->
<!--<div>
<label for="username">
<span>Name:</span>
<input id="username" type="text" name="username">
<abbr title="required">*</abbr>
</label>
</div>-->

<!-- But this is probably best: -->
<div>
<label for="username">Name: <abbr title="required">*</abbr></label>
<input id="username" type="text" name="username" />
</div>
</form>
</body>

<!-- But this is probably best: -->
<div>
<label for="username">Name: <abbr title="required">*</abbr></label>
<input id="username" type="text" name="username" />
</div>
</form>
</body>
</html>
65 changes: 31 additions & 34 deletions docs/content/learning-area/html/forms/image-type-example/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>&lt;input type="image"&gt; example</title>
<style>
div {
margin-bottom: 10px;
}

<head>
<meta charset="utf-8" />
<title>&lt;input type="image"&gt; example</title>
<style>
div {
margin-bottom: 10px;
}

label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;
}

</style>
</head>

<body>
<form>
<p>Login to your account</p>
<div>
<label for="userId">User ID</label>
<input type="text" id="userId" name="userId" />
</div>
<div>
<label for="pwd">Password</label>
<input type="password" id="pwd" name="pwd" />
</div>
<div>
<input id="image" type="image" src="login.png" alt="login button" width="100" />
</div>
</form>
</body>
label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;
}
</style>
</head>

<body>
<form>
<p>Login to your account</p>
<div>
<label for="userId">User ID</label>
<input type="text" id="userId" name="userId" />
</div>
<div>
<label for="pwd">Password</label>
<input type="password" id="pwd" name="pwd" />
</div>
<div>
<input id="image" type="image" src="login.png" alt="login button" width="100" />
</div>
</form>
</body>
</html>
49 changes: 23 additions & 26 deletions docs/content/learning-area/html/forms/image-type-example/xy-coordinates-example.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>X Y coordinates example</title>
<style>
div {
margin-bottom: 10px;
}

<head>
<meta charset="utf-8" />
<title>X Y coordinates example</title>
<style>
div {
margin-bottom: 10px;
}

label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;
}

</style>
</head>

<body>
<form>
<p>Choose your favourite color</p>
<div>
<input id="image" type="image" src="colors.png" alt="image of four colored squares" />
</div>
</form>
</body>
label {
display: inline-block;
width: 70px;
text-align: right;
padding-right: 10px;
}
</style>
</head>

<body>
<form>
<p>Choose your favourite color</p>
<div>
<input id="image" type="image" src="colors.png" alt="image of four colored squares" />
</div>
</form>
</body>
</html>
117 changes: 57 additions & 60 deletions docs/content/learning-area/html/forms/indeterminate-example/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,68 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>callback test</title>
</head>

<head>
<meta charset="utf-8" />
<title>callback test</title>
</head>
<body>
<form>
<fieldset>
<legend>Complete the recipe</legend>
<div>
<input type="checkbox" id="EnchTbl" name="EnchTbl" />
<label for="EnchTbl">Enchantment table</label>
<ul>
<li>
<input type="checkbox" id="book" name="ingredient" value="book" />
<label for="book">Book</label>
</li>
<li>
<input type="checkbox" id="diamonds" name="ingredient" value="diamonds" />
<label for="diamonds">Diamonds (x2)</label>
</li>
<li>
<input type="checkbox" id="obsidian" name="ingredient" value="obsidian" />
<label for="obsidian">Obsidian (x4)</label>
</li>
</ul>
</div>
</fieldset>
</form>
<script>
var overall = document.querySelector('input[id="EnchTbl"]');
var ingredients = document.querySelectorAll('ul input');

<body>
<form>
<fieldset>
<legend>Complete the recipe</legend>
<div>
<input type="checkbox" id="EnchTbl" name="EnchTbl" />
<label for="EnchTbl">Enchantment table</label>
<ul>
<li>
<input type="checkbox" id="book" name="ingredient" value="book" />
<label for="book">Book</label>
</li>
<li>
<input type="checkbox" id="diamonds" name="ingredient" value="diamonds" />
<label for="diamonds">Diamonds (x2)</label>
</li>
<li>
<input type="checkbox" id="obsidian" name="ingredient" value="obsidian" />
<label for="obsidian">Obsidian (x4)</label>
</li>
</ul>
</div>
</fieldset>
</form>
<script>
var overall = document.querySelector( 'input[id="EnchTbl"]' );
var ingredients = document.querySelectorAll( 'ul input' );
overall.addEventListener('click', function (e) {
e.preventDefault();
});

overall.addEventListener( 'click', function ( e ) {
e.preventDefault();
} );
for (var i = 0; i < ingredients.length; i++) {
ingredients[i].addEventListener('click', updateDisplay);
}

for ( var i = 0; i < ingredients.length; i++ ) {
ingredients[ i ].addEventListener( 'click', updateDisplay );
}

function updateDisplay() {
var checkedCount = 0;
for ( var i = 0; i < ingredients.length; i++ ) {
if ( ingredients[ i ].checked ) {
checkedCount++;
}
}

if ( checkedCount === 0 ) {
overall.checked = false;
overall.indeterminate = false;
} else if ( checkedCount === ingredients.length ) {
overall.checked = true;
overall.indeterminate = false;
} else {
overall.checked = false;
overall.indeterminate = true;
}
}

</script>
</body>
function updateDisplay() {
var checkedCount = 0;
for (var i = 0; i < ingredients.length; i++) {
if (ingredients[i].checked) {
checkedCount++;
}
}

if (checkedCount === 0) {
overall.checked = false;
overall.indeterminate = false;
} else if (checkedCount === ingredients.length) {
overall.checked = true;
overall.indeterminate = false;
} else {
overall.checked = false;
overall.indeterminate = true;
}
}
</script>
</body>
</html>
Loading

0 comments on commit 0240102

Please sign in to comment.