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.
<!DOCTYPE html> <html lang="en">
<head>
<title>
Foundation CSS Forms Inline Labels and Buttons
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>
Foundation CSS Inline labels and buttons
</title>
</head>
<body class="grid-x align-middle align-center" style="height: 95vh;
width: 95vw;">
<div class="grid-x align-middle align-center">
<form>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h4>
Foundation CSS Inline labels and Buttons
</h4>
<div class="grid-x align-middle align-center">
<div class="input-group grid-container">
<input class="input-group-field" type="number">
<div class="input-group-label">₹</div>
</div>
<input type="submit" class="button" value="Submit">
</div>
</form>
</div>
</body>
</html>
|
Output:
Input tag with inline label
Example 2: This example describes the Form Input tag with an inline label and inline button in Foundation CSS.
<!DOCTYPE html> <html lang="en">
<head>
<title>
Foundation CSS Forms Inline Labels and Buttons
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<title>
Foundation CSS Inline labels and buttons
</title>
</head>
<body class="grid-x align-middle align-center" style="height: 95vh;
width: 95vw;">
<div class="grid-x align-middle align-center">
<form>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h4>
Foundation CSS Inline labels and buttons
</h4>
<div class="grid-x align-middle align-center">
<div class="input-group grid-container">
<div class="input-group-label">₹</div>
<input class="input-group-field" type="number">
<div class="input-group-button">
<input type="submit" class="button" value="Submit">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
|
Output:
Input tag with inline label and inline button
Reference: https://get.foundation/sites/docs/forms.html#inline-labels-and-buttons