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 ફોર્મ બનાવી શકો છો.
