Ludo
86464f3e21
Import from agentic-semantic-web/ into restructured repo: - 7 packs (apache, caddy, flask, hugo, nginx, pandoc, python) - shared error pages (403-503) - 17 lab experiments (boilerplate, charts, misc) - 31 example pages (charts, components, content, layout, vault) - 2 themes (garden, trentuna stub) - 4 docs (llms.txt, vocabulary, philosophy, agent-directive) - lineage.md (Pico/Open Props/Charts.css history) - Hugo mounts for lab/ and examples/ All agentic.css references updated to asw.css. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
131 lines
3.8 KiB
HTML
131 lines
3.8 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<!--#include virtual="/_include/head.html" -->
|
||
<title>Forms — ASW Examples</title>
|
||
<meta name="description" content="Text inputs, select, textarea,
|
||
checkboxes, radios, validation states, and helper text">
|
||
</head>
|
||
<body>
|
||
<!--#include virtual="/_include/nav.html" -->
|
||
|
||
<main>
|
||
<header>
|
||
<h1>Forms</h1>
|
||
<p data-text="lead">Text inputs, select, textarea, checkboxes,
|
||
radios, validation states, and helper text</p>
|
||
</header>
|
||
|
||
<p>All form elements styled via element selectors. No wrapper classes.
|
||
Validation via <code>aria-invalid</code>.</p>
|
||
<h2 id="text-inputs">Text inputs</h2>
|
||
<p><label>Email address
|
||
<input type="email" name="email" placeholder="you@example.com"> </label>
|
||
<label>Full name
|
||
<input type="text" name="name" placeholder="Jane Smith"> </label>
|
||
<label>Password
|
||
<input type="password" name="password" placeholder="••••••••">
|
||
</label></p>
|
||
<h2 id="textarea">Textarea</h2>
|
||
<p><label>Message</p>
|
||
<textarea name="message" rows="4" placeholder="Your message…"></textarea>
|
||
|
||
</label>
|
||
|
||
<h2 id="select">Select</h2>
|
||
<p><label>Country <select name="country">
|
||
<option value="">Select…</option> <option value="de">Germany</option>
|
||
<option value="fr">France</option> <option value="it">Italy</option>
|
||
</select> </label></p>
|
||
<p><label>Capabilities (multi-select)
|
||
<select name="capabilities" multiple size="4"> <option value="read">Read
|
||
files</option> <option value="write">Write files</option>
|
||
<option value="exec">Execute commands</option>
|
||
<option value="net">Network access</option> </select> </label></p>
|
||
<h2 id="checkboxes">Checkboxes</h2>
|
||
<label>
|
||
<input type="checkbox" name="opt1" checked>
|
||
Email notifications
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="opt2">
|
||
SMS notifications
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="opt3" disabled>
|
||
Push notifications (unavailable)
|
||
</label>
|
||
|
||
<h2 id="radios">Radios</h2>
|
||
<fieldset>
|
||
<legend>Preferred contact method</legend>
|
||
<label>
|
||
<input type="radio" name="contact" value="email" checked>
|
||
Email
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="contact" value="phone">
|
||
Phone
|
||
</label>
|
||
<label>
|
||
<input type="radio" name="contact" value="post">
|
||
Post
|
||
</label>
|
||
</fieldset>
|
||
|
||
<h2 id="fieldset">Fieldset</h2>
|
||
<fieldset>
|
||
<legend>Billing address</legend>
|
||
<label>Street
|
||
<input type="text" name="street" placeholder="123 Example Lane">
|
||
</label>
|
||
<label>City
|
||
<input type="text" name="city" placeholder="Berlin">
|
||
</label>
|
||
<label>Postcode
|
||
<input type="text" name="postcode" placeholder="10115">
|
||
</label>
|
||
</fieldset>
|
||
|
||
<h2 id="helper-text">Helper text</h2>
|
||
<p><label>Username
|
||
<input type="text" name="username" placeholder="vigilio"> </label>
|
||
<small>3–20 characters, letters and numbers only.</small></p>
|
||
<h2 id="validation-states">Validation states</h2>
|
||
<p><label>Email
|
||
<input type="email" aria-invalid="true" value="not-an-email"> </label>
|
||
<small>Enter a valid email address.</small></p>
|
||
<p><label>Username
|
||
<input type="text" aria-invalid="false" value="vigilio"> </label>
|
||
<small>Username is available.</small></p>
|
||
<p><label>Message</p>
|
||
<textarea aria-invalid="true" rows="3">Too short.</textarea>
|
||
|
||
</label>
|
||
<small>Message must be at least 20 characters.</small>
|
||
|
||
<h2 id="complete-login-form">Complete login form</h2>
|
||
<form onsubmit="return false">
|
||
<fieldset>
|
||
<legend>Sign in</legend>
|
||
<label>Email
|
||
<input type="email" name="email" autocomplete="email" placeholder="you@example.com">
|
||
</label>
|
||
<label>Password
|
||
<input type="password" name="password" autocomplete="current-password" placeholder="••••••••">
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" name="remember">
|
||
Remember me
|
||
</label>
|
||
</fieldset>
|
||
<p>
|
||
<button type="submit">Sign in</button>
|
||
<a href="#">Forgot password?</a>
|
||
</p>
|
||
</form>
|
||
</main>
|
||
|
||
<!--#include virtual="/_include/footer.html" -->
|
||
</body>
|
||
</html>
|