26. Creating the Form Group – Full stack web development Tutorial Course

In this FullStackWebDevelopment tutorial video, We are going to learn about how to make #form #group using custom #css for the new website.

We are going to build the first section of our website. We will be working with gradients, columns and forms here. We will use a section container to make two columns. First of all we will create a standard container class that will contain all the rows and columns.

In the styling section, we will assign the container some padding, a width of 100% as we want it to take up the full display of mobile or computer and margin to auto. margin: auto; to horizontally centre the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

GRADIENTS
We will use an id selector to add a gradient background to our container. The #id selector styles the element with the specified id. CSS gradients let you display smooth transitions between two or more specified colours. We will be using a linear gradient for our container. So we must define at least two colour stops. Colour stops are the colours we want to render smooth transitions among. We can also set a starting point and a direction (or an angle) along with the gradient effect.

The gradient is not supported by all versions of the browsers. It was introduced in CSS3. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.

FORMS
The HTML form element defines a form that is used to collect user input. The input element is the most important form element.

input type=”text” Defines a one-line text input field
input type=”file” Defines to select the file from device storage.
input type=”image” Defines a graphical submit button.
input type=”password” Defines a one-line password input field
input type=”submit” Defines a submit button to submit the form to server
input type=”reset” Defines a reset button to reset all values in the form.
input type=”radio” Defines a radio button which allows select one option.
input type=”checkbox” Defines checkboxes which allow select multiple options form.
input type=”button” Defines a simple push-button, which can be programmed to perform a task on an event.

HTML5 added new types as below

input type=”color” Defines an input field with a specific colour.
input type=”date” Defines an input field for selection of date.
input type=”datetime-local” Defines an input field for entering a date without a time zone.
input type=”email Defines” Defines an input field for entering an email address.
input type=”month” Defines a control with month and year, without a time zone.
input type=”number” Defines an input field to enter a number.
input type=”url” Defines a field for entering URL
input type=”search” Defines a single-line text field for entering a search string.
input type=”tel” Defines an input field for entering the telephone number
input type=”week” Defines a field to enter the date with week-year, without a time zone.

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. The placeholder attribute works with the following input types: text, search, URL, tel, email, and password.

—————————-

Week 1: Day 4
Section 4: Advanced CSS: Building and styling website
Tutorial 26: Creating the Form Group

—————————-
Do subscribe and hit Bell Icon
—————————-
Ref Credit: JavaPoint
—————————-

Follow us in social media handles for opportunities and code related support.

Instagram: https://www.instagram.com/wb.web/
Facebook: https://www.facebook.com/wbweb/
Twitter: https://twitter.com/wbweb_in/
LinkedIn: https://www.linkedin.com/company/wbweb/

—————————-

Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.

For more information, please write back to us at hi@wbweb.co.in or call us at IND: 7077568998

After completing the course, write to biswabijaya@wbweb.co.in for internship or freelancing opportunities.

For consultation or partnership, related queries drop a mail to hi@wbweb.co.in.