Html માં ફોર્મ બનાવવા માટેના કોડિંગ ની સવિસ્તાર સમજૂતી સાથેના પ્રોગ્રામ નો ઉદાહરણ

Html માં ફોર્મ બનાવવા માટેના કોડિંગ ની સવિસ્તાર સમજૂતી સાથેના પ્રોગ્રામ નો ઉદાહરણ

HTML માં ફોર્મ બનાવવા માટેની પદ્ધતિ ખૂબ જ સરળ છે. અમે HTML ની form ટેગનો ઉપયોગ કરીને ફોર્મ બનાવી શકીએ છીએ. આ ફોર્મમાં જુદા જુદા પ્રકારના ઇનપુટ ફીલ્ડ્સ (જેમ કે ટેક્સ્ટ બોક્સ, બટન્સ, ચેકબોક્સ, રેડિઓ બટન્સ, વગેરે) સામેલ કરી શકીએ છીએ.

ફોર્મ બનાવતા કોડની સમજૂતી:

1. <form> ટેગ: ફોર્મ ટેગનો ઉપયોગ કરવા માં આવે છે અને તે બધા ફોર્મ એલિમેન્ટ્સ (input fields)ને એકસાથે રખે છે.

2. action એટ્રિબ્યૂટ: આ એ URL હોય છે જ્યાં ફોર્મ ડેટા સબમિટ થયા પછી મોકલવામાં આવે છે.

3. method એટ્રિબ્યૂટ: આ એ પદ્ધતિ બતાવે છે કે ફોર્મ ડેટા કેવી રીતે મોકલવામાં આવશે. GET અથવા POST બંને પદ્ધતિઓ હોઈ શકે છે.

પ્રોગ્રામ ઉદાહરણ:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Form Example</title>
</head>
<body>
    <h2>Registration Form</h2>
    <!– Form starts –>
    <form action=”submit_form.php” method=”POST”>
        <!– Name Input Field –>
        <label for=”name”>Full Name:</label>
        <input type=”text” id=”name” name=”name” required>
        <br><br>

        <!– Email Input Field –>
        <label for=”email”>Email Address:</label>
        <input type=”email” id=”email” name=”email” required>
        <br><br>

        <!– Password Input Field –>
        <label for=”password”>Password:</label>
        <input type=”password” id=”password” name=”password” required>
        <br><br>

        <!– Gender Radio Buttons –>
        <label>Gender:</label>
        <input type=”radio” id=”male” name=”gender” value=”male”>
        <label for=”male”>Male</label>
        <input type=”radio” id=”female” name=”gender” value=”female”>
        <label for=”female”>Female</label>
        <br><br>

        <!– Hobbies Checkbox –>
        <label>Hobbies:</label>
        <input type=”checkbox” id=”reading” name=”hobby” value=”reading”>
        <label for=”reading”>Reading</label>
        <input type=”checkbox” id=”traveling” name=”hobby” value=”traveling”>
        <label for=”traveling”>Traveling</label>
        <input type=”checkbox” id=”sports” name=”hobby” value=”sports”>
        <label for=”sports”>Sports</label>
        <br><br>

        <!– Dropdown Menu –>
        <label for=”country”>Country:</label>
        <select id=”country” name=”country”>
            <option value=”india”>India</option>
            <option value=”usa”>USA</option>
            <option value=”uk”>UK</option>
        </select>
        <br><br>

        <!– Submit Button –>
        <input type=”submit” value=”Submit”>
    </form>
    <!– Form ends –>
</body>
</html>

કોડની સમજૂતી:

1. <label> અને <input>: label એટ્રિબ્યૂટનો ઉપયોગ ફોર્મ ફિલ્ડ માટે આઇડેન્ટિફાયર તરીકે થાય છે. input એ પ્રકારના ફીલ્ડને વ્યાખ્યાયિત કરે છે (ટેક્સ્ટ, ઇમેઇલ, પાસવર્ડ, રેડિઓ, વગેરે).

2. ટેક્સ્ટ બોક્સ (type=”text”): યૂઝરને ટેક્સ્ટ દાખલ કરવા માટે.

3. ઇમેઇલ બોક્સ (type=”email”): યૂઝરને ઇમેઇલ દાખલ કરવા માટે.

4. પાસવર્ડ બોક્સ (type=”password”): યૂઝરને પાસવર્ડ દાખલ કરવા માટે.

5. રેડિઓ બટન: બે વિકલ્પમાંથી એક પસંદ કરવા માટે.

6. ચેકબોક્સ: ઘણા વિકલ્પોમાંથી કોઈપણનો પસંદગીનો સંયોજન.

7. ડ્રોપડાઉન મેનુ (<select>): એક દેશ પસંદ કરવા માટે.

8. સબમિટ બટન (type=”submit”): ફોર્મ સબમિટ કરવા માટે.

આ રીતે, તમે HTML ફોર્મ બનાવી શકો છો.

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *