Lecture-11 : FORMS IN HTML

HTML Forms are one of the main points of interaction between a user and a web site or application. They allow users to send data to the web site. Most of the time that data is sent to the web server, but the web page can also intercept it to use it on its own.

An HTML Form is made of one or more widgets. Those widgets can be text fields (single line or multiline), select boxes, buttons, checkboxes, or radio buttons. Most of the time, those widgets are paired with a label that describes their purpose.

The HTML form tag

All the input elements should be enclosed within the opening and closing <form> tags like this:
<form>
The input elements go here …..
</form>

The following are the attributes of the form tag:

  • Name :- This specifies the name of the form and also specifies the control type if it is used with the controls for processing the results.

    Syntax :- <form name=”form1”>

  • Action :- The action attribute specifies the name and location of URL what will be used to process the data.

  • Method :- Data can be sent in one of the two ways :-

          1. Get :- This method is used to get or retrieve information from a server.

          2. Post :- This method is used to send the information to the server.

  • Input :- This attribute sets an area in a form for user input.

    Syntax : <input>

  • Maxlength :- Allows to specify the maximum number of characters a user can enter into the text box.

  • Type :- This attribute specifies what type of input control such as Text, password, Checkbox, Radio, File, etc.

  • Size :- Allows to specify the width of the text-input control in terms of characters.

  • Target :- Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.

    Most Used Input Form Controls

    • Button
    • Checkbox
    • Date
    • File
    • Hidden
    • Password
    • Radio
    • Reset
    • Submit

    Putting all form control tags in a page :-

    <html>
    <head>
    <title>HTML Form tag</title>
    </head>
    <body>
    <form>
    <table>
    <tr>
    <td>This is example of Button:- </td><td><input type="button" value="This is a Button"></td></tr>
    <td>This is example of Checkbox:- </td><td><input type="checkbox"></td></tr>
    <td>This is example of Date:- </td><td><input type="date"></td></tr>
    <td>This is example of File:- </td><td><input type="file"></td></tr>
    <td>This is example of Hidden:- </td><td><input type="hidden"></td></tr>
    <td>This is example of Password:- </td><td><input type="password" ></td></tr>
    <td>This is example of Radio:- </td><td><input type="radio"></td></tr>
    <td>This is example of Reset:- </td><td><input type="password"</td></tr>
    <td>This is example of Submit:-</td><td><input type="submit" value="Submit"> </td></tr>
    </form>
    </body>
    </html>


    Output:-


    TEXT BOX (Multiple-Line Text Input Controls)
    This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.
    Its attributes are :-
    Cols :- Indicates the number of rows of text area box.
    Rows :- Indicates the number of columns of text area box
    Example of Text Box:-

    <html>
    <head>
    <title>HTML Text Box</title>
    </head>
    <body>
    <form name=”form2”>
    Address :- <br>
    <textarea>
    Write your address here
    </textarea>
    </form>
    </body>
    </html>


    Output:-



    Select Box:-
    The <select> element is used to create a drop-down list.
    The <option> tags inside the <select> element define the available options in the list.

    Example of Select Box:-

    <html>
    <head>
    <title>HTML Select Box</title>
    </head>
    <body>
    <form name=”form3”>
    Select the Month :- <select>
    <option>January</option>
    <option>February</option>
    <option>March</option>
    <option>april</option>
    <option>May</option>
    <option>June</option>
    <option>July</option>
    <option>Auguest</option>
    <option>September</option>
    <option>october</option>
    <option>November</option>
    <option>December</option>
    </select>
    </form>
    </body>
    </html>

    Output:-



    Combining All and Making a Sign up form. (A Complete Form)

    <html>
    <head>
    <title>HTML Form tag</title>
    </head>
    <body>
    <form>
    <table>
    <tr><td>Name:-</td><td><input type="text"></td></tr>
    <tr><td>UserName:-</td><td><input type="text"></td></tr>
    <tr><td>Password:-</td><td><input type="password"></td></tr>
    <tr><td>Retype Password:-</td><td><input type="password"></td></tr>
    <tr><td>Birth Date:-</td><td><select><option>Date</option></select><select><option>Month</option></select><select><option>Year</option></select></td></tr>
    <tr><td>Gender:-</td><td>Male<input type="radio" name="should be same in both"><Br> Female<input type="radio" name="should be same in both"></td></tr>
    <tr><td><input type="submit"></td><td><input type="reset"></td></tr>
    </table>
    </form>
    </body>
    </html>



    Output :-