Friday 24 July 2015

How to make Form using table in HTML

              Many times, while developing a Web Project, we need to create a table inside a form. Here I have given a sample code for how to make form using table in HTML. 
             Go through it. Output webpage is given just after the program. 



Program: (studentlist.html)

<html>
<head>
</head>
<body>
     <h1>Enter Student's Information</h1>

<table border=1>

    <tr>

        <th>Student Roll No.</th>
       
        <th>Student Name</th>

        <th>Admission Type</th>


        <th>CGPA</th>


        <th>Address</th>

    </tr>
         
<form action="studentlistbackend.jsp">

College Name:   
    <input type="text" name="collegename" size=30><br><br>

Department:
    <select name="department">
        <option disabled selected>Option</option>       
        <option value="COMP">COMP</option>
        <option value="EXTC">EXTC</option>
                <option value="IT">IT</option>
                <option value="MECH">MECH</option>
        <option value="CIVIL">CIVIL</option>
                <option value="ELECTRICAL">ELECTRICAL</option>
                <option value="INSTRUMENTATION">INSTRUMENTATION</option>
        </select><br><br>

Class:
    <select name="myclass">
        <option disabled selected>Option</option>   
                <option value="FE">First Year</option>
        <option value="SE">Second Year</option>
        <option value="TE">Third Year</option>
        <option value="BE">Final Year</option>
    </select><br><br>

Division:   
    <select name="division">
        <option disabled selected>Option</option>
        <option value="I">I</option>
        <option value="II">II</option>
        <option value="III">III</option>
        <option value="IV">IV</option>
    </select><br><br>
       
   
    <tr>
        <td><input type="text" name="studentrollno0" size=10 /></td>
   
        <td><input type="text" name="studentname0" size=9 /></td>

        <td>

                <select name="admissiontype0">
            <option disabled selected>Option</option>       
            <option value="regular">Regular</option>
            <option value="direct">Direct Second Year</option>
                    <option value="management">Management</option>
        </select>
        </td>

        <td><input type="text" name="cgpa0" size=4 /></td>


        <td><textarea name="address0" rows=2 cols=20></textarea></td>

    </tr>


    <tr>

        <td><input type="text" name="studentrollno1" size=10 /></td>
   
        <td><input type="text" name="studentname1" size=9 /></td>

        <td>

                <select name="admissiontype1">
            <option disabled selected>Option</option>       
            <option value="regular">Regular</option>
            <option value="direct">Direct Second Year</option>
                    <option value="management">Management</option>
        </select>
        </td>

        <td><input type="text" name="cgpa1" size=4 /></td>


        <td><textarea name="address1" rows=2 cols=20></textarea></td>

    </tr>


    <tr>

        <td><input type="text" name="studentrollno2" size=10 /></td>
   
        <td><input type="text" name="studentname2" size=9 /></td>

        <td>

                <select name="admissiontype2">
            <option disabled selected>Option</option>       
            <option value="regular">Regular</option>
            <option value="direct">Direct Second Year</option>
                    <option value="management">Management</option>
        </select>
        </td>

        <td><input type="text" name="cgpa2" size=4 /></td>


        <td><textarea name="address2" rows=2 cols=20></textarea></td>

    </tr>


    <tr>

        <td><input type="text" name="studentrollno3" size=10 /></td>
   
        <td><input type="text" name="studentname3" size=9 /></td>

        <td>

                <select name="admissiontype3">
            <option disabled selected>Option</option>       
            <option value="regular">Regular</option>
            <option value="direct">Direct Second Year</option>
                    <option value="management">Management</option>
        </select>
        </td>

        <td><input type="text" name="cgpa3" size=4 /></td>


        <td><textarea name="address3" rows=2 cols=20></textarea></td>

    </tr>



    <tr>

        <td><input type="text" name="studentrollno4" size=10 /></td>
   
        <td><input type="text" name="studentname4" size=9 /></td>

        <td>

                <select name="admissiontype4">
            <option disabled selected>Option</option>       
            <option value="regular">Regular</option>
            <option value="direct">Direct Second Year</option>
                    <option value="management">Management</option>
        </select>
        </td>

        <td><input type="text" name="cgpa4" size=4 /></td>


        <td><textarea name="address4" rows=2 cols=20></textarea></td>

    </tr>

</table>

<br />
<br />

<input type="submit" value="Submit" style="font-size:20">
           
</form>

</body>
</html>

 
Output:


                       
                  To find, how the multiple records (multiple table rows) are added to the Database, read my next post.


Next: How to add multiple records to Database using single HTML Form 

Previous: How To Use Multiple Resultset in JAVA / JSP
                

No comments:

Post a Comment