Foundation form
May 04, 2021 Foundation5
Table of contents
Foundation form
Foundation form control is automatically set to a global style:
All
<textarea>
elements are 100% wide and have
<input>
a mouse movement effect with margins, margins, and shadows.
<select>
Instance
Input:
< input type= "text" placeholder= "Name" >
Textarea:
< textarea rows= "4" placeholder= "Address" > < /textarea >
Select:
< select >
< option > 1 < /option >
< option > 2 < /option >
< option > 3 < /option >
< option > 4 < /option >
< /select >
< /form >
Try it out . . .
Label
In the form,
<label>
element, which adds the for property and the id property.
The user gets the input box focus when they tap the tab or enter the field:
Instance
< label for= "name" > Input
< input type= "text" placeholder= "Name" id= "name" >
< /label >
< label for= "adr" > Label
< textarea rows= "4" placeholder= "Address" id= "adr" > < /textarea >
< /label >
< label for= "num" > Select
< select id= "num" >
< option > 1 < /option >
< option > 2 < /option >
< option > 3 < /option >
< option > 4 < /option >
< /select >
< /label >
< /form >
Try it out . . .
If you need to set the label to align right, you can
.right
class:
Fieldset
Foundation
<fieldset>
elements as follows:
Instance
< fieldset >
< legend > Fieldset Legend < /legend >
< label > Name
< input type= "text" placeholder= "First Name.." >
< /label >
< label > Email
< input type= "text" placeholder= "Enter email.." >
< /label >
< /fieldset >
< /form >
Try it out . . .
The error status
Use
.error
class to set the wrong label, input box, text box style:
Instance
< label class= "error" > Error
< input type= "text" placeholder= "Name.." >
< /label >
< small class= "error" > Wrong input < /small >
< textarea rows= "4" placeholder= "Address" > < /textarea >
< small class= "error" > Wrong input < /small >
< /form >
Try it out . . .
|
You need to use JavaScript to update the error status of user input. |
|---|