**HTML Forms:** A web `form` or HTML form on a web page that allows users to enter data that is then sent to a server for processing. Forms may resemble database forms because website users fill out the forms using:
<b>
+ Input fields
+ Select menus
+ Check-boxes
+ Radio buttons
+ Text-area
+ Submit button
+ Reset button
</b>

In this article, we are going to thoroughly discuss the key form elements. 

1) **Input field**:
The`<input>` tag specifies an input field where the user can enter data. The `<input>` element is the most important form element --  it can be displayed in several ways, depending on the type attribute.



<html>
    <head>
        <body>
            <form name="doctor" action="send.php" method="post">
                <table name="doctor" width="250px" height="250px" border="2" bordercolor="blue" cellspacing="2" cellpadding="2">
                    <tr>Doctor Details</tr>
                    <tr>
                    <td>First Name </td>
                    <td>
                    <input type="text" name="fname" />
                    </td>
                    </tr>
                    <tr>
                    <td>Last name</td>
                    <td>
                    <input type="text" name="lname"/>
                    </td>
                    </tr>
                </table>
            </form>
        </body>
    </head>
</html>

codemirror


2) **Select menus/Select drop-down**: The `<select>` element is used to create a drop-down list -- it is most often used in forms to collect user input. The `<option>` tags inside the `<select>` element define the available options in the drop-down list.


<html>
    <head>
        <body>
            <form name="doctor" action="send.php" method="post">
                <table name="doctor" width="150PX" height="150PX"border="2" bordercolor="blue" cellspacing="2" cellpadding="2">
                    <tr>
                    <td>Position</td>
                    <td>
                    <select name="pos">
                    <option value="MB">MBBS</option>
                    <option value="PG">PG</option>
                    <option value="MD">MD</option>
                    <option value="RM">RMP</option>
                    </select>
                    </td>
                    </tr>
                </table>
            </form>
        </body>
    </head>
</html>


3) **Check-boxes:** The `check-box` is a square box that is ticked (checked) when activated. Checkboxes let users select one or more options from a limited number of choices.


<html>
    <head>
        <body>
            <form name="doctor" action="send.php" method="post">
                <table name="doctor" width="500PX" height="250PX" border="2" bordercolor="blue" cellspacing="2" cellpadding="2">
                    <tr>
                    <td>Job Type</td>
                    <td>
                    <input type="checkbox" name="part-time" value="part"/>Part-Time
                    <input type="checkbox" name="full-time" value="full"/>Full-Time
                    <input type="checkbox" name="contract"  value="cont"/>Contract
                    <input type="checkbox" name="semi-time" value="sem"/>Semi-Time
                    </td>
                    </tr>
                    <tr>
                    <td>Courses Learned</td>
                    <td>
                    <input type="checkbox" name="cardio" value="card"/>Cardiology 
                    <input type="checkbox" name="human and development" value="human"/>Human Development
                    <input type="checkbox" name="neurologist" value="neuro"/>Neurologit
                    </td>
                    </tr>
                </table>
            </form name="doctor" action="send.php" method="post">
        </body>
    </head>
</html>


4) **Radio-buttons:** The `radio button` is a form element that allows the user to select one option from a range of options. Radio elements are created with the HTML `<input>` tag. Radio buttons can be nested inside a `<form>` element or they can stand alone.



<html>
    <head>
        <body>
            <form name="doctor" action="send.php" method="post">
                <table name="doctor" width="550px" height="250px"border="2" bordercolor="blue" cellspacing="2" cellpadding="2">
                    <tr>
                    <td>Experience Type</td>
                    <td>
                    <input type="radio" name="exp" value="prof" />Professional
                    <input type="radio" name="exp" value="beg"/>Beginner
                    <input type="radio" name="exp" value="Lear"/>Learner
                    </td>
                    </tr>
                    <tr>
                    <td> Duty Preferences</td>
                    <td>
                    <input type="radio" name="pre" value="Emer"/>Emergency Duties
                    <input type="radio" name="pre" value="nig"/>Night Duties
                    <input type="radio" name="pre" value="day"/>Day-Shift
                    </td>
                    </tr>
                </table>
            </form>
        </body>
    </head>
</html>


5) **Text-area:** The `<textarea>`tag defines a multi-line text input control. A `textarea` can hold an unlimited number of characters, and the text renders in a fixed-width font. The size of the `textarea` is specified by the `<cols>` and `<rows>` attributes.


<html>
    <head>
        <body>
            <form name="doctor" action="send.php" method="post">
                <table name="doctor" width="250px" height="250px" border="2" bordercolor="blue" cellspacing="2" cellpadding="2">
                <tr>
                <td>Queries and Comments</td>
                <td>
                <textarea name="text" rows="15" cols="50">
                </textarea>
                </td>
                </tr>
                </table>
            </form>
        </body>
    </head>
</html>


6) **Submit button:** The `submit button` submits all form values to a form-handler. The form-handler is typically a server page with a script for processing input data.

7) **Reset button:** The `reset button` resets all form values to their initial values.



<html>
    <head>
        <body>
            <form name="doctor" action="send.php" method="post">
                <table name="doctor" width="250px" height="150px" border="2" bordercolor="blue" cellspacing="2" cellpadding="2">
                <tr>
                <td>Reset</td>
                <td>
                <input type="submit" name=submit" value="submit"/>
                <input type="reset" name="reset" value="reset"/>
                </td>
                </tr>
                </table>
            </form>
        </body>
    </head>
</html>

Key components in HTML form

HTML forms facilitate user input via input fields, select menus, checkboxes, radio buttons, text areas, submit, and reset buttons.