Foundation form


May 04, 2021 12:00 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

< form >
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

< form >
< 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:

Instance

< label class= "right" >

Try it out . . .

Fieldset

Foundation <fieldset> elements as follows:

Instance

< form >
< 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

< form >
< 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 . . .
Foundation form You need to use JavaScript to update the error status of user input.