Jassif Team Institution

HTML படிவங்கள்

ஒரு HTML படிவம் பயனர் உள்ளீட்டை சேகரிக்க பயன்படுகிறது. பயனர் உள்ளீடு பெரும்பாலும் செயலாக்கத்திற்காக சர்வருக்கு அனுப்பப்படுகிறது.

எடுத்துக்காட்டு

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<form> உறுப்பு

HTML <form> உறுப்பு பயனர் உள்ளீட்டிற்காக ஒரு HTML படிவத்தை உருவாக்க பயன்படுகிறது:

<form>
  .
  form elements
  .
</form>

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

<input> உறுப்பு

HTML <input> உறுப்பு மிகவும் அதிகமாகப் பயன்படுத்தப்படும் படிவ உறுப்பு ஆகும்.

ஒரு <input> உறுப்பு பல வழிகளில் காட்சிப்படுத்தப்படும், இது type பண்புக்கூறைப் பொறுத்தது.

உரை புலங்கள்

<input type="text"> உரை உள்ளீட்டிற்கான ஒற்றை வரி உள்ளீட்டுப் புலத்தை வரையறுக்கிறது.

எடுத்துக்காட்டு

உரைக்கான உள்ளீட்டுப் புலங்களைக் கொண்ட படிவம்:

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

<label> உறுப்பு

மேலே உள்ள எடுத்துக்காட்டில் <label> உறுப்பின் பயன்பாட்டைக் கவனிக்கவும்.

<label> குறிச்சொல் பல படிவ உறுப்புகளுக்கான ஒரு லேபிளை வரையறுக்கிறது.

<label> உறுப்பு திரை வாசிப்பாளர் பயனர்களுக்கு பயனுள்ளதாக இருக்கும், ஏனெனில் பயனர் உள்ளீட்டு உறுப்பில் கவனம் செலுத்தும்போது திரை வாசிப்பாளர் லேபிளை சத்தமாக வாசிக்கும்.

<label> குறிச்சொல்லின் for பண்புக்கூறு அவற்றை ஒன்றாக இணைக்க <input> உறுப்பின் id பண்புக்கூறுக்கு சமமாக இருக்க வேண்டும்.

ரேடியோ பொத்தான்கள்

<input type="radio"> ஒரு ரேடியோ பொத்தானை வரையறுக்கிறது.

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

எடுத்துக்காட்டு

<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

சரிபார்ப்புப் பெட்டிகள்

<input type="checkbox"> ஒரு சரிபார்ப்புப் பெட்டியை வரையறுக்கிறது.

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

எடுத்துக்காட்டு

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

சமர்ப்பிப்பு பொத்தான்

<input type="submit"> படிவத் தரவை படிவ-கையாளுநருக்குச் சமர்ப்பிப்பதற்கான ஒரு பொத்தானை வரையறுக்கிறது.

படிவ-கையாளுநர் பொதுவாக உள்ளீட்டுத் தரவைச் செயலாக்குவதற்கான ஸ்கிரிப்ட் கொண்ட சர்வரில் உள்ள ஒரு கோப்பு ஆகும்.

படிவ-கையாளுநர் படிவத்தின் action பண்புக்கூறில் குறிப்பிடப்பட்டுள்ளது.

எடுத்துக்காட்டு

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

<input>க்கான Name பண்புக்கூறு

ஒவ்வொரு உள்ளீட்டுப் புலத்திற்கும் சமர்ப்பிக்க name பண்புக்கூறு இருக்க வேண்டும் என்பதைக் கவனிக்கவும்.

name பண்புக்கூறு விடுபட்டால், உள்ளீட்டுப் புலத்தின் மதிப்பு எப்போதும் அனுப்பப்படாது.

எடுத்துக்காட்டு

இந்த எடுத்துக்காட்டு "First name" உள்ளீட்டுப் புலத்தின் மதிப்பைச் சமர்ப்பிக்காது:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

பயிற்சி