| Paste number 21008: | accessible pure css forms no structure |
| Pasted by: | flaccid |
| When: | 3 years, 3 weeks ago |
| Share: | Tweet this! | http://paste.lisp.org/+G7K |
| Channel: | None |
| Paste contents: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Name of the game</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body {
font: normal 13px/1.2em "Trebuchet MS", "Arial", "Helvetica", serif;
}
/* forms */
form {
margin: auto;
width: 600px;
}
form * {
font-family: "Arial", "Helvetica", serif;
}
fieldset {
overflow: hidden;
padding: 10px;
padding-left: 205px;
border: none;
border-top: 1px solid #ccc;
margin-bottom: 20px;
}
label {
display: inline;
text-align: right;
float: left;
margin-left: -130px;
clear: left;
position: relative;
top: 20px;
white-space: nowrap;
width: 120px;
}
input, textarea, fieldset select, fieldset em, fieldset p {
float: left;
clear: left;
}
fieldset p {
margin-top: -25px;
margin-left: 70px;
width: 290px;
}
legend {
background: transparent;
font-size: 1.3em;
font-weight: bold;
margin-left: -180px;
color: #00f;
}
input:focus, textarea:focus {
background: #efefef;
color: #000;
}
input.submit {
border: solid 1px #fffafa;
padding: 2px;
border: solid 1px #aaa;
}
fieldset.submit {
margin: 0;
border: 0;
}
</style>
</head>
<body>
<h3>Certificate II in Business</h3>
<p>
Change required fields and press update to confirm.
</p>
<form action="/jobsmart.net.au/subdomains/admin/httpdocs/certificates.php" method="get">
<fieldset>
<input type="hidden" name="action" value="edit" />
<legend>Main Details</legend>
<label for="cert_id">Cert ID:</label>
<input id="cert_id" value="1" disabled="disabled" size="3" />
<input type="hidden" name="cert_id" value="1" />
<label for="cert_name">Unit Code:</label>
<input name="cert_name" id="cert_name" value="BSB20101" />
<label for="cert_desc">Cert Description:</label>
<input name="cert_desc" id="cert_desc" value="Certificate II in Business" size="42" />
<label for="cert_type">Cert Type:</label>
<select name="cert_type" id="cert_type">
<option value="b">Retail</option>
<option value="b">Business</option>
</select>
<label for="suit">Suit:</label>
<select name="suit" id="suit">
<option value="J">Junior</option>
<option value="S">Senior</option>
<option value="JS">Junior or Senior</option>
</select>
<label for="emptype">Employee type:</label>
<select name="emptype" id="emptype">
<option value="N">New</option>
<option value="E">Existing</option>
<option value="NE">New or Existing</option>
</select>
</fieldset>
<fieldset>
<legend>Costs</legend>
<label for="dest_incentive">DEST Incentive:</label>
<input name="dest_incentive" id="dest_incentive" value="1250" size="8" maxlength="12" /><em>$AU</em>
<label for="det_subsidy">DET Subsidy:</label>
<input name="det_subsidy" id="det_subsidy" value="0" size="8" maxlength="12" /><em>$AU</em>
<label for="emp_cost">Employer cost:</label>
<input name="emp_cost" id="emp_cost" value="1750" size="8" maxlength="12" /><em>$AU</em>
<label for="partic_cost">Participant cost:</label>
<input name="partic_cost" id="partic_cost" value="0" size="8" maxlength="12" /><em>$AU</em>
</fieldset>
<fieldset>
<legend>Site Inclusion</legend>
<label for="wizard">Show in Wizard</label>
<select name="wizard" id="wizard">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<p>If yes, this certificate will appear in the <a href="http://jobsmart.net.au/wizard.php" title="JobSmart Certificate Wizard">Certificate Wizard</a>.</p>
<label for="resources">Show in Resources</label>
<select name="resources" id="resources">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<p>If yes, this certificate will appear in <a href="http://jobsmart.net.au/resources.php" title="JobSmart Traineeship Resources">Traineeship Resources</a>.</p>
</fieldset>
<fieldset class="submit">
<input type="submit" value="Update" class="submit" />
</fieldset>
</form>
</body>
</html> This paste has no annotations.