HTML Form is the section 12 of Beginner’s Guide to HTML.
In your life you may have filled out thousands of forms or applications. Rather than give someone a pen and paper to fillout a form, it will be beneficial if you can give them a online form to capture the user inputs. We can save paper, time and cost. So how to create a online form. Let’s see what kind of components can be have in a form.
- Text boxes to write text
- Ex: Name, Address
- Check boxes for selecting one and selecting more
- Ex: Selecting Preferences among several options, Selecting Gender
- Writing a Date
- Ex: Date with a specific format
- Writing a Year
- Ex: Year with a specific format
So let’s check how to create a HTML form with the above usages.
Text[code language=”html”] Name:
element used to capture user inputs. If you check the above example, you might see type attribute has a value called text. This means you can type text in the input box. By default this input box display 20 characters, but can type more than this. If you want to display more than that, there is another attribute called size to change the default value.
Let’s see how what are the other values that can be put in the type attribute.
If you have experienced filling out online forms, you might see that, what types on a password fields are not visible. If you type a alpha numeric character, it will display all the characters using the same special symbol. We called it as mask.[code language=”html”]
If you need to take only one option from several, for example selecting the gender, then radio option comes into rescue. You cannot be both Male and Female at once, aren’t you?[code language=”html”]
Keep in mind the following facts when using the radio option.
- You can use the for attribute in the label, so you can tick the radio option by clicking on the label also. (We discussed this on a previous section also)
- You need to give the same attribute value for the name attribute in the radio option inputs.
Another use of radio option is defining the marital status. Either Single or Married.
Checkboxes are used when selecting several options among several. Not like a circle as in radio option, this comes as a square to put the tick.[code language=”html”]
After putting all the elements to capture user inputs, Submit button should be there to send the captured data to the server. The data is sent to the page specified in the form’s action attribute. The file defined in the action attribute usually does something with the received input. For example look at the following code.[code language=”html”] [/code]
Value of the value attribute is the text to display on the button. When you click the submit button, the browser will send all the input data to a page called “my_form_action.php”. We will deal with this later when we learn about PHP.
Select from a list
There are times we want to select something from a dropdown list. The difference between this and radio option is, page need to display all the radio options all the time and drop down list display all the items only when the user go for it. In other times it only shows a one item and other unselected items are hidden. So the space is saved when using drop down lists.[code language=”html”]
dropdown list defined by using the tag. tag defines the items inside the drop down list. Attribute selected defines which item need to display currently on the webpage.
If you want to capture a long text, like a description, input type text will not be long enough. That’s why there is another element called[code language=”html”] Tell about yourself
The attributes rows and cols tells the columns and rows of the text area that need to be displayed on the web page. It’s like the width and height.
It is a standard way to put a border kind of thing around the form with a label what the form is about. This makes it more presentable.[code language=”html”] [/code]
If we combine all the things we learn here, you might have come-by something like this.
In this section we learned about creating forms. How to use different HTML components for different types of user inputs. In the next section we are talking about framing.
Let’s learn about HTML Iframe.