The best Foundation Form Tutorial In 2024, In this tutorial you can learn
label,Fieldset,Error Status,
Foundation Form
Foundation Forms control is automatically set to the global style:
All <textarea>
, <select>
and <input>
element widths are 100%, and with a margin, padding, shadow drinking mouse movement effect.
Examples
<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>
label
Use the form <label>
element to set the label, the label can be added for attributes and id attributes. Get user input box in focus when the input field or click on the tab:
Examples
<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>
If you need to set the right-aligned tab, you can use .right
categories:
Examples
<Label class = "right">
Fieldset
Foundation Rendering <fieldset>
element of style as follows:
Examples
<Form>
<Fieldset>
<Legend> Fieldset Legend </ legend >
<Label> Name
<Input type = "text" placeholder = "First Name /en">
</ Label>
<Label> Email
<Input type = "text" placeholder = "Enter email /en">
</ Label>
</ Fieldset>
</ Form>
Error Status
Use .error
class to set the wrong label, input boxes, text boxes style:
Examples
<Form>
<Label class = "error"> Error
<Input type = "text" placeholder = "Name /en">
</ Label>
<Small class = "error"> Wrong input </ small>
<Textarea rows = "4" placeholder = "Address"> </ textarea>
<Small class = "error"> Wrong input </ small>
</ Form>
| You need to use JavaScript to update the status of user input error. |
---|