HTML இல் அறிமுகம் Form: கட்டமைப்பு, உள்ளீட்டு வகைகள் மற்றும் எடுத்துக்காட்டுகள்

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

உள்ளீட்டு புலங்கள்

  • <input type="text">: பயனர்கள் எண்ணெழுத்து எழுத்துக்களை உள்ளிடக்கூடிய உரை உள்ளீட்டு புலத்தை உருவாக்குகிறது.
  • <input type="password">: உள்ளிட்ட எழுத்துக்களை மறைக்கும் கடவுச்சொல் உள்ளீட்டு புலத்தைக் காட்டுகிறது.
  • <input type="email">: சரியான மின்னஞ்சல் முகவரி தேவைப்படும் உள்ளீட்டு புலங்களுக்கான மின்னஞ்சல் சரிபார்ப்பை வழங்குகிறது.
  • <input type="number">: உள்ளீட்டை எண் மதிப்புகளுக்கு மட்டுமே கட்டுப்படுத்துகிறது.
  • <input type="checkbox">: பயனர்கள் தேர்ந்தெடுக்கக்கூடிய அல்லது தேர்வுநீக்கக்கூடிய தேர்வுப்பெட்டியைக் குறிக்கிறது.
  • <input type="radio">: விருப்பங்களின் குழுவிலிருந்து ஒரு விருப்பத்தைத் தேர்ந்தெடுக்க பயனர்களை அனுமதிக்கும் ரேடியோ பொத்தானைக் குறிக்கிறது.
  • <input type="file">: கோப்புகளைத் தேர்ந்தெடுத்து பதிவேற்ற பயனர்களுக்கு உதவுகிறது.
  • <input type="submit">: கிளிக் செய்யும் போது சமர்ப்பிக்கும் ஒரு பொத்தானைக் காட்டுகிறது form.
  • <input type="reset"> form: அதன் ஆரம்ப நிலைக்கு மீட்டமைக்கும் ஒரு பொத்தானைக் காட்டுகிறது .
  • <input type="date">: தேதிகளைத் தேர்ந்தெடுப்பதற்கான தேதித் தேர்வியை வழங்குகிறது.
  • <input type="time">: நேர மதிப்புகளை உள்ளிட பயனர்களை அனுமதிக்கிறது.

கூறுகளைத் தேர்ந்தெடுக்கவும்

  • <select>: தேர்ந்தெடுக்கக்கூடிய விருப்பங்களுடன் கீழ்தோன்றும் மெனுவை உருவாக்குகிறது.
  • <option>: குறிச்சொல்லின் உள்ளே வைக்கப்பட்டுள்ள கீழ்தோன்றும் மெனுவில் உள்ள விருப்பத்தை வரையறுக்கிறது <select>.
  • <optgroup> கீழ்தோன்றும் மெனுவில் குழுக்கள் தொடர்பான விருப்பங்கள்.
  • <select multiple>: கிளிக் செய்யும் போது Ctrl விசையை(அல்லது Mac இல் கட்டளை விசையை) அழுத்திப் பிடித்து பல விருப்பங்களை ஒரே நேரத்தில் தேர்ந்தெடுக்க பயனர்களை அனுமதிக்கிறது.

டெக்ஸ்டாரியாஸ்

<textarea>: பல வரி உரை உள்ளீட்டு புலத்தை உருவாக்குகிறது, அங்கு பயனர்கள் நீண்ட உரைத் தொகுதிகளை உள்ளிட்டு திருத்தலாம். rows அதன் அளவு மற்றும் cols அதன் பரிமாணங்களை வரையறுப்பது போன்ற பண்புக்கூறுகளுடன் இது அளவை மாற்றலாம் மற்றும் கட்டமைக்கலாம் .

பொத்தான்கள்

<button>: ஒரு க்குள் பல்வேறு செயல்களைத் தூண்டக்கூடிய ஒரு பொத்தானைக் குறிக்கிறது form. form ஒரு ஜாவாஸ்கிரிப்ட் செயல்பாட்டைச் சமர்ப்பிக்க form அல்லது வேறு பக்கத்திற்குச் செல்ல இது பயன்படுத்தப்படலாம் .

எடுத்துக்காட்டு பயன்பாடு:

<form action="/submit-form" method="post">  
  <label for="name">Name:</label>  
  <input type="text" id="name" name="name" required>  
    
  <label for="email">Email:</label>  
  <input type="email" id="email" name="email" required>  
    
  <label for="message">Message:</label>  
  <textarea id="message" name="message" rows="4" cols="50"></textarea>  
    
  <label for="newsletter">Subscribe to Newsletter:</label>  
  <input type="checkbox" id="newsletter" name="newsletter">  
    
  <label for="color">Favorite Color:</label>  
  <select id="color" name="color">  
    <option value="red">Red</option>  
    <option value="blue">Blue</option>  
    <option value="green">Green</option>  
  </select>  
    
  <button type="submit">Submit</button>  
</form>

புலங்கள்,, , மற்றும் பொத்தான் form உள்ளிட்ட பல்வேறு உறுப்புகளின் பயன்பாட்டை இந்த எடுத்துக்காட்டு காட்டுகிறது. உங்கள் குறிப்பிட்ட தேவைகளின் அடிப்படையில் உறுப்புகள் மற்றும் பண்புக்கூறுகளைத் தனிப்பயனாக்க தயங்க வேண்டாம். input textarea checkbox select dropdown submit form