Latest web development tutorials

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>

try it"

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>

try it"

If you need to set the right-aligned tab, you can use .right categories:

Examples

<Label class = "right">

try it"

Fieldset

Foundation Rendering <fieldset> element of style as follows:

Examples

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

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 ..">
</ Label>
<Small class = "error"> Wrong input </ small>

<Textarea rows = "4" placeholder = "Address"> </ textarea>
<Small class = "error"> Wrong input </ small>
</ Form>

try it"
Note You need to use JavaScript to update the status of user input error.