Foundation CSS Forms Inline Labels and Buttons

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. 

The Forms is the way to take input from the user which will be uploaded to the server for processing. The input provided by the user can be of different types, such as password, text, email, etc. Foundation CSS helps to create a powerful and versatile form layout system. Inline Labels and Buttons can be used to attach the input tags with having the additional content, either on their left or right side or both, such as a label on the left side and a button on the right side, that helps to enhance the interactivity of the web form.

Foundation CSS Forms Inline Labels and Buttons Class:

• input-group: The input tag which features the additional content should be wrapped up by a tag with the input-group class.
• input-group-label: This class is used to group the input field having the text label.
• input-group-field: This class is used to group similar types of input text fields.
• input-group-button: This class is used to add the button to the group of the input fields.

Syntax:

<div class="input-group">
 <div class="input-group-label">Label Name</div>
 <input class="input-group-field">
 <div class="input-group-button">
 <input type="submit" class="button" value="Submit">
 </div>
</div>

Example 1: This example describes the Form Input tag with an inline label in Foundation CSS.

Output:

👁 Foundation CSS Forms Inline Labels and Buttons

Example 2: This example describes the Form Input tag with an inline label and inline button in Foundation CSS.

Output:

👁 Foundation CSS Forms Inline Labels and Buttons

Reference: https://get.foundation/sites/docs/forms.html#inline-labels-and-buttons