Index

Table of contents

HTML

infra

HTML5 doctype
<!doctype html>
include css file (in <head>)
<link rel="stylesheet" type="text/css" href="mystyle.css">
inline css
<style>
h1 {color:red;}
</style>
inline javascript
<script type="text/javascript">alert('foo');</script>
include script file
<script type="text/javascript" src="/jquery.js"></script>
don't run the included javascript until later
<script type="text/javascript" defer>alert('foo');</script>
noscript tag for when javascript is not available
<noscript>you might wanna turn on javascript</noscript>
run javascript after page is fully initialized
<body onload="alert('page loaded');">
specifying favicon location
<head><link rel="icon" href="/web/static/favicon.ico"></head>

containers

fieldset with legend
<fieldset><legend>Description</legend></fieldset>

tables

<table>
	<caption>title</caption>
	<tbody>
		<tr>
			<th>header</th>
			<td>col1</td>
			<td>col2</td>
		</tr>
	</tbody>
</table>

text

ordered list
<ol><li>[value]</li></ol>
unordered list
<ul><li>[value]</li></ul>

anchor tags

jump to tag, HTML only
<a href="#section">jump to tag with id=section</a>
<a id="section" name="section">destination</a>
anchor tag with javascript on it
<a href="javascript:void alert('boe');">click me</a>

forms

html form
<form action="/[path]" method="POST">
multipart form
<form method="POST" class="formtainer" enctype='multipart/form-data'>
input field
<input type="text" name="name" value="Johnny" />
turn off auto complete
<input type="text" autocomplete="off" />
input validation
<input type="URL" />
<input type="number" />
<input type="text" pattern="[1-4]{5}" />
<input type="text" required />
<input type="text" maxlength="20" />
<input type="number" min="1" max="4" />
file input
<form method="POST" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" />
</form>
hidden input
<input type="hidden" value="hidden"/>
password field
<input name="password" type="password" size="50" />
submit button
<input type="submit" value="go" />
checked radio button
<input type="radio" name="[key]" value="[value]" checked />[label]<br>
unchecked radio button
<input type="radio" name="[key]" value="[value]" />[label]<br>
checked checkbox
<input type="checkbox" checked />
unchecked checkbox
<input type="checkbox" />
textarea
<textarea rows="4" cols="50"></textarea>
single select (drop down)
<select>
	<option value="1">one</option>
	<option value="2">two</option>
	<option value="3">three</option>
</select>
multi select (list)
<select multiple>
	<option value="1">one</option>
	<option value="2">two</option>
	<option value="3">three</option>
</select>
button with different label (or even HTML) and value
<button name="[name]" value="[value]" type="submit">[html/label]</button>
give input focus on document load
<input type="text" autofocus />
javascript on onclick event
<input type="submit" onclick="alert('foo')"></input>

media

embed audio with controls
<audio controls>
	<source src="[/path/to/file.mp3]" type="audio/mpeg">
	Your browser does not support HTML5 audio
</audio>
play audio from javascript
audio = new Audio(url);
audio.play();
audio.pause();
documentation
https://html.spec.whatwg.org/multipage/media.html#audio