Free Online Website desinging Training in Tamil language

[ஆதித்தன்]

இப்பொழுது நாம் பார்க்க இருப்பது <form> tag. இதன் பயன்பாடு என்பது மிகவும் குறைவுதான். ஆனாலும், வலைப்பக்கத்தில் பயன்படுத்தும் ஒவ்வொரு ஆப்சனும் எவ்வாறு உருவாக்கப்படுகிறது என்ற கோடிங்க் விவரம் நமக்குத் தெரிய வேண்டும் என்பதற்காக இப்பாகத்தை தொடர்கிறேன். மேலும், நாம் இவற்றை பயன்படுத்தி, பிரபல தளத்திற்கு இணையாக நம் தளத்தினை வடிவமைக்க தெரிந்து கொள்ள வேண்டும்.

<form> tag , <input> என்ற கண்ட்ரோல் டேக்குடன் சேர்ந்து Text, Button , Radio Button, Checkbox, Password box, Submit button, Reset button என நாம் இணையத்தில் அங்கங்கு பயன்படுத்தும் ஆப்சன்களை உருவாக்க பயன்படுத்துகிறது. அதுபோல், <textarea>, <select> , <label> ஆகிய tad உடனும் இணைந்து பார்ம் டேக் செயல்படுகிறது. இவற்றினை நமது தளத்தில் எவ்வாறு பயன்படுத்தலாம் என்பதனை எடுத்துக்காட்டு கோடிங்க் உடன் பார்க்கலாம்.

[ஆதித்தன்]

<from> என்ற டேக்கைப் பயன்படுத்தி வரும் டேக்குகளின் வகைகளைப் முந்தைய பதிவில் பார்த்தோம். தற்பொழுது அவைகளின் கோடிங்க் முறையுடன் எவ்வாறு இணையப்பக்கத்தில் பயன்படுத்தலாம் என்பதனைப் பார்க்கலாம்.

<input> : Text Fields
<input> tag பயன்படுத்தி, ஒர் சின்ன பாக்ஸில் பெயர் அல்லது இமெயில் ஐடி வாங்குவதற்காக பயன்படுகிறது. கோடிங்கின் உள்ளே வரும் attribute மற்றும் அதன் value-களைப் பார்த்துக் கொள்ளுங்கள்.

Example Code:
<form name=myText>
<input type="text" name=myText value="Enter Your Full Name">
</form>

மேலுள்ள கோடிங்கில் Form-ல் Name என்ற ஒர் attribute கேட்கப்பட்டுள்ளது என்பதனை கவனித்துக் கொள்ளுங்கள். அதில் கொடுக்கும் பெயர் define செய்யப்பட்டு சர்வர் ஸைடு ஸ்கிரிப்ட் லேங்குவேஜ் மூலம் ரன் செய்யப்படும். மற்றும், input tag உள்ளேயும் பல attribute வருகின்றன. அதில் type என்பதில் text கொடுக்க வேண்டும். அடுத்து பெயர் நாம் சரியாக கொடுக்க வேண்டும். value என்பது டிபால்ட்டாக அந்த பாக்சில் தெரிய வேண்டியதை/கேள்வியைக் கொடுக்கலாம். பின்னர், தள பார்வையாளர், அந்த பாக்சில் கேட்டபடி கொடுத்து சப்மிட் செய்தால், அது சர்வர் லேங்குவேஜ்(example: php script) மூலம் டேட்டா பேசில் சேவ் ஆகும். நமது தளமும் php Script மூலம் இயங்கித்தான் இவ்வாறு நீங்கள் பதிவு செய்வது போன்றவை எல்லாம் சேவ் செய்து வெளியிடுகிறது. ஆனால், தற்பொழுது நாம் படிப்பது நார்மல் HTML டிசைன் மட்டும் தான் என்பதால் சற்று தெரிந்து கொள்ளுங்கள்.

Text Field அளவு எவ்வளவு இருக்க வேண்டும் என்பதனை define செய்ய size என்ற attribute பயன்படுகிறது.

<form name=myText>
<input type="text" name=myText value="Enter Your Full Name" size=50>
</form>

Non Editable Text Field , அதாவது இதுவரைக் கொடுத்த டெக்ஸ் பாக்சில் தள பார்வையாளர்கள் தங்களது பெயர்/இமெயில் ஐடி/ஊர் என நாம் கேட்பதை டைப் செய்ய முடியும். ஆனால், நாம் கோடிங்கில் readonly என்பதனைக் கொடுத்துவிட்டால், அவர்களால் பாக்சை நிரப்ப முடியாது, நார்மல் தளத்தினை பார்வையிடுவதுபோல் இதனையும் பார்வையிடத்தான் முடியும்.

<form name=myText>
<input type="text" name=myText value="Enter Your Full Name" readonly>
</form>

Result :

Enter Your Full Name

Input Button Tag
தளத்தில் பட்டன் டைப் லிங்க் உருவாக்க இந்த டேக் பயன்படுகிறது.

Example Code:
<form name=myform>
<input type="button" name=myButton value="HAI">
</form>

Result:

படுகையில் லெப் சைடு காலத்தில் சர்ச் பட்டனுக்கு கீழ் under the Sea என்பது கூட பட்டன் கோடிங்க் மூலம் கொடுத்தது, லிங்க் சேர்க்க வில்லை.

பட்டனை எவரும் கிளிக் செய்ய முடியாதப்படி செய்ய, disabled என்பதனை அடிசனலாகச் சேர்த்தால் போதும்.
<form name=myform>
<input type="button" name=myButton value="No button" disabled>
</form>

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

<form name=myform>
<input type="image" name=myImgButton src="http://padugai.com/tamilonlinejob/image ... smile1.gif" width=50 height=20>
</form>


இவற்றை செய்து பாருங்கள், அடுத்தப் பாகத்தில் மேலும் உள்ள Input tag உடன் வருகிறேன்.

தொடரும்...

[ஆதித்தன்]

Input Type Radio Button:

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

ரேடியோ பட்டன் உருவாக்க input tag-ல் type என்பதன் வேலிவ் radio என்று கொடுத்தால் போதும். ரேடியோ பட்டனை நான்கு விதமாகப் பயன்படுத்தலாம்.

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

Radio Button

Example Code:

<form name=myform>
<input type="radio" name=myradio value="1">one
<input type="radio" name=myradio value="2">two
<input type="radio" name=myradio value="3">three
</form>

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

Example Code:
<form name=myform>
<input type="radio" name=myradio1 value="1">one
<input type="radio" name=myradio2 value="2">two
<input type="radio" name=myradio3 value="3">three
</form>

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

Pre selected RadioButton
Example Code:
<form name=myform>
<input type="radio" name=myradio value="1" >one
<input type="radio" name=myradio value="2" checked>two
<input type="radio" name=myradio value="3" >three
</form>

4. வாக்கெடுப்பு காலம் முடிந்துவிட்டது என்றால் பின்னர் எவரையும் வாக்களிக்கவிடாமல் தடுக்க, disabled என்ற கூடுதல் வார்த்தை சேர்த்தால் போதும். எவரும் வாக்கு அளிக்க முடியாது.

Non Editable / Un selectable radio
Example Code:
<form name=myform>
<input type="radio" name=myradio value="1" disabled>one
<input type="radio" name=myradio value="2" checked disabled>two
<input type="radio" name=myradio value="3" disabled>three
</form>

இதனைச் செய்து பாருங்கள், அடுத்து செக்பாக்ஸ் கோடிங்க் பற்றிப் பார்க்கலாம்.

தொடரும்....