From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/elements/forms.html | 962 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 962 insertions(+) create mode 100644 docs/elements/forms.html (limited to 'docs/elements/forms.html') diff --git a/docs/elements/forms.html b/docs/elements/forms.html new file mode 100644 index 0000000..25b2450 --- /dev/null +++ b/docs/elements/forms.html @@ -0,0 +1,962 @@ + + + + Forms - Elements - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Forms

+
+
+ + + +
+
+ + +
+
+

Forms provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.

+
+
+
+ + +
+
+ + +
+
+
+ 
<!-- form input control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-1">Name</label>
+  <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+</div>
+
+
+
+
+ + +
+
+
+ 
<!-- form textarea control -->
+<div class="form-group">
+  <label class="form-label" for="input-example-3">Message</label>
+  <textarea class="form-input" id="input-example-3" placeholder="Textarea" rows="3"></textarea>
+</div>
+
+
+
+
+ +
+
+ +
+
+
+ 
<!-- form select control -->
+<div class="form-group">
+  <select class="form-select">
+    <option>Choose an option</option>
+    <option>Slack</option>
+    <option>Skype</option>
+    <option>Hipchat</option>
+  </select>
+</div>
+
+
+
+
+
+ + + +
+
+
+
+ 
<!-- form radio control -->
+<div class="form-group">
+  <label class="form-label">Gender</label>
+  <label class="form-radio">
+    <input type="radio" name="gender" checked>
+    <i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio">
+    <input type="radio" name="gender">
+    <i class="form-icon"></i> Female
+  </label>
+</div>
+
+
+
+
+ +
+
+ +
+
+
+ 
<!-- form switch control -->
+<div class="form-group">
+  <label class="form-switch">
+    <input type="checkbox">
+    <i class="form-icon"></i> Send me emails with news and tips
+  </label>
+</div>
+
+
+
+
+ +
+
+ +
+
+
+ 
<!-- form checkbox control -->
+<div class="form-group">
+  <label class="form-checkbox">
+    <input type="checkbox">
+    <i class="form-icon"></i> Remember me
+  </label>
+</div>
+
+
+
+
+ +
+
+
+ +

You can change checkbox to indeterminate state by setting the indeterminate property of input checkboxes to true.

+

Inline forms

+
+
+
+
+ + +
+
+ + +
+
+
+
+

You can add the form-inline class to the form components to make them inline in one row.

+ 
<div class="form-group">
+  <label class="form-radio form-inline">
+    <input type="radio" name="gender" checked=""><i class="form-icon"></i> Male
+  </label>
+  <label class="form-radio form-inline">
+    <input type="radio" name="gender"><i class="form-icon"></i> Female
+  </label>
+</div>
+
+<div class="form-group">
+  <label class="form-checkbox form-inline">
+    <input type="checkbox"><i class="form-icon"></i> Checkbox 1
+  </label>
+  <label class="form-checkbox form-inline">
+    <input type="checkbox" checked=""><i class="form-icon"></i> Checkbox 2
+  </label>
+</div>
+
+

Horizontal forms

+

If you want to have a horizontal form, add the form-horizontal class to the <form> container. + And add the col-<1-12> and col-xs/sm/lg/xl-<1-12> class to the child elements for responsive form row layout. +

+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ + +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+
+ 
<form class="form-horizontal">
+  <div class="form-group">
+    <div class="col-3 col-sm-12">
+      <label class="form-label" for="input-example-1">Name</label>
+    </div>
+    <div class="col-9 col-sm-12">
+      <input class="form-input" type="text" id="input-example-1" placeholder="Name">
+    </div>
+  </div>
+  <!-- form structure -->
+</form>
+
+

Form sizes

+

For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the elements.

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+

You can add the input-sm/input-lg classes to the input-checkbox, input-radio and input-switch to have different sizes.

+

Form icons

+

Spectre Form components has Spectre Icons support.

+

Add a wrapper with the has-icon-left/has-icon-right class to <input> element. + And add the icon with form-icon class next to the <input>. +

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ 
<!-- form input with Spectre icon -->
+<div class="has-icon-left">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon icon icon-check"></i>
+</div>
+
+

You can use the loading class for loading or posting state.

+
+
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+
+ 
<!-- form input with loading icon -->
+<div class="has-icon-right">
+  <input type="text" class="form-input" placeholder="...">
+  <i class="form-icon loading"></i>
+</div>
+
+

Input types

+
+
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+

Input groups

+
+
+
+ + +
+
+
+
slack.com/ + + +
+
+
+
+ + +
+
+
+
slack.com/ + + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
slack.com/ + + +
+
+
+

If you want to attach text and button along with an input, add the input-group class to the input container. + And add the input-group-addon class to the text element and input-group-btn to the button element. +

+ 
<!-- normal input group -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+</div>
+
+<!-- large input group -->
+<div class="input-group">
+  <span class="input-group-addon addon-lg">...</span>
+  <input type="text" class="form-input input-lg" placeholder="...">
+</div>
+
+<!-- normal input group with button -->
+<div class="input-group">
+  <span class="input-group-addon">...</span>
+  <input type="text" class="form-input" placeholder="...">
+  <button class="btn btn-primary input-group-btn">Submit</button>
+</div>
+
+

Form validation styles

+
+
+
+ Input +
+ + +

The name is valid.

+
+
+ + +

Passwords must have at least 8 characters.

+
+
+
+ Select +
+ +

The option is invalid.

+
+
+ +

The option is available.

+
+
+
+ Checkbox, Radio and Switch (Error state only) +
+ +
+
+ + +
+
+ +
+
+
+
+

To use form validation styles, you can either add is-success or is-error class to the controls or add has-success or has-error class to parent elements. + Use the form-input-hint class to provide form validation success and error messages. +

+ 
<form>
+  <!-- form validation class: has-success -->
+  <div class="form-group has-success">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation class: is-success -->
+  <div class="form-group">
+    <label class="form-label" for="input-example-1">Name</label>
+    <input class="form-input is-success" type="text" id="input-example-1" placeholder="...">
+    <p class="form-input-hint">The name is invalid.</p>
+  </div>
+
+  <!-- form validation example for checkbox, radio and switch -->
+  <div class="form-group">
+    <label class="form-checkbox is-error">
+      <input type="checkbox">
+      <i class="form-icon"></i> Remember me
+    </label>
+  </div>
+</form>
+
+
+
+
+ + +
+
+ + +
+
+
+

You can use input pattern attribute to validate the value as well.

+ 
<!-- pattern validation example for Email -->
+<input class="form-input" type="email" placeholder="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,14}$">
+
+<!-- pattern validation example for password (8 or more characters that are of at least one number, and one uppercase and lowercase letter) -->
+<input class="form-input" type="password" placeholder="Password" pattern="^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$">
+
+

Form disabled styles

+

+ Add the disabled attribute to the element or <fieldset> for a disabled form components style.

+
+
+
+
+
+ + +
+
+ + + +
+
+ +
+
+ +
+
+ + +
+
+ +
+
+
+
+
+ 
<form action="#forms">
+  <fieldset disabled>
+    <div class="form-group">
+      <label class="form-label" for="input-example-19">Name</label>
+      <input class="form-input" type="text" id="input-example-19" placeholder="Name">
+    </div>
+    <div class="form-group">
+      <label class="form-label">Gender</label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Male
+      </label>
+      <label class="form-radio">
+        <input type="radio" name="gender" disabled>
+        <i class="form-icon"></i> Female
+      </label>
+    </div>
+    <div class="form-group">
+      <select class="form-select" disabled>
+        <option>Choose an option</option>
+        <option>Slack</option>
+        <option>Skype</option>
+        <option>Hipchat</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <label class="form-switch">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Send me emails with news and tips
+      </label>
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="input-example-20">Message</label>
+      <textarea class="form-input" id="input-example-20" placeholder="Textarea" rows="3" disabled></textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-checkbox">
+        <input type="checkbox" disabled>
+        <i class="form-icon"></i> Remember me
+      </label>
+    </div>
+  </fieldset>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d