Jassif Team Institution

HTML Buttons

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

HTML Button

HTML <button> உறுப்பு ஒரு கிளிக் செய்யக்கூடிய பொத்தானை வரையறுக்கிறது.

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

Example

<button>Click Me</button>

Styling HTML Buttons

பொத்தான்கள் பெரும்பாலும் CSS உடன் ஸ்டைல் செய்யப்படுகின்றன:

Example

<button class="mytestbtn">Green Button</button>

Disabled Buttons

ஒரு பொத்தானை கிளிக் செய்ய முடியாததாக மாற்ற disabled பண்புக்கூறைப் பயன்படுத்தவும்:

Example

<button disabled>Disabled Button</button>

Button with JavaScript

பயனர் ஒரு பொத்தானைக் கிளிக் செய்யும் போது onclick பண்புக்கூறைப் பயன்படுத்தி JavaScript ஐ இயக்கலாம்:

Example

<button onclick="alert('Hello!')">Click Me</button>

Button Types

type பண்புக்கூறு ஒரு பொத்தான் கிளிக் செய்யப்பட்டால் என்ன செய்கிறது என்பதை வரையறுக்கிறது. மூன்று பொத்தான் வகைகள் உள்ளன:

type="button" - A normal clickable button (does nothing by default)
type="submit" - Submits a form
type="reset" - Resets all form fields

<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>

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

இப்போதைக்கு, ஒரு submit பொத்தான் படிவத் தரவை சேவையகத்திற்கு அனுப்புகிறது, அதே நேரத்தில் ஒரு reset பொத்தான் படிவத்தை அழிக்கிறது என்பதை அறிந்து கொள்ளுங்கள்:

Example

<form action="/action_page.php">
  First name: <input type="text" name="fname">
  <button type="submit">Submit</button>
  <button type="reset">Reset Form</button>
</form>

HTML Button Reference