diff options
ADD: Form input hint code
1 files changed, 48 insertions, 23 deletions
| -rw-r--r-- | index.html | 71 |
@@ -330,24 +330,24 @@ <!-- tables example --> <pre class="code lang-html"> - <<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> - <<span class="tag">thead</span>> - <<span class="tag">tr</span>> - <<span class="tag">th</span>>name<<span class="tag">/th</span>> - <<span class="tag">th</span>>duration<<span class="tag">/th</span>> - <<span class="tag">th</span>>genre<<span class="tag">/th</span>> - <<span class="tag">th</span>>release date<<span class="tag">/th</span>> - <<span class="tag">/tr</span>> - <<span class="tag">/thead</span>> - <<span class="tag">tbody</span>> - <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"selected"</span>> - <<span class="tag">td</span>>The Shawshank Redemption<<span class="tag">/td</span>> - <<span class="tag">td</span>>2h 22min<<span class="tag">/td</span>> - <<span class="tag">td</span>>Crime, Drama<<span class="tag">/td</span>> - <<span class="tag">td</span>>14 October 1994<<span class="tag">/td</span>> - <<span class="tag">/tr</span>> - <<span class="tag">/tbody</span>> - <<span class="tag">/table</span>> +<<span class="tag">table</span> <span class="atn">class</span>=<span class="atv">"table table-striped table-hover"</span>> + <<span class="tag">thead</span>> + <<span class="tag">tr</span>> + <<span class="tag">th</span>>name<<span class="tag">/th</span>> + <<span class="tag">th</span>>duration<<span class="tag">/th</span>> + <<span class="tag">th</span>>genre<<span class="tag">/th</span>> + <<span class="tag">th</span>>release date<<span class="tag">/th</span>> + <<span class="tag">/tr</span>> + <<span class="tag">/thead</span>> + <<span class="tag">tbody</span>> + <<span class="tag">tr</span> <span class="atn">class</span>=<span class="atv">"selected"</span>> + <<span class="tag">td</span>>The Shawshank Redemption<<span class="tag">/td</span>> + <<span class="tag">td</span>>2h 22min<<span class="tag">/td</span>> + <<span class="tag">td</span>>Crime, Drama<<span class="tag">/td</span>> + <<span class="tag">td</span>>14 October 1994<<span class="tag">/td</span>> + <<span class="tag">/tr</span>> + <<span class="tag">/tbody</span>> +<<span class="tag">/table</span>> </pre> </section> @@ -503,9 +503,9 @@ <form action="#forms"> <div class="form-group"> <label class="form-label" for="input-example-1">Name</label> - <input class="form-input is-danger" type="text" id="input-example-1" placeholder="Name" /> + <input class="form-input" type="text" id="input-example-1" placeholder="Name" /> </div> - <div class="form-group has-success"> + <div class="form-group"> <label class="form-label" for="input-example-2">Email</label> <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> </div> @@ -603,7 +603,7 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> - <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me <<span class="tag">/label</span>> <<span class="tag">/div</span>> <<span class="tag">/form</span>> @@ -712,16 +712,41 @@ </pre> <section class="notes"> - <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements.</p> + <p>To use form validation styles, add <code>is-success</code> and <code>is-danger</code> to the controls or add <code>has-success</code> and <code>has-danger</code> to parent elements. You can use the class <code>form-input-hint</code> to provide form validation success and error messages.</p> </section> + <div class="columns"> + <div class="column col-6"> + <form action="#forms"> + <div class="form-group"> + <label class="form-label" for="input-example-1">Name</label> + <input class="form-input is-danger" type="text" id="input-example-1" placeholder="Name" /> + <span class="form-input-hint">The name is invaild.</span> + </div> + <div class="form-group has-success"> + <label class="form-label" for="input-example-2">Email</label> + <input class="form-input" type="email" id="input-example-2" placeholder="Email" /> + <span class="form-input-hint">The email is available.</span> + </div> + </form> + </div> + </div> + <!-- forms example --> <pre class="code lang-html"> <<span class="tag">form</span>> - <span class="com"><!-- form validation styles --></span> + <span class="com"><!-- form validation class: has-success --></span> <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group has-success"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> + <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/span</span>> + <<span class="tag">/div</span>> + + <span class="com"><!-- form validation class: is-success --></span> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> + <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span> <span class="atn">for</span>=<span class="atv">"input-example-1"</span>>Name<<span class="tag">/label</span>> <<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">"form-input is-success"</span> <span class="atn">type</span>=<span class="atv">"text"</span> <span class="atn">id</span>=<span class="atv">"input-example-1"</span> <span class="atn">placeholder</span>=<span class="atv">"Name"</span> /> + <<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">"form-input-hint"</span>>The name is invaild.<<span class="tag">/span</span>> <<span class="tag">/div</span>> <<span class="tag">/form</span>> </pre> |