Hello everyone!! Welcome to flower brackets blog. Today in this post we are going to talk about forms in html.
Example: Forms In Html
I have an html file here,
<!DOCTYPE html> <html> <head> <title>Add Tables In Html</title> </head> <body> <h2>Employee Details</h2> <p> First Name : <input type = "text" name = "first_name" /> <br /><br /> Last Name : <input type = "text" name = "last_name" /> <br /><br /> Designation : <input type = "text" name = "designation" /> <br /><br /> Gender : <input type = "radio" name = "gender" value = "male" />Male <input type = "radio" name = "gender" value = "female" />Female </p> </body> </html>
Within the body section I have a lot of text that we have not seen before.
This file if you open it in google chrome this is how it looks,
So at the moment this form has just four fields. So you can enter first name, last name, designation and you can tell your gender.
We have three different kinds of input forms and the first one is text box and then you also have radio buttons.
The special thing about radio buttons is that at a time I can only have one option selected.
A person can either be male or female. At the moment these are the only options you have.
You have to choose just one of the two. Whereas if you have something like check boxes you can select multiple check boxes.
You know whatever variable you are setting with those values that variable can take multiple values.
But gender for instance is a variable that can take only one value and so is age.
Like if you are selecting among age categories, this is something that you see fairly often in survey questionnaires that you have age groups to select from.
You can either be in the age group 18 to 25 or you can be in the age group 25 to 30.
It’s not that you can belong to both age groups. So in those situations again you use radio buttons.
Whereas if you are selecting ways in which people can contact you through email through SMS or you know through call then you can have check box.
Let’s see how we can construct this above html file,
In the above html file I have the text first name which is between the opening and closing paragraph tags.
Then I have the input tag and “type” which specify what kind of form control you want to use.
If you want a simple text box then type in “text” between double quotes. Then you also have to give a name to form field.
So you use the name attribute for that. So you type in the name, the equal to symbol in between double quotes and you type in whatever name you want to assign to the fields.
Also Read – Learn Ordered Lists In Html
This is how you would distinguish text box from the text box that is going to take the last name for your user.
Then you close input tag with a forward slash and the closing angle brackets.
We have the same procedure for last name field and designation. Again I have last name, colon and then I have used the input tag with the type text and the name for this field is last_name and designation.
Finally I have the radio button. In this I have added text gender, colon which is same as previous two fields.
Then I have used the input tag but this time the type for the tag is radio. I have given the name gender to this field.
I have the value “male” for the male radio button and for the female radio button the value is “female”.
You have to make sure that if for one particular variable like in this case it is gender then if you have five different values then the name for all the fields has to be same.
So the name for the first field which is for male is gender and for the second one is also gender.
Whereas the values are different. So the value for the first one is “male” and the value for the second one is female.
If you change the names then people will be able to select multiple radio buttons as well.
Right. This is something that I want you guys to understand like say, if I change the value of gender to gender_present and save html file and if I refresh it in google chrome.
I will be able to select male as well as female like this
This defeats the purpose. So you don’t want this. So I am going to change back the value.
More form elements: forms in html
Here we will be checking out some more form elements. This is the form that we are going to discuss
We know how to have the first four fields and rest of the fields that you see will be covered now.
This is the html file
<!DOCTYPE html> <html> <head> <title>Add Tables In Html</title> </head> <body> <h2>Employee Details</h2> <p> First Name : <input type = "text" name = "first_name" /> <br /><br /> Last Name : <input type = "text" name = "last_name" /> <br /><br /> Designation : <input type = "text" name = "designation" /> <br /><br /> Gender : <input type = "radio" name = "gender" value = "male" />Male <input type = "radio" name = "gender" value = "female" />Female <br /><br /> Birth Year: <select name = "year"> <option value = "1995">1995</option> <option value = "1996">1996</option> <option value = "1997">1997</option> <option value = "1998">1998</option> <option value = "1999">1999</option> </select> <br /><br /> Username : <input type = "text" name = "username" /> <br /><br /> Password : <input type = "password" name = "password" /> <br /><br /> What are your Hobbies : <textarea name = "hobbies"></textarea> <br /><br /> How can we contact you? Phone <input type = "checkbox" name = "contact" value = "phone" /> Email <input type = "checkbox" name = "contact" value = "email" /> SMS <input type = "checkbox" name = "contact" value = "sms" /> <br /><br /> Upload your photo : <input type = "file" name = "image" /> <br /><br /> <input type = "submit" name = "submit" value = "Submit Form" /> </p> </body> </html>
I have the text “Birth year” colon and then the <select> tag. So this is used to select year of birth from the select list.
There are five values people can choose from. This is something that is used fairly often on several websites.
To have each value in select list you need to use a <option> tag. Here parent tag is <select> tag.
I have the password field but this time the type for it is password it’s not text. Although it is similar to the username field or the first name fields.
It is different in the sense that if you type in a username in the username field you can see the text but in the password field whatever text you type in you can’t see the text.
The textarea element significance is, it can hold large text. Like you can copy and paste your CV text inside textarea element.
You can also drag it (textarea element), expand it and make it small and large for your convenience.
The beauty of using check boxes is that you can select multiple values.
Next I have a button that will ask you to select the image and it says “choose a file”.
So when I click on it I can see pop-up where I can browse and select an image that I want to upload.
Lastly I have the submit button. When you click on the submit button, obviously you know the values that are not going to database.
But usually you have some kind of programming interface that takes the values that users provide and stores the values in databases.
Right now I don’t have any such thing going. So the submit form button is not going to do anything.
If you have such provision then when you click on the submit form button the values are stored in database.
So that’s it. That’s all about forms and I guess we have covered up pretty much everything about forms in html in this post.
I hope you guys have understood the concept. You may subscribe to my blog flower brackets if you have not already.