HTML Forms
On any webpage, if you want to take any information from the user, for this, you use forms. For example, whenever you create a new email id, first of all, you fill up the sign-up form and you provide your information via a webpage.
The form is the most common way of getting input from a user. Any form takes input from the user and when the user submits that form then all these information is stored in a database.
You can use a variety of form elements to get input information from the user. Such as text-box, radio button, drop-down list etc.
You use <form> tag to create forms in any webpage. This is the container tag, which defines the starting and ending of the entire form. Different form elements are defined inside this tag. There are some of the attributes of this <form> tag given as below.
action
With this attribute, you define what to do when the form is submitted. As soon as you submit the form of a user, you can show thank you message in any other webpage or execute a PHP script.
method
With this attribute, you define the method of storing data. There can be two values of this attribute, GET or POST.
target
With this attribute, you can define what the window will show after the form submission.
You can define form elements through the <input> tag. This tag has some attributes that you use to configure elements. These are given below.
name
The special form element is defined by this attribute. Later this name is used to store values on the server.
type
It shows the type of element. It also shows what kind of value can be input such as for text-boxes type will be text.
size
Using this attribute you can define the form width of any form element. Such as, you can give a text-box width according to you.
value
This can be a default value of an element. As you can see the first name written in a text-box.
Let us now see how you can create a complete form while using these tags and attributes.
Creating Text Boxes
Creating text-boxes for forms in HTML is very easy. For this, you define the text value in the type attribute of the <input> tag. You can use the value attribute to give any default value that will be displayed inside the text-box.
If you are creating a text-box to input password then type password must be given. An example of this is being given below.
The above script will generate the webpage output as below.
Creating Buttons
You can create buttons in four ways in the HTML. It can be defined by the type attribute. These are being given below.
Submit
This button is used to submit the form. This button sends the values of all the elements of the form together to the server. You can create such a button by defining the submit value in the type attribute.
Reset
This button is used to reset values of all fields of the form. You can define the reset value in the type attribute for creating the Reset button.
Normal button
This is a normal button that you can take any action as soon as you click. To create a button like this, you give the value of the type attribute to the value button.
Image button
In this kind of button, you can give an image in the background of the button. To create a button like this, you give the type attribute as the value image.
The above script generates the given web page.
Creating Radio Buttons
With the radio buttons, the user provides information without a keyboard to the webpage. A radio button is a round box that the user can select the choice.
For example, if you want to know about a user's gender then you can create two radio buttons and give them male and female names. The user can choose any of these and tell his gender.
You connect more than two or more radio buttons via name attribute so that the user can only select one radio button at a time. The radio buttons you want to connect with each other you will have to give the same name.
To create a radio button, you assign the value radio button for the type attribute of the <input> tag. The name of the radio button is given in the name attribute.
As I mentioned above, if you want to create a group of Radio buttons so that the user can select only one radio button at a time, then in such situation, you give the name of all the radio buttons the same.
An example of this is being given below.
The above script generates the given web page.
Creating Drop Down List
You use the <select> tag to create a drop-down list. This tag is defined inside the form tag. This tag creates the structure of the drop-down list.
To define the values of the drop-down list, the <option> tag is defined. The more you want to add to the list item, the same <option> tags define. The <option> tag is defined in the <select> tag.
An example is given below.
The above script generates the given web page.
Creating Check Boxes
The checkbox allows any user to choose multiple options. As if you want the user to choose multiple courses, you can create checkboxes and the user can select those.
Creating checkboxes is very easy. For this, you give the checkbox value in the type attribute of the <input> tag and name the check-box in the name attribute. You can also give value to the value attribute. An example is given below.
The above script generates the given web page.
Hopefully, this "HTML Tutorial - Form” would be helpful for you. If it's so please help your friends and other bloggers to share this post on social media. If you have any question related to the post, please comment on the comment box and also follow this website for more information about the blogging and SEO tips.
Posts
0 comments:
Post a Comment
Thank you for reading the post.