feat: legacy import — packs, examples, lab, themes, docs, lineage
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>
This commit is contained in:
parent
e9895cf90d
commit
86464f3e21
GPG key ID:
F6E479DEFAB84D6E
100 changed files with 14700 additions and 4 deletions
131
examples/components/forms.html
Normal file
131
examples/components/forms.html
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue