HTML Form

Form என்பது ஒன்று அல்லது ஒன்றுக்கும் மேற்பட்ட input values-ஐ ஒரு page-ல் இருந்து மற்றோரு page-க்கு எடுத்து செல்ல பயன்படுகிறது.

Note: form-ல் action என்ற attribute-ல் தான், எந்த page-க்கு values-ஐ எடுத்த்து செல்லவேண்டும் என்பதை குறிப்பிட முடியும். eg: action="sign-up-page". ஒருவேலை form-ல் action-ஐ empty ஆகவோ(action="") அல்லது பயன்படுத்தாமலோ இருந்தால், form-ஐ submit செய்யும்போது எல்லா input values-ம் அதே page-லே கிடைத்துவிடும்.

HTML form inputs

Input Name 
<input type="text">
 Text box 
<input type="number">
 Number input. Text Not allowed 
<input type="email">
 Email input 
<input type="password">
 Password input 
<input type="date">
 Date input 
<input type="submit">
 Submit button 
<input type="reset">
 Reset button. Reset all the inputs of the form 
<input type="button">
 Input Button 
<button></button>
 Button 
<input type="radio">
 Radio button 
<input type="checkbox">
 Check box 
<input type="hidden">
 This input never display on the screen 
<select> </select>
 Drop down list 
<textarea> </textarea>
 Textarea. Multiple line input
Note:

ஒரு form-ல் ஒரே ஒரு submit button-ம் ஒரு reset button-ம் தான் இருக்கவேண்டும். ஒன்றுக்கும் மேற்பட்ட submit button இருந்தால், எந்த button-ஐ submit செய்யதாலும் ஒரே acction-ஐ தான் செய்யும். ஆகையால் தான் ஒன்றுக்கும் மேற்பட்ட submit button வைப்பதற்கான அவசியமில்லை.

Example

Try this code 
<form action="your-destination-page">
    <input type="hidden" name="userid" value="2019"/>

    <label>Username:</label> <input type="text" name="username"/><br><br>

    <label>Email:</label> <input type="email" name="useremail"/><br><br>

    <label>password:</label> <input type="password" name="userpassword"/><br><br>

    <label>Mobile:</label> <input type="number" name="usermobile"/><br><br>

    <label>State:</label> 
    <select name="userstate">
        <option value="">Select</option>
        <option>Andhra</option>
        <option>Karnataka</option>
        <option>Kerla</option>
        <option>TamilNadu</option>
        <option>Rajesthan</option>
    </select><br><br>

    <label>Gender</label> 
    <input type="radio" name="gender" value="Male" /> Male
    <input type="radio" name="gender" value="Female" /> Female<br><br>

    <label>Address</label> 
    <textarea name="useraddress"></textarea><br><br>
    <input type="checkbox" name="gender" value="Male" /> Agree the terms and conditions<br><br>

    <input type="submit" value="Register" />
</form>
Output:





Male Female

Agree the terms and conditions
Note: form-ல் name மிக முக்கியமானது. ஏனெனில் input values அனைத்தும் அந்தந்த name-ஐ வைத்துதான் அதுத page-க்கு எடுத்து செல்லப்படுகிறது. ஒரு input-ல் default value வேண்டுமெனில் value என்ற attribute-ஐ பயன்படுத்த வேண்டும். eg: value="venkatesh@linto.com"

HTML form input with default value

Example

Try this code 
<form action="your-destination-page">
    <input type="hidden" name="userid" value="2019"/><br><br>

    <label>Username:</label> <input type="text" name="username" value="madhavan"/><br><br>

    <label>Email:</label> <input type="email" name="useremail" value="madhavan@gmail.com"/><br><br>

    <label>password:</label> <input type="password" name="userpassword" value="madhavan"/><br><br>

    <label>Mobile:</label> <input type="number" name="usermobile" value="9876543210"/><br><br>

    <label>State:</label> 
    <select name="userstate">
        <option value="">Select</option>
        <option>Andhra</option>
        <option>Karnataka</option>
        <option>Kerla</option>
        <option selected="selected">TamilNadu</option>
        <option>Rajesthan</option>
    </select><br><br>

    <label>Gender</label> 
    <input type="radio" name="gender" value="Male" checked /> Male
    <input type="radio" name="gender" value="Female" /> Female<br><br>

    <label>Address</label> 
    <textarea name="useraddress" >No.1 new street, new nagar, new city,pin-600001</textarea><br><br>

    <input type="checkbox" name="gender" value="Male" checked/> Agree the terms and conditions<br><br>

    <input type="submit" value="Register" />
</form>
Output:





Male Female

Agree the terms and conditions

HTML form input with alignment and background color

Example

Try this code 
<form class="myform">
    <table cellspacing="10">
        <tr>
            <td>
                <label>Username:</label>  
            </td>
            <td>
                <input type="text" name="username"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Email:</label>  
            </td>
            <td>
                <input type="email" name="useremail"/>  
            </td>
        </tr>
        <tr>
            <td>
                <label>password:</label>
            </td>
            <td>
                <input type="password" name="userpassword"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Mobile:</label>
            </td>
            <td>
                <input type="number" name="usermobile"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>State:</label> 
            </td>
            <td>
                <select name="userstate">
                    <option value="">Select</option>
                    <option>Andhra</option>
                    <option>Karnataka</option>
                    <option>Kerla</option>
                    <option>TamilNadu</option>
                    <option>Rajesthan</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <label>Gender</label> 
            </td>
            <td>
                <input type="radio" name="gender" value="Male" /> Male
                <input type="radio" name="gender" value="Female" /> Female 
            </td>
        </tr>
        <tr>
            <td>
                <label>Address</label>
            </td>
            <td>
                <textarea name="useraddress"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="checkbox" name="gender" value="Male" /> Agree the terms and conditions
            </td>

        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Register" />  
            </td>
        </tr>
    </table>
</form>
<style>
    .myform{
        width: 300px;
        background-color: lightyellow;
        border:1px solid brown;
    }
</style>
Output:
Male Female
Agree the terms and conditions

Comments

Yashodha 9th August,2023 07:19 pm
It was very helpful for me during this time
arun 15th September,2021 11:17 pm
super aaa vilankuthu .enum niraja tutorial website publish pannunga
janani 22nd October,2020 05:25 pm
excellent