![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
HTML FORM
<form> element:
நீங்கள் form-இல் கொடுக்கப்படும் அனைத்து தகவல்களையும் சேகரிப்பது இந்த <form> element-இன் வேலை ஆகும்.
<form><input> Element:
.
.
form element
.
.
</form>
form element-இல் பயன்படுத்தப்படும் மிக முக்கியமான element-ஆக input element கருதப்படுகிறது.இந்த input element-இல் இருக்கின்ற type என்ற attributes பயன்படுத்தி நாம் பல வழிகளில் input element-யை பயன்படுத்த முடியும்.
ex:
<input type ="text"> ஒரு வரி textbox-யை குறிக்கின்றது.
<input type ="radio">இது radio button-யை வரையறுக்கிறது.
<input type ="submit"> submit பட்டனை வரையறுக்கிறது.
submit button:
submit button-யை கிளிக் செய்யும் போது user கொடுத்த அனைத்து தகவல்களையும் எடுத்து server page-க்கு செல்லும்.இது தான் submit button இன் வேலை ஆகும்.
Action Attributes:
<form action="action.php"> நீங்கள் submit பட்டனை கிளிக் செய்யும் போது action attributes செயல்படுத்தப்படும்.
ex:
submit button-யை அழுத்தும்போது action ="action.php" action attributes-இல் கொடுக்கப்பட்டுள்ள action.php-க்கு user கொடுத்த அனைத்து தகவல்களையும் எடுத்து செல்லும்.
ex 2: <form action="">
இப்படி கொடுக்கப்பட்டு நீங்கள் submit பட்டனை கிளிக் செய்யும் போது ,இப்பொழுது நீங்கள் எந்த வலை பக்கத்தில் இருக்கின்றிர்களோ ,அதே பக்கத்தில் தான் action நடக்கும் .
ஏனென்றால்,action என்ற attributes-இல் நீங்கள் எந்தவொரு மதிப்பும் கொடுக்காமல் empty-ஆக கொடுத்து இருக்கீர்கள்.
Target attributes:
நீங்கள் submit button-யை அழுத்தினால் output ஆனது new tab-இல் திறக்கப்படும் அல்லது அதே பக்கத்தில் திறக்கப்படும்.
target ="_self" என்று கொடுக்கும்பொழுது நீங்கள் பயன்படுத்தி கொண்டு இருக்கும் தற்போதையே பக்கத்தில் திறக்கப்படும்.
target ="_blank" என்று கொடுக்கும்பொழுது ஒரு புதிய window tab-இல் திறக்கப்படும்.
method attributes:
method attributes இரண்டு வகை இருக்கின்றது.
- get
- post
GET:
ஒரு form-யை சமர்ப்பிக்கும்போது default-ஆக get method பயன்படுகிறது.
இந்த get method-ன் வேலை என்னவென்றால் form-இல் நாம் கொடுக்கப்படும் அனைத்து தகவல்களும் URL வழியாக server-க்கு அனுப்பப்படுகிறது.இவ்வாறு அனுப்பப்படுவதால் நாம் கொடுத்த அனைத்து தகவல்களும் URL-இல் தெரியும்.
POST:
POST method-ன் வேலை என்னவென்றால் form-இல் இருக்கும் தகவல்களை மறைமுகமாக server-க்கு அனுப்புகிறது.இதனால் நமது தகவல்களை யாராலும் பார்க்க முடியாது.
Text Input
<html>
<head>
</head>
<body>
<h1>Text Input</h1>
<form>
முதல் பெயர்:<br>
<input type="text" name="firstname">
<br>
கடைசி பெயர்:<br>
<input type="text" name="lastname">
</form>
</body>
</html>
OUTPUT
Radio Button Input
<html>
<head>
</head>
<body>
<h1>Radio Button Input</h1>
<form>
<input type="radio" name="number" value="one" checked> ஒன்று <br>
<input type="radio" name="number" value="two"> இரண்டு <br>
<input type="radio" name="number" value="three"> மூன்று
</form>
</body>
</html>
OUTPUT
Submit Button
<html>
<head>
</head>
<body>
<h1>HTML Submit Button</h1>
<form action="click.php">
முதல் பெயர்:<br>
<input type="text" name="firstname" value="Raj">
<br>
கடைசி பெயர்:<br>
<input type="text" name="lastname" value="Kumar">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT
Fieldset Element
<html>
<head>
</head>
<body>
<h2>Fieldset Element</h2>
<form action="click.php">
<fieldset>
<legend>தனிப்பட்ட தகவல்:</legend>
முதல் பெயர்:<br>
<input type="text" name="firstname" value="Raj">
<br>
கடைசி பெயர்:<br>
<input type="text" name="lastname" value="Kumar">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
OUTPUT
GET METHOD
<html>
<head>
</head>
<body>
<h1>HTML GET Method</h1>
<form action="click.php" method="GET">
முதல் பெயர்:<br>
<input type="text" name="firstname" value="Raj">
<br>
கடைசி பெயர்:<br>
<input type="text" name="lastname" value="Kumar">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT
POST METHOD
<html>
<head>
</head>
<body>
<h1>HTML POST Method</h1>
<form action="click.php" method="POST">
முதல் பெயர்:<br>
<input type="text" name="firstname" value="Raj">
<br>
கடைசி பெயர்:<br>
<input type="text" name="lastname" value="Kumar">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT
No comments:
Post a Comment