HTML உள்ளீட்டு form* பண்புக்கூறுகள்
இந்த அத்தியாயம் HTML <input> உறுப்புக்கான வெவ்வேறு form* பண்புக்கூறுகளை விவரிக்கிறது.
முக்கிய கருத்து:
form* பண்புக்கூறுகள் உள்ளீட்டு உறுப்புகள் படிவ உறுப்பின் பண்புக்கூறுகளை மீற அனுமதிக்கின்றன. இவை பொதுவாக submit மற்றும் image உள்ளீட்டு வகைகளுடன் பயன்படுத்தப்படுகின்றன.
form பண்புக்கூறு
உள்ளீட்டு form பண்புக்கூறு <input> உறுப்பு சேர்ந்த படிவத்தைக் குறிப்பிடுகிறது.
இந்த பண்புக்கூறின் மதிப்பு அது சேர்ந்த <form> உறுப்பின் id பண்புக்கூறுக்கு சமமாக இருக்க வேண்டும்.
எடுத்துக்காட்டு
HTML படிவத்திற்கு வெளியே அமைந்துள்ள உள்ளீட்டுப் புலம் (ஆனால் இன்னும் படிவத்தின் ஒரு பகுதியாக):
<form action="/action_page.php" id="form1">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" form="form1">
formaction பண்புக்கூறு
உள்ளீட்டு formaction பண்புக்கூறு படிவம் சமர்ப்பிக்கப்படும் போது உள்ளீட்டை செயலாக்கும் கோப்பின் URL ஐக் குறிப்பிடுகிறது.
| பண்புக்கூறு | பயனுள்ள உள்ளீட்டு வகைகள் |
|---|---|
| formaction | submit மற்றும் image |
எடுத்துக்காட்டு
வெவ்வேறு செயல்களைக் கொண்ட இரண்டு submit பொத்தான்களைக் கொண்ட HTML படிவம்:
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formaction="/action_page2.php" value="Submit as Admin">
</form>
formenctype பண்புக்கூறு
உள்ளீட்டு formenctype பண்புக்கூறு படிவ-தரவு சமர்ப்பிக்கப்படும் போது எவ்வாறு குறியாக்கம் செய்யப்பட வேண்டும் என்பதைக் குறிப்பிடுகிறது (method="post" உடன் கூடிய படிவங்களுக்கு மட்டும்).
எடுத்துக்காட்டு
இரண்டு submit பொத்தான்களைக் கொண்ட படிவம். முதலாவது இயல்புநிலை குறியாக்கத்துடன் படிவ-தரவை அனுப்புகிறது, இரண்டாவது "multipart/form-data" ஆக குறியாக்கப்பட்ட படிவ-தரவை அனுப்புகிறது:
<form action="/action_page_binary.asp" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>
முக்கிய பயன்பாடு:
formenctype="multipart/form-data" கோப்புப் பதிவேற்றங்களுக்கு அவசியம், ஏனெனில் இது பைனரி தரவை அனுப்ப அனுமதிக்கிறது.
formmethod பண்புக்கூறு
உள்ளீட்டு formmethod பண்புக்கூறு செயல் URL க்கு படிவ-தரவை அனுப்புவதற்கான HTTP முறையை வரையறுக்கிறது.
எடுத்துக்காட்டு
இரண்டு submit பொத்தான்களைக் கொண்ட படிவம். முதலாவது method="get" உடன் படிவ-தரவை அனுப்புகிறது. இரண்டாவது method="post" உடன் படிவ-தரவை அனுப்புகிறது:
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>
"GET" முறை பற்றிய குறிப்புகள்:
- இந்த முறை படிவ-தரவை URL இல் பெயர்/மதிப்பு ஜோடிகளாக இணைக்கிறது
- பயனர் முடிவை புத்தகக்குறியிட விரும்பும் படிவ சமர்ப்பிப்புகளுக்கு இந்த முறை பயனுள்ளதாக இருக்கும்
- URL இல் எவ்வளவு தரவை வைக்க முடியும் என்பதில் ஒரு வரம்பு உள்ளது
- உணர்திறன் தகவல்களை அனுப்ப "GET" முறையைப் பயன்படுத்த வேண்டாம்!
"POST" முறை பற்றிய குறிப்புகள்:
- இந்த முறை படிவ-தரவை HTTP post பரிமாற்றமாக அனுப்புகிறது
- "POST" முறையுடன் படிவ சமர்ப்பிப்புகளை புத்தகக்குறியிட முடியாது
- "POST" முறை "GET" ஐ விட வலுவானது மற்றும் பாதுகாப்பானது
- "POST" க்கு அளவு வரம்புகள் இல்லை
formtarget பண்புக்கூறு
உள்ளீட்டு formtarget பண்புக்கூறு படிவத்தைச் சமர்ப்பித்த பிறகு பெறப்பட்ட பதிலை எங்கு காட்ட வேண்டும் என்பதைக் குறிக்கும் ஒரு பெயர் அல்லது முக்கியச்சொல்லைக் குறிப்பிடுகிறது.
எடுத்துக்காட்டு
வெவ்வேறு இலக்கு சாளரங்களைக் கொண்ட இரண்டு submit பொத்தான்களைக் கொண்ட படிவம்:
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
| target மதிப்பு | விளக்கம் |
|---|---|
| _blank | புதிய சாளரம்/தத்தலில் திறக்கிறது |
| _self | தற்போதைய சாளரத்தில் திறக்கிறது (இயல்புநிலை) |
| _parent | பேரிடத்தில் திறக்கிறது |
| _top | முழு சாளரத்திலும் திறக்கிறது |
formnovalidate பண்புக்கூறு
உள்ளீட்டு formnovalidate பண்புக்கூறு ஒரு <input> உறுப்பு சமர்ப்பிக்கப்படும் போது சரிபார்க்கப்படக்கூடாது என்பதைக் குறிப்பிடுகிறது.
எடுத்துக்காட்டு
இரண்டு submit பொத்தான்களைக் கொண்ட படிவம் (சரிபார்ப்புடன் மற்றும் இல்லாமல்):
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>
novalidate பண்புக்கூறு
novalidate பண்புக்கூறு ஒரு <form> பண்புக்கூறு ஆகும்.
இருப்பின், novalidate அனைத்து படிவ-தரவும் சமர்ப்பிக்கப்படும் போது சரிபார்க்கப்படக்கூடாது என்பதைக் குறிப்பிடுகிறது.
எடுத்துக்காட்டு
எந்த படிவ-தரவும் சமர்ப்பிப்பில் சரிபார்க்கப்படக்கூடாது என்பதைக் குறிப்பிடவும்:
<form action="/action_page.php" novalidate>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>
முக்கிய வேறுபாடு:
novalidate (form மீது): முழு படிவத்திற்கும் சரிபார்ப்பை முடக்குகிறது
formnovalidate (input மீது): குறிப்பிட்ட submit பொத்தானுக்கு சரிபார்ப்பை முடக்குகிறது
பயிற்சி
INPUT உறுப்புக்கான சட்டப்பூர்வமான form பண்புக்கூறு எது அல்ல?
HTML படிவ மற்றும் உள்ளீட்டு உறுப்புகள்
| குறிச்சொல் | விளக்கம் |
|---|---|
| <form> | பயனர் உள்ளீட்டிற்கான HTML படிவத்தை வரையறுக்கிறது |
| <input> | உள்ளீட்டுக் கட்டுப்பாட்டை வரையறுக்கிறது |
கூடுதல் ஆதாரம்:
அனைத்து கிடைக்கக்கூடிய HTML குறிச்சொற்களின் முழுமையான பட்டியலுக்கு, எங்கள் HTML Tag Reference ஐப் பார்வையிடவும்.
form* பண்புக்கூறுகளின் சுருக்கம்:
| பண்புக்கூறு | மீறுகிறது | பயனுள்ள உள்ளீட்டு வகைகள் |
|---|---|---|
| form | - | அனைத்தும் |
| formaction | action | submit, image |
| formenctype | enctype | submit, image |
| formmethod | method | submit, image |
| formtarget | target | submit, image |
| formnovalidate | novalidate | submit |