In today’s Era, forms are one of the most important parts of a website. Because information is very important. Form has many types like if you want to create a user account or want to get a subscription of any OTT platform or want to share some feedback at those places form plays a vital role.
Now, if you are learning at HTML5 & CSS3 training institute in Delhi and want to know the development process of these form so in this blog we’ll discuss about its elements in short we’ll learn how to create a form in Html.
Before proceeding further, we’ll need to know some basic thing about form.
Form tag contains its opening and closing tag so it is a container tag. Form tag has some attribute which is very important to know before moving ahead.
The very first attribute is action which specifies that what action will be taken when the form is submitted. At the time of the click on the button we added as Submit, the form data goes to the server.
The second attribute is method it tells that data which is entered in the form how will be send to the server and it has two value one is get and second one is post.
Get method: It is critical to understand that the "get" method attribute is the default. This method appends data in the URL so do not use get method for sensitive data.
Post method: this method is super secure as its data is not visible in the URL.
What is label:
Label element is used to identify the input element. The main purpose of label is to get connected with input field by using input’s id. So what will happen if we do this, when user click on a particular label that input field will get highlighted.
What is input:
To collect user’s data into input, input field is required. If you notice the few information are common in most forms like Username, Email, Password, Firstname, Lastname and few more.
Let’s start creating a simple form with form tag
We’ll use form tag
In the above example we’ve given an id in form tag for applying some css.
In this step we’ll use li tag to place our label and input field
We’ve created four input field firstname, lastname, Email and Password and their type is also different because when you set value email for type attribute in email label then only valid email can be entered no garbage value will be accepted from this field. Same goes with password field when user enter password into password type attribute filed then that value will be encrypted.
Now in this step we’ll create label for gender field.
In this code value of name attribute will be same for both gender because only one gender will be selected at a time.
Now we’ll create age field.
In the age section the value of type is number because age comes in number so user will not be able to enter any character in the age field here two more attribute has added where user can enter value minimum 1 and maximum 50.
For creating date of birth field we can simply write date in type attribute.
We have one more alternative where date, month and year can be displayed in one line and we can also select our current date of birth.
User can select among thses options.
Now its time for hobbies field it is very interesting part in the form.
In this code the value of type attribute is checked because user can have more than one hobbies.
Now lastly we’ll create textarea where user can write some feedback or anything which is related to the form.
At the end we’ll need a submit button also so that user click on that button and their form wiil get submitted.
Here is the result of simple form.
In order to get your hands set on complete website development, you must join:
These programs are job oriented and offer proper training of front end and back end development.
Under these programs at web design and development institute in Delhi, you can learn everything from UI designing to UI development.
So, check out the list of programs given above and pick up the best web design course in Delhi for you today.
