1.5 FORMS
SIGN UP FORM FOR GMAIL SIGN UP FORM FOR FACEBOOK
REGISTRATION FORM FOR A PARTICULAR APPLICATION FORM FOR PIZZA ORDERING SYSTEM
FORMS A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms are enclosed in the HTML <form> tag. Forms are made up of standard graphical user interface(GUI) elements called HTML controls. The data entered into the form should be submitted to the server using two methods: (i) GET (ii) POST.
The basic purpose of an HTML form is to allow the user to enter data on one end and then send the data on the other end through the web server. It helps the user purchase goods on the Internet and signup for newsletters and mail accounts. The HTML controls are the basic parts of an HTML form. The HTML<form> element defines a form that is used to collect user input.
The important attributes of <form> tag are: Attribute Name Possible values Description Action Name method Get, post The default value for method is “get”.
************************************************* DIFFERENCE BETWEEN GET AND POST METHOD *************************************************
A text box is created by using a tag <input>. It is a rectangular box which accepts one-line text as input from the user. A text box is created by using a tag <input>. The important attribute of <input> tag is: Attribute Name Possible values Description type Text, Password, Hidden, File, Image, Checkbox, Radio, Button, Submit Reset……etc The default value of type attribute is “text”.
Example 1: <input type=“text”> (or) <input> Meaning: Output:
Example 1: <input type=“password”> Meaning: Output:
Example 1: <input type=“hidden”> Meaning: Output:
Example 1: <input type=“file”> Meaning: Output:
Example 1: <input type=“image”> Meaning: Output:
(ii) Checkbox: A checkbox is a small box with a check mark in it and a user can either select or clear it by a click. ** Checkboxes allows the user to select ZERO or MORE options of a limited number of choices.
Example 1: <form> In which game are you interested?<br> <input type="checkbox">Football<br> <input type="checkbox">Volley ball<br> <input type="checkbox">Cricket<br> <input type="checkbox">Tennis<br> </form>
Example 2: <form> In which game are you interested?<br> <input type="checkbox” checked>Football<br> <input type="checkbox” checked>Volley ball<br> <input type="checkbox” checked>Cricket<br> <input type="checkbox” checked>Tennis<br> </form>
Example: <html> <form> <input type=“checkbox” disabled>I accept terms and conditions </form> </html>
(iii) Radio Button: A radio button is a circle which displays a dot in the middle of circle when selected. A radio button allows the user to select only one option from limited no. of choices.
Example 1: <form> Gender: <input type=“radio” >Male <input type=“radio” >Female<br> </form>
Example 2: <form> Gender: <input type=“radio” >Male name=“g” <input type=“radio” >Female<br> name=“g” </form>
**** The difference between checkbox and radio buttons are: (i) Radio buttons work in mutually exclusive groups.(only one option can be selected at a time.)
(iv) TextArea: A textarea is a multi-line text input control and displays text entered in it. A user can write unlimited number of characters in the textarea. Example: <form> Address:<textarea rows=10 cols=10> </form>
(v) Selection or Drop-down List Or Pop-Down List: The <select> tag defines a drop-down list. The <option> tag is used to define an option in the list.
Example 1: <html> <form> Select country <select> <option> Afghanistan </option> <option> China </option> <option> Denmark </option> <option> India </option> <option> Iceland </option> <option> Ireland </option> <option> Japan </option> <option> Russia </option> <option> USA </option> </select> </form> </html>
Example 2: <html> <form> Select country <select> <option> Afghanistan </option> <option> China </option> <option> Denmark </option> <option> India </option> <option> Iceland </option> <option> Ireland </option> <option> Japan </option> <option> Russia </option> <option selected> USA </option> </select> </form> </html>
Example 3:
DATE OF BIRTH:<select> <option>DATE<option>1<option>2<option>3<option>4<option>5<option>6 <option>7<option>8<option>9<option>10<option>11<option>12<option>13 <option>14<option>15<option>16<option>17<option>18<option>19<option>20 <option>21<option>22<option>23<option>24<option>25<option>26<option>27 <option>28<option>29<option>30<option>31 </select><select> <option>MONTH <option>January<option>February<option>March<option>April<option>May <option>June<option>July<option>August<option>September<option>October <option>November <option>December </select> <select> <option>YEAR <option>1980<option>1981<option>1982<option>1983<option>1984<option>1985 <option>1986<option>1987<option>1988<option>1989<option>1990<option>1991 <option>1992<option>1993<option>1994<option>1995<option>1996<option>1997 <option>1998<option>1999<option>2000<option>2001<option>2002<option>2003 <option>2004<option>2005<option>2006<option>2007<option>2008<option>2009 <option>2010<option>2011<option>2012<option>2013<option>2014<option>2015 <option>2016<option>2017<option>2018<option>2019<option>2020
(vi) Button or Simple Button or Clickable Button: It is a simple button which activates a specific code when clicked.
Example 1: <form> <center> Value1: <input type=“text”><br> Value2: <input type=“text”><br> Sum is: <input type=“text”><br> <input type=“button” value=“add” onClick=“add( )”> </center> </form>
(vii) Submit Button: It defines a button for submitting the form data to a form-handler. (e.g server page)
Example 1: <form action=“login.jsp”> <center> User Name: <input type=“text”><br> Password: <input type=“password”><br> <input type=“submit” value=“Login” > </center> </form>
(viii) Reset Button: A reset button resets the form data to its initial values. When the user clicks the reset button, all the values in the form fields are cleared and controls in the form are returned to their original state.
Example 1: <form> <center> <input type=“text” value=“number1”><br> <input type=“text” value=“number2”><br> <input type=“reset” value=“clear” > </center> </form>
Example 2: <form> <center> Value 1: <input type=“text”><br> Value2: <input type=“text”><br> <input type=“reset” value=“clear” > </center> </form>