HTML Forms
You open a website and input your information. What is it that asks for your information?
It is HTML form that contains different elements for inputting the information/detail of the user.
Different HTML form elements are text fields, text area fields, radio buttons, drop-down menus, check boxes and there are many more.
Syntax <form> . input elements . </form>
HTML Forms – Input Tag and Attributes
<input> tag is the highly used in the forms. However, the type of input is specified using type attribute.
Following types are commonly used for input.
Text Fields
To input the letters, numbers, characters or symbols in the form, text fields are used.
Syntax <html> <body> <form action=””> Country name: <input type=”text” name=”countryname”/> <br/> State name: <input type=”text” name=”statename”/> </form> </body> </html>
Please Note: In browsers, the default width for text field is 20 characters.
Check Boxes
Here, we have illustrated how to create check boxes on HTML page. The user select or deselect for inputting the value.
Syntax <html> <body> <form action=””> I live in India. <input type=”checkbox” name=”country” value=”India”> <br/> I live in New York. <input type=”checkbox” name=” country” value=”New York”> <br/> I live in California. <input type=”checkbox” name=” country” value=”California”> </form> </body> </html>
Radio Buttons
Here, we have illustrated how to create radio buttons on HTML for.
User clicks a radio button to input the value.
Please Note: It is not possible to select two values at a time using radio button.
Syntax <form action=””> India: <input type=”radio” checked=”checked” name=”Country” value=”India”> <br> New York: <input type=”radio” checked=”checked” name=”Country” value=”New York”>
Drop-Down List
Here, we have illustrated how to create a simple drop-down list on HTML page.
A user can select multiple values in the list for inputting.
Syntax <html> <body> <form action=””> <select name=”State”> <option value=”Maharashtra”>Maharashtra</option> <option value=”Karnataka”>Karnataka</option> <option value=”Tamil Nadu”>Tamil Nadu</option> <option value=”Madhya Pradesh”>Madhya Pradesh</option> <option value=”Rajasthan”>Rajasthan</option> </select> </form> </body> </html>
The drop-down list can also be created with the pre-selected value.
<html> <body> <form action=””> <select name=”State”> <option value=”Maharashtra”>Maharashtra</option> <option value=”Karnataka”>Karnataka</option> <option value=”Tamil Nadu”>Tamil Nadu</option> <option value=”Madhya Pradesh” selected=”selected”>Madhya Pradesh</option> <option value=”Rajasthan”>Rajasthan</option> </select> </form> </body> </html>
*Here, Madhya Pradesh will be the pre-selected value for the drop-down list.
Buttons
Buttons are commonly used in the forms. Here, we have illustrated how to create buttons on the form. Any text on the buttons can be given.
Syntax <html> <body> <form action=””> <input type=”button” value=”Submit”> </form> </body> </html>
Fieldset
A fieldset is used to group the data fields. Here, we have illustrated how to create a border with the caption surrounding your data.
Syntax <html> <body> <fieldset> <legend> Location details: </legend> <form action=””> Country<input type=”text” size=”5”> State<input type=”text” size=”5”> </form> </fieldset> <p> If no border is appearing around this form, your browser is too old. To view, update. </p> </body> </html>
action Attribute
On clicking the Submit button by the user, the input values are sent to the server. The action attribute within the form defines the name of the file to which input values aare to be sent.
Syntax <form name=”input” action=”form_values.asp” method=”get”> Name: <input type=”text” name=”user”> <input type=”submit” name=”Submit”> </form>
Adding Form to a Web Page
Here, we will illustrate how to add form to a web page. The form will be containing five input fields and one submit button.
Syntax <html> <body> <form name=”input” action=”form_values.asp” method=”get”> Input Name 1: <input type=”text” name=”name1” value=”Michael” size=”25”> <br> Input Name 2:<input type=”text” name=”name2” value=”Rachael” size=”25”> <br> Input Name 3:<input type=”text” name=”name3” value=”Lindy” size=”25”> <br> Input Name 4: <input type=”text” name=”name4” value=”Sarah” size=”25”> <br> Input Name 5: <input type=”text” name=”name5” value=”Stephen” size=”25”> </form> <p> On clicking the “Submit” button, your input values will be sent to the form_values.asp. </p> </body> </html>
Form with Check Boxes
Here, we have illustrated how to create a form using check boxes. The following syntax will be creating three check boxes and a Submit button.
Syntax <html> <body> <form name=”input” action=”form_values.asp” method=”get”> I live in India: <input type=”checkbox” name=”country” value=”India” checked=”checked”> <br/> I live in China: <input type=”checkbox” name=”country” value=”China” checked=”checked”> <br/> I live in Africa: <input type=”checkbox” name=”country” value=”Africa” checked=”checked”> <br/> <br/> <input type=”submit” value=”Submit”> </form> <p> On clicking the “Submit” button, you will input the values to the new page, namely, form_values.asp. </p> </body> </html>
Form with Radio Buttons
Here, we have illustrated how to create a form using radio buttons. The following syntax will be creating three radio buttons and a Submit button.
Syntax <html> <body> <form name=”input” action=”form_values.asp” method=”get”> I live in India: <input type=”radio” name=”country” value=”India” checked=”checked”> <br/> I live in China: <input type=”radio” name=”country” value=”China” checked=”checked”> <br/> I live in Africa: <input type=”radio” name=”country” value=”Africa” checked=”checked”> <br/> <br/> <input type=”submit” value=”Submit”> </form> <p> On clicking the “Submit” button, you will input the values to the new page, namely, form_values.asp. </p> </body> </html>
Send E-Mail Using a Form
Here, we have illustrated how to send an email using a form.
Syntax <html> <body> <form action=MAILTO:example@technologydiving.com method=”post” enctype=”text/plain”> <h2>This form will send the email.</h2> Name: <br> <input type=”text” name=”name” value=”entername” size=”25”> <br> Mail: <br> <input type=”text” name=”mail” value=”entermail” size=”25”> <br> Query: <br> <input type=”text” name=”query” value=”enterquery” size=”45”> <br><br> <input type=”submit” value=”Submit”> <input type=”reset” value=”Reset”> </form> </body> </html>
Let Us Quickly Revise <form> To declare a form for the input <textarea> To declare the area for inputting multiple lines <fieldset> To declare the fieldset <select> To declare a selectable list <option> To declare an option in the drop-down list <input> To declare the input field <label> To declare a label to a control <legend> To declare a caption for fieldset <optgroup> To declare an option group <button> To declare a pushbutton <isindex> This is replaced by <input>
