webteam

What is Forms in HTML?

Forms:

  • ஒரு படிவத்தை உருவாக்க <form> - tag ஐ <body>- க்குள் கொடுக்க வேண்டும். இதற்கான இணை tag படிவம் முடியும்போது இடம்பெறும். இந்த <form> - க்கு method மற்றும் action என்று இரண்டு பண்புகள் உள்ளன. method -க்கு post எனும் மதிப்பும், action -க்கு படிவத்தில் பூர்த்தி செய்யப்பட்ட விவரங்களை எங்கு அனுப்ப வேண்டும் எனும் மதிப்பும் பெற்றிருக்கும். இதை பின்வருமாறு காண்போம்.
  • < form method =”post” action=”mailto:prabu92@gmail.com ">
  • பொதுவாக action-ன் மதிப்பு ஒரு program-ஆகவோ அல்லது database-ஆகவோ இருக்கும். ஆனால் இங்கு நாம் சுலபமாகப் புரிந்து கொள்வதற்காக mailto எனும் command-ஐப் பயன்படுத்தியுள்ளோம். அதாவது படிவத்தில் பூர்த்திசெய்யப்பட்ட விவரங்கள் mailto command -ல் உள்ள மின்னஞ்சல் முகவரிக்குச் சென்றுவிடும்.
  • அடுத்து பயனர்களிடமிருந்து விவரத்தை பெற்றுக்கொள்வதற்குப் பயன்படும் ஒவ்வொரு விதமான tags-ஐயும் பின்வருமாறு பார்க்கலாம்.

<input> tag

  • பயனர்களிடமிருந்து எழுத்துக்கள் எண்கள் போன்ற வகையான தகவல்களைப் பெற்றுக்கொள்ள <input> tag பயன்படும். இதற்கு type மற்றும் name என்று இரண்டு பொதுவான பண்புகள் உள்ளன. type- ஆனது பெற்றுக்கொள்ளப்போவது எவ்வகை விவரம் எனும் மதிப்பினையும், name- ஆனது பெற்றுக்கொண்ட விவரத்துக்கு ஒரு பெயரையும் அளிக்கப் பயன்படுகிறது.

Text box

  • <input type="text" size="25" name="name"/>
  • <input type="text" size="10" name="ph"/>
 
  • இங்கு பெற்றுக்கொள்ளப்போகும் விவரம் எழுத்துக்கள் மற்றும் எண்கள் வடிவில் இருப்பதால், இரண்டு input tag-க்கும் type-ன் மதிப்பு text என்று உள்ளது. மேலும் முதல் input-க்கு name எனும் பெயரும், அடுத்த input-க்கு ph எனும் பெயரும் அளிக்கப்பட்டுள்ளது. அடுத்தபடியாக size எனும் பண்பு முதல் input-ல் ஒரு பெயர் 25 எழுத்துக்கள் வரை இருக்கலாம் எனும் விவரத்தையும், அடுத்த input-ல் ஒரு தொலைபேசி எண் 10 எண்கள் வரை இருக்கலாம் எனும் விவரத்தையும் அளிக்கிறது.
  • இங்கு ஒவ்வொரு input tag-ம் இணை tag ஏதுமின்றி அதனிறுதியில் / ஐப் பெற்று முடிக்கப்படுவதைக் காணலாம். எனவே இவை self closing tags என்றழைக்கப்படும்.
  • இதுபோன்று வெறும் இரண்டு input tags-ஐ மட்டும் program-ல் கொடுக்கும்போது அவை திரையில் வெறும் இரண்டு பெட்டிகளை மட்டும் வெளிப்படுத்தும். இந்த இரண்டு பெட்டிகளும் எதற்காக என்று பயனர்களுக்குத் தெரியாதல்லவா. அதற்காக ஒவ்வொரு input tag-ன் முன்னரும் பின்வருமாறு கொடுக்கலாம்.
  •  
  • Name <input type="text" size="25" name="name"/>
  • Phone Number <input type="text" size="10" name="ph"/>
  •  
  • இவை பயனர்களின் வசதிக்காக மட்டுமேயன்றி வேறு எதற்கும் கிடையாது. பயனர்கள் அளித்த விவரங்களெல்லாம் name எனும் பண்பில் உள்ள பெயரினால் மட்டுமே குறிக்கப்படும். உதாரணம்.

 

  •  Name=Raja
  •  Ph = 9878979289

Radio button

  • இரண்டு விவரத்தைக் கொடுத்து அதில் ஏதேனும் ஒன்றை தேர்வு செய்ய radio button பயன்படும். உதாரணத்துக்கு ஒருவர் ஆணா, பெண்ணா எனும் விவரத்தை அறிய"ஆண்" , "பெண்" எனும் இரண்டு radio buttons -ஐக் கொடுத்து அதில் ஏதேனும் ஒன்றை தேர்வு செய்யுமாறு சொல்லலாம். இதற்கான

          input tag பின்வருமாறு அமையும்.

 

  • <input type="radio" name="sex" value="M"/>
  • <input type="radio" name="sex" value="F"/>

 

  • இவை திரையில் வெறும் இரண்டு radio button -களை மட்டும் வெளிப்படுத்தும். எந்த button எதற்காக எனப் பயனர்கள் புரிந்து கொள்ள ஒவ்வொரு tag-க்கும் முன்னர் பின்வருமாறு கொடுக்கலாம்.

 

  • Male <input type="radio" name="sex" value="M"/>
  • Female <input type="radio" name="sex" value="F"/>
  •  
  • இங்கு value எனும் பண்பு ஒவ்வொரு option-க்கும் உரிய மதிப்பினைக் கொண்டிருக்கும். உதாரணத்துக்கு இரண்டாவது option-ஐ தேர்வு செய்தால் "F" எனும் மதிப்பு name எனும் பண்பில் உள்ள பெயரினால் குறிக்கப்பட்டு மின்னஞ்சலில் பின்வருமாறு செலுத்தப்படும்.
  • Sex = F
  • முதல் option-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், அதனிறுதியில் 'checked' எனும் வார்த்தையை மட்டும் இணைத்தால் போதுமானது.
  • Male <input type="radio" name="sex" value="M" checked/>

Checkboxes

  • இரண்டுக்கும் ஏற்பட்ட விவரங்களைக் கொடுத்து அதிலிருந்து ஒன்றுக்கும் மேற்பட்ட விவரங்களைத் தேர்வு செய்யுமாறு அமைக்க விரும்பினால் checkboxes-ஐப் பயன்படுத்தலாம். உதாரணத்துக்கு தமிழ், ஆங்கிலம்,இந்தி எனும் 3 மொழிகளில் ஒவ்வொருவருக்கும் எந்தந்த மொழிகளெல்லாம் தெரியும் எனும் விவரத்தைப் பெற்றுக்கொள்ள விரும்பினால், அதற்கான input tag பின்வருமாறு அமையும்.

 

  • <input type="checkbox" name="Language" value="Tamil" />
  • <input type="checkbox" name="Language" value="English"/>
  • <input type="checkbox" name="Language" value="Hindi"/>

 

  • இவை மூன்று சிறிதான பெட்டிகளை மட்டும் திரையில் வெளிப்படுத்தும். எனவே எந்த பெட்டி எந்த மொழிக்காக எனக் குறிப்பிடும் வகையில் ஒவ்வொரு input tag -க்கும் முன்னர் அந்தந்த மொழிகளின் பெயர்களை குறிப்பிடலாம்.

Submit & Reset buttons

  • <input> - tag ன் type எனும் பண்பினை 'Submit' என்று கொடுக்கும்போது, படிவத்தில் நாம் பூர்த்தி செய்த விவரங்கள் அனைத்தும், படிவத்தின் action எனும் பண்பில் என்ன குறிப்பிடப்பட்டுள்ளதோ அதற்கேற்ப செயல்படும். 'Reset' என்று கொடுக்கும்போது படிவத்தில் பூர்த்தி செய்த விவரங்கள் அனைத்தும் நீக்கப்பட்டுவிடும்.

 

  • <input type="submit"/>
  • <input type="reset"/>

 

  • மேற்கூறியவாறு நாம் கொடுக்கும்போது, திரையில் வெறும் இரண்டு buttons மட்டும் வெளிப்படும். எந்த button எதற்காக எனப் பயனர்கள் புரிந்து கொள்வதற்காக value எனும் பண்பினை நாம் இணைக்க வேண்டும்.

 

  • <input type="submit" value="ok"/>
  • <input type="reset" value="cancel"/>

 

  • இப்போது ஒரு button-ன் மேல் 'OK' என்றும், அடுத்த button-ன் மேல் 'cancel' என்றும் பயனர்களின் வசதிக்காக எழுதப்பட்டிருக்கும்.

<Select> tag

  • ஒரு drop-down list -ஐ உருவாக்கி அதிலிருந்து மதிப்புக்களை தேர்வு செய்ய விரும்பினால், <select> tag-ஐப் பயன்படுத்தலாம். இதற்கு இணை tag உண்டு. மேலும் name மற்றும் size என்று இரண்டு விதமான பண்புகளைப் பெற்றிருக்கும். name- ல் நாம் தேர்ந்தெடுக்கும் option-க்கு ஒரு பெயரும், size- ல் எத்தனை option- களைக் கொடுக்கப் போகிறோம் எனும் எண்ணிக்கையும் இருக்கும். List- க்குள் இடம்பெறப்போகும் ஒவ்வொரு விவரமும் <option> எனும் இணை tag-க்குள் காணப்படும்.
  • உதாரணத்துக்கு 3 ஊரின் பெயர்களை ஒரு drop-down list -ல் கொடுத்து, அதிலிருந்து ஒன்றை தேர்வு செய்வதற்கான code பின்வருமாறு அமையும்.

 

  • <select name="city" size="3">
  • <option>Pudukkottai</option>
  • <option>Trichy</option>
  • <option>Madurai</option>
  • </select>
  •  
  • ஒன்றுக்கும் மேற்பட்ட விவரத்தை தேர்வுசெய்யுமாறு அமைக்க விரும்பினால், select tag- க்குள் multiple எனும் வார்த்தையை இணைத்தால் போதுமானது.
  • <select name="city" size="3" multiple>
  • முதல் option-ஆனது default-ஆக தேர்வு செய்யப்பட்ட நிலையிலேயே இருக்குமாறு அமைக்க விரும்பினால், option tag- க்குள் selected எனும் வார்த்தையை இணைத்தால் போதுமானது.
  • <option selected>Pudukkottai</option>

<textarea> tag

ஒன்றுக்கும் மேற்பட்ட பல வரிகளைக் கொண்ட "கருத்துக்கள்" அல்லது "முகவரி" போன்ற விவரங்களைப் பயனர்களிடமிருந்து பெற்றுக்கொள்ள <textarea> tag பயன்படும். இதற்கு இணை tag உண்டு. மேலும் rows மற்றும் cols என்று இரண்டு பண்புகளைப் பெற்றிருக்கும். rows- ல் வரிகளின் எண்ணிக்கையும், cols-ல் அவற்றின் அகலமும் இடம்பெறும்.

மேற்கூறிய அனைத்து tag-ஐயும் பயன்படுத்தி உருவாக்கப்பட்ட ஒரு program-ஐ பின்வருமாறு காணலாம்.

450_21e94b2a04c23d1fa3e638a81b35527d.jpeg

Output:

450_4c7804e4211795f21f7bbf1c6ce67f95.jpeg



 

 

Posted in HTML on December 29 2021 at 08:07 PM

Comments (0)

No login

Popular Blogs