Form
Collect, validate and handle user input.
accept-charset
, action
, autocomplete
, class
, enctype
, id
, method
, name
, novalidate
, target
With auto-focused Text Input requesting a new email address:
{{< hackcss-form autocomplete="disabled" >}}
{{< hackcss-textinput autofocus="true" type="email" placeholder="Please change your email…" >}}
{{< /hackcss-form >}}
With Text Input and Label inside Form Group running Fuzzy Search in new window:
{{< hackcss-form id="search" action="/search/" target="_blank" >}}
{{< hackcss-formgroup >}}
{{< hackcss-label for="query" text="Search query:" />}}
{{< hackcss-textinput id="query" type="search" name="s" form="search" >}}
{{< /hackcss-formgroup >}}
Two forms with a Button and Text Input inside Alert with Throbber:
{{< hackcss-alert type="info" >}}
{{< hackcss-form id="throttle" method="post" action="/throttle" />}}
{{< hackcss-form id="choke" novalidate="true" />}}
{{< hackcss-button type="primary" form="choke" text="Doh!" disabled="true" />}}
This one doesn't actually do anything… {{< hackcss-throbber >}}
{{< hackcss-textinput type="hidden" name="speed" value="80" form="throttle" >}}
{{< /hackcss-alert >}}
This one doesn't actually do anything…
With Form Group, Label, required and validated Text Input and Help Block:
{{< hackcss-form name="validate" action="/validate" >}}
{{< hackcss-formgroup name="integrity" >}}
{{< hackcss-label for="digest" >}}
<abbr title="Secure Hash Algorithm">SHA-512</abbr> Digest:
{{< /hackcss-label >}}
{{< hackcss-textinput
required="true"
autofocus="true"
autocomplete="off"
type="text" id="digest" name="digest"
pattern="^(?:[A-Za-z0-9+/]{4})*(?:[A-Za-z0-9+/]{2}==|[A-Za-z0-9+/]{3}=)?$" >}}
{{< hackcss-helpblock >}}
Submit with digest to validate installation.
<noscript>JavaScript must be enabled for proper validation.</noscript>
{{< /hackcss-helpblock >}}
{{< /hackcss-formgroup >}}
{{< /hackcss-form >}}