HTML FORMS
HTML Forms is a way of transferring user entered information from web page to store in the database of the hosted website for future use. Forms make atleast 70% of the webpages these days. We see forms of Signup, Login, Checkouts and many other in our daily life found in almost all websites. In this article we will make you familiar with all the form elements used and how they are defined in HTML.
In this input type element, we can write any text or string in the space provided by this element. Execute the following example to see how this element looks like
All of the HTML Form elements are used with ' form' tag and it has various attributes which are listed with their description below:
action - This points to the process file where the entered data needs to be sent for storing or validation.
method - can be post or get(In case of method 'post' entered data is not transmitted in link whereas in case of method 'get' data gets sent in link)
As you can see from the above HTML code we have input type 'text' element has three attributes
id - used with css and javascript
type - text
name - used with the process.php file
This input type is similar or behaves in the same manner as the 'text', with difference of any characters written appear hidden. Execute the following code and write anything in the output of this element to see its behaviour.
With this input type, only one of the available options can be selected. Most commonly used radio button is for selecting Gender (Male or Female) found in many website forms.
Lets take a look at the following example
In this input type only one value can be selected from the two or multiple radio buttons. That is why we have named it as "gender" for both the radio buttons defined so that when any particular 'gender' value (Male or Female) is selected or checked, it gets transferred to the 'gender' variable.
This input type allows the user to select multiple options at a time e.g. if a person has multiple interests as an example.
Lets look how it is defined in HTML.
In the above example we can see that we have declared the 'name' field as any array of values as we can select multiple values. Thus we can have a large number of checkboxes declared with an array.
On many websites you might have noticed some drop downs or lists, displaying country names to be selected. This type of form element is the 'Select'type with multiple number of options displayed in a drop down list. In the following example we will show you how to make a drop down list using 'Select' input element.
When you run the above example code, a drop down with respective options is shown as given in <option> tag.
This input type is used to transfer(submit) all the above discussed 'Form' elements to the process.php file i.e. running on server for form validation and storage.
<html><head></head><body><form action = "process.php" method = "post"><input type = "submit" id = "submit" value = "Submit" ></form></body></html>
Here we have not made it executable code because we don't have any server and the process.php file. We will discuss this in our Online shopping Store which is at the end of this course.