HTML இல் ஒரு படிவத்தை உருவாக்குவது எப்படி

ஒரு வலைத்தள பயனரிடமிருந்து தரவைச் சேகரிப்பது பல்வேறு வழிகளில் செய்யப்படலாம். வலைத்தளங்களில் உள்ள படிவங்கள் ஒரு செய்தித்தாளில் ஒரு பயனரை சந்தா செலுத்துவது அல்லது வேலை விண்ணப்ப படிவமாக செயல்படுவது போன்ற மிகவும் சிக்கலான நோக்கத்தைக் கொண்ட ஒரு எளிய செயல்பாட்டைக் கொண்டிருக்கலாம்.

எவ்வாறாயினும், இந்த எளிய மற்றும் சிக்கலான வடிவங்களுக்கு பொதுவான ஒன்று HTML மற்றும் குறிப்பாக HTML ஆகும் குறிச்சொல்.

---

---

படிவம் குறிச்சொல்லைப் பயன்படுத்துதல்

தி குறிச்சொல் என்பது ஒரு HTML உறுப்பு ஆகும், இது படிவங்களுக்கான கட்டுமானத் தொகுதிகளாகக் கருதப்படும் பிற கூறுகளை இணைக்க ஒரு கொள்கலனாகப் பயன்படுத்தப்படுகிறது. இந்த அடிப்படை கூறுகளில் சில அடங்கும் குறிச்சொல், தி குறிச்சொல் மற்றும் குறிச்சொல்.

தி குறிச்சொல் அதன் செயல்பாட்டிற்கு பங்களிக்கும் ஒரு முக்கியமான பண்பைக் கொண்டுள்ளது. இந்த பண்பு நடவடிக்கை என்று அழைக்கப்படுகிறது மற்றும் படிவத்தில் உள்ளிடப்பட்ட தரவு அனுப்பப்படும் கோப்பை அடையாளம் காண பயன்படுகிறது.

குறிச்சொல் உதாரணத்தைப் பயன்படுத்துதல்







மேலே உள்ள உதாரணம் உங்கள் திட்டங்களில் படிவக் குறியை எவ்வாறு பயன்படுத்துவது என்பதைக் காட்டுகிறது. முக்கிய படிவங்களில் ஒன்று, நீங்கள் ஒரு படிவக் குறியைத் திறந்தால் அதை மூட நினைவில் கொள்ள வேண்டும். இது ஒரு படிவ அமைப்பை உருவாக்கும் மற்றும் படிவத்தில் உள்ளிடப்பட்ட தரவு சரியாக செயலாக்கப்படுவதை உறுதி செய்யும்.

குறிச்சொல்லைப் பயன்படுத்துதல்

தி ஒவ்வொரு உள்ளீட்டு புலத்திலும் உள்ள தரவை ஒரு வடிவத்தில் விவரிக்க டேக் பயன்படுத்தப்படுகிறது. இந்த டேக் ஒரு உள்ளது க்கான பண்பு, இது ஒரு படிவத்தின் செயல்பாட்டை மேம்படுத்த பயன்படுகிறது.

தொடர்புடையது: உங்கள் குறியீட்டை சோதிக்க சிறந்த இலவச ஆன்லைன் HTML எடிட்டர்கள்

---

---

தொடர்புடைய உள்ளீட்டு புலத்திற்கு ஒதுக்கப்பட்ட ஐடி பொருந்தினால் க்கான இல் மதிப்பு குறிச்சொல், நீங்கள் லேபிளைக் கிளிக் செய்யும்போது அந்த உள்ளீட்டு புலம் தானாகவே முன்னிலைப்படுத்தப்படும்.

குறிச்சொல் உதாரணத்தைப் பயன்படுத்துதல்


First Name:


மேலே உள்ள எடுத்துக்காட்டில் நீங்கள் அதை பார்க்கலாம் க்கான பண்புக்கூறு மதிப்பு ஒதுக்கப்பட்டுள்ளது பெயர் . எனவே, நீங்கள் ஒரு உள்ளீட்டு புலத்தை உருவாக்கினால் பெயர் ஐடி, நீங்கள் ஒவ்வொரு முறையும் கிளிக் செய்யும் போது இந்த புலம் முன்னிலைப்படுத்தப்படும் முதலில் பெயர் முத்திரை.

---

---

குறிச்சொல்லைப் பயன்படுத்துதல்

அதன் மிக அடிப்படையான வடிவத்தில், தி குறிச்சொல்லை ஒரு உரைப் பெட்டியாகக் காணலாம். தி டேக் பயனரிடமிருந்து தரவைப் பிடிக்கிறது மற்றும் அதன் மிக முக்கியமான அம்சங்களில் ஒன்று வகை பண்பு தி வகை பண்புக்கூறு இந்த உரைப் பெட்டி சேகரிக்கக்கூடிய தரவின் வகையைக் குறிக்கிறது.

தொடர்புடையது: CSS இல் அடுக்கப்பட்ட படிவத்தை உருவாக்குவது எப்படி

நீங்கள் ஒதுக்கக்கூடிய பல்வேறு மதிப்புகள் உள்ளன வகை பண்பு, ஆனால் மிகவும் பிரபலமான சில பின்வருமாறு.

• உரை
• எண்
• மின்னஞ்சல்
• படம்
• தேதி
• தேர்வுப்பெட்டி
• வானொலி
• கடவுச்சொல்

டேக் உதாரணத்தைப் பயன்படுத்துதல்


First Name:



தி மேலே உள்ள குறியீட்டில் உள்ள டேக் மூன்று வெவ்வேறு பண்புகளைக் கொண்டுள்ளது, அவை ஒவ்வொன்றும் தனித்துவமான செயல்பாட்டைக் கொண்டுள்ளன. தி வகை பண்புக்கூறுக்கு உரை மதிப்பு ஒதுக்கப்பட்டுள்ளது, அதாவது உரை பெட்டி எழுத்துக்களை மட்டுமே ஏற்கும்.

தி ஐடி பண்புக்கூறு என்பது உரைப் பெட்டிக்கான ஒரு தனித்துவமான அடையாளங்காட்டியாகும், மேலும் இது ஒரு CSS கோப்பிலிருந்து இந்த உறுப்புக்கான அணுகலை வழங்குவதால் இது முக்கியமானது. தி பெயர் பண்புக்கூறு ஒரு தனித்துவமான அடையாளங்காட்டியாகும்; எனினும், பெயர் பண்புக்கூறு வளர்ச்சியின் சர்வர் பக்கத்திலிருந்து ஒரு உறுப்புடன் தொடர்பு கொள்ள பயன்படுத்தப்படுகிறது.

தி ஐடி மற்றும் பெயர் கிளையன்ட் பக்கத்திலிருந்து மற்றொன்று சர்வர் பக்கத்திலிருந்து ஒரு உறுப்புக்கான அணுகலை வழங்குவதைப் போன்ற பண்புகளை வழக்கமாக அதே மதிப்பு ஒதுக்கப்படும்.

தேர்வுப்பெட்டி உறுப்பைப் பயன்படுத்துதல்

நீங்கள் பயன்படுத்தக்கூடிய மற்ற உறுப்புகளுடன் ஒப்பிடுகையில் தேர்வுப்பெட்டி உறுப்பு மிகவும் தனித்துவமானது குறிச்சொல். தொடர்புடைய தேர்வுகளின் பட்டியலிலிருந்து ஒன்று அல்லது அதற்கு மேற்பட்ட விருப்பங்களைத் தேர்ந்தெடுக்க பயனரை அனுமதிக்கிறது. தேர்வுப்பெட்டிகள் எளிதில் அடையாளம் காணப்படுகின்றன, ஏனெனில் அவை தேர்ந்தெடுக்கப்பட்ட போது ஒரு காசோலை கொண்டிருக்கும் சிறிய சதுர பெட்டிகளால் குறிப்பிடப்படுகின்றன.

தேர்வுப்பெட்டி உறுப்பு உதாரணத்தைப் பயன்படுத்துதல்


Programming Languages:
Java
JavaScript
Python


மேலே உள்ள எடுத்துக்காட்டில், ஒவ்வொரு செக் பாக்ஸ் உறுப்புகளும் மதிப்பு பண்புகளைக் கொண்டுள்ளன, மேலும் இது முக்கியமானது, ஏனெனில் இது ஒவ்வொரு செக் பாக்ஸ் விருப்பத்தையும் சேகரிப்பிலிருந்து வேறுபடுத்த உதவுகிறது. எனவே, மேலே உள்ள விருப்பங்களில் இருந்து ஒரு பயனர் 'ஜாவா'வைத் தேர்ந்தெடுத்தால், தரவு அதைப் பிரதிபலிக்கும்.

டேக் மற்றும் ரேடியோ கூறுகளைப் பயன்படுத்துதல்

தி குறிச்சொல் மற்றும் வானொலி கூறுகள் ஒரே நேரத்தில் ஒரே மாதிரியானவை, அவை பயனரை ஒரே நேரத்தில் ஒரு மதிப்பைத் தேர்ந்தெடுக்க அனுமதிக்கின்றன; எனவே, அவர்கள் ஒரே செயல்பாட்டைக் கொண்டுள்ளனர் என்று ஒருவர் கூறலாம். இருப்பினும், அவை தோற்றத்தில் மிகவும் வேறுபட்டவை.

ரேடியோ உறுப்பு தோற்றத்தில் தேர்வுப்பெட்டி உறுப்புடன் நெருக்கமாக உள்ளது, இருப்பினும், வானொலி உறுப்புடன் சதுரங்களுக்கு பதிலாக வட்டங்கள் உள்ளன.

தி டேக் அடிப்படையில் ஒரு கீழ்தோன்றும் பெட்டியை உருவாக்குகிறது, இது ஒரு பயனரை ஒற்றை மதிப்பைத் தேர்ந்தெடுக்க அனுமதிக்கிறது.

டேக் மற்றும் ரேடியோ எலிமென்ட் உதாரணத்தைப் பயன்படுத்துதல்


Sex:

Male
Female
Other


Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer


தேதி உறுப்பைப் பயன்படுத்துதல்

தேதி உறுப்பு கிளிக் செய்யும் போது ஒரு காலெண்டரை உருவாக்கும் ஒரு சிறிய உரை பெட்டியை உருவாக்குகிறது. பயன்படுத்தி தேதி உங்கள் படிவங்களில் உள்ளீட்டு வகையாக, ஒரு பயனர் தவறான தேதியை உள்ளிடுவதைத் தடுக்கிறார், இது தவறான தரவைச் சேகரிக்க வழிவகுக்கும்.

தேதி உறுப்பு உதாரணத்தைப் பயன்படுத்துதல்




மின்னஞ்சல் மற்றும் கடவுச்சொல் கூறுகளைப் பயன்படுத்துதல்

ஒரு டெவலப்பர் மின்னஞ்சல் அல்லது கடவுச்சொல் மதிப்புகளை ஒரு வகை பண்புக்கு ஒதுக்கும்போது குறிச்சொல், அவை ஒவ்வொன்றும் ஒரே மாதிரியான உரைப் பெட்டியை உருவாக்குகின்றன. இருப்பினும், நீங்கள் இந்தப் பெட்டிகளைப் பயன்படுத்தத் தொடங்கும் போது வேறுபாடுகள் தெளிவாகத் தெரியும்.

மின்னஞ்சல் உறுப்பு உரை பெட்டியில் உள்ளிடப்பட்ட தரவை கண்காணிக்கிறது மற்றும் ஒவ்வொரு சமர்ப்பிப்பும் ஒரு மின்னஞ்சல் முகவரியின் நிலையான தேவையை பூர்த்தி செய்கிறது என்பதை உறுதி செய்கிறது; அதாவது ஒரு உள்ளூர் பகுதி, அதைத் தொடர்ந்து @ சின்னம் மற்றும் ஒரு டொமைனுடன் முடிவடையும்.

மின்னஞ்சல் உறுப்பு உதாரணத்தைப் பயன்படுத்துதல்




மேலே உள்ள எடுத்துக்காட்டில் நீங்கள் அழைக்கப்படும் புதிய பண்புக்கூறு அறிமுகப்படுத்தப்பட்டுள்ளது ஒதுக்கிடம் மேலும், இந்த பண்பு உரை மதிப்பில் மங்கலான சாம்பல் நிறத்தில் காட்டப்படும் உரை மதிப்பை எடுக்கும். மேலே உள்ள எடுத்துக்காட்டில் காணப்படுவது போல் உரைப் பெட்டியில் வைக்கப்பட வேண்டிய தரவைக் குறிக்க இந்த உரை பயன்படுத்தப்படுகிறது.

கடவுச்சொல் உறுப்பு எழுத்துக்களை நட்சத்திரப் பெட்டிகளாக மாற்றும்போது அவை உரைப்பெட்டியில் நுழைகின்றன. எனவே, உங்கள் கணினித் திரை மற்றவர்களுக்குத் தெரிந்தால், நீங்கள் உள்ளிட்ட கடவுச்சொல்லை அவர்கள் பார்க்க மாட்டார்கள்.

கடவுச்சொல் உறுப்பு உதாரணத்தைப் பயன்படுத்துதல்




பட்டன் டேக் பயன்படுத்தி

ஒரு வடிவத்தில், பொதுவாக இரண்டு வெவ்வேறு வகையான பொத்தான்கள் உள்ளன. முதலில் சமர்ப்பி பொத்தான், படிவத்தில் உள்ளிடப்பட்ட தரவை செயல் பண்புக்கு ஒதுக்கப்பட்ட மதிப்புக்கு சமர்ப்பிக்கிறது (இது அமைந்துள்ளது < படிவம்> குறிச்சொல்).

பட்டனை உதாரணம் சமர்ப்பிக்கவும்

Submit


வழக்கமாக ஒரு படிவத்தில் பயன்படுத்தப்படும் இரண்டாவது வகை பொத்தானை மீட்டமை பொத்தான், இது ஒரு படிவத்தில் தரவை அழிக்கிறது, இதனால் பயனர் புதிய தரவை உள்ளிட முடியும். தி டேக் ஒரு உள்ளது வகை பண்புக்கூறு, இது பொத்தானின் செயல்பாட்டைக் குறிக்கப் பயன்படுகிறது. மேலே உள்ள எடுத்துக்காட்டில் வகை பண்பு என்பது மதிப்பை ஒதுக்குவதாகும் சமர்ப்பிக்க எனவே, ஒரு பொத்தானைக் கொண்டுள்ளது வகை மதிப்பு மீட்டமை படிவத்தை மீட்டமைக்கப் பயன்படுகிறது.

பொத்தானின் உதாரணத்தை மீட்டமைக்கவும்

Reset


ஒரு படிவத்தை உருவாக்குதல்

HTML இல் ஒரு எளிய படிவத்தை உருவாக்க நீங்கள் மேலே குறிப்பிட்டுள்ள அனைத்து கூறுகளையும் இணைக்க வேண்டும் குறிச்சொல்.

ஒரு படிவ உதாரணத்தை உருவாக்குதல்






Forms








First Name:

Last Name:




Date of birth:

Age:




Gender:

Male
Female
Other

Email Address:




Positions Available:
value='Junior Developer'> Junior Developer
value='Mid-level Developer'> Mid-level Developer
value='Senior Developer'> Senior Developer



Programming Languages:
Java
JavaScript
Python



Password:

Confirm Password:



Submit
Reset






மேலே உள்ள குறியீடு பின்வரும் படிவத்தை உருவாக்கும்:

மடிக்கணினி வைஃபை உடன் இணைக்கப்பட்டுள்ளது ஆனால் இணைய அணுகல் விண்டோஸ் 10 இல் இல்லை

இப்போது நீங்கள் HTML இல் ஒரு எளிய படிவத்தை உருவாக்கலாம்

இந்த கட்டுரை ஒரு செயல்பாட்டு HTML படிவத்தை உருவாக்குவதற்கான அனைத்து கருவிகளையும் வழங்குகிறது. இது படிவ உருவாக்கத்தில் பயன்படுத்தப்படும் வெவ்வேறு HTML குறிச்சொற்களை அடையாளம் கண்டு, இந்த குறிச்சொற்களுடன் பயன்படுத்தக்கூடிய பல்வேறு பண்புகளை ஆராய்கிறது.

இருப்பினும், இணையதளங்களில் நீங்கள் காணும் பெரும்பாலான படிவங்களில் ஒரு கூடுதல் கூறு உள்ளது; CSS, இது படிவத்தை உயிர்ப்பிக்கவும் மேலும் அழகியல் ரீதியாகவும் பயன்படுத்த பயன்படுகிறது.

பகிர் பகிர் ட்வீட் மின்னஞ்சல் அத்தியாவசிய CSS3 பண்புகள் ஏமாற்று தாள்

அத்தியாவசிய CSS தொடரியல் எங்கள் CSS3 பண்புகள் ஏமாற்று தாள்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• HTML
• இணைய மேம்பாடு
• குறியீட்டு பயிற்சிகள்

எழுத்தாளர் பற்றி கதீஷா கீன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

கதீஷா கீன் ஒரு முழு அடுக்கு மென்பொருள் டெவலப்பர் மற்றும் தொழில்நுட்ப/தொழில்நுட்ப எழுத்தாளர். மிகவும் சிக்கலான சில தொழில்நுட்பக் கருத்துகளை எளிமையாக்கும் தனித்துவமான திறமை அவளிடம் உள்ளது; எந்தவொரு தொழில்நுட்ப புதியவராலும் எளிதில் புரிந்துகொள்ளக்கூடிய பொருள் உற்பத்தி. அவர் எழுதுவது, சுவாரஸ்யமான மென்பொருளை உருவாக்குவது மற்றும் உலகம் முழுவதும் (ஆவணப்படங்கள் மூலம்) பயணம் செய்வதில் ஆர்வம் கொண்டவர்.

கதீஷா கீனிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்