![[தமிழில்] HTML & CSS Online Course](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0_zjRmsQE0iWNlBSqfVRePPYitmf958RmAd79lMu1aWw2KITJkTwE_ENqkTkC0rMsj_Xrpe5aeI4EIM9aDZJqWK_7inZZWjx_HpHEz1kfukoLUPODXVU9fnQylB1mFqg-L9Rj7NWqpk/s300/300_200_two.png)
HTML INPUT TYPES
button:
இது button-யை குறிக்கின்றது.
Input Button
<html>
<head>
</head>
<body>
<h2>Input Button</h2>
<input type="button" value="Click here!">
</body>
</html>
OUTPUT
checkbox:
ஒன்று அல்லது அதற்கு மேற்பட்ட மதிப்புகளை தேர்வு செய்ய checkbox பயன்படுகிறது.
Checkbox
<html>
<head>
</head>
<body>
<h2>Check boxes</h2>
<form action="car.php">
<input type="checkbox" name="vehicle1" value="Bike">நான் பைக் வைத்துள்ளேன் .
<br>
<input type="checkbox" name="vehicle2" value="Car">நான் கார் வைத்துள்ளேன் .
<br><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
color:
இதன் மூலம் நீங்கள் color-யை தேர்வு செய்து கொள்ளலாம்.
Color Picker
<html>
<head>
</head>
<body>
<h4>Color Picker</h4>
<form action="colors.php">
உனக்கு பிடித்த கலர் ::
<input type="color" name="color" value="#ff0000">
<br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
date:
நமக்கு தேதியை தேர்வு செய்ய பயன்படுகிறது.
Date Field
<html>
<head>
</head>
<body>
<h4>Date Field</h4>
<form action="date.php">
தேதி :
<input type="date" name="bday">
<input type="submit">
</form>
</body>
</html>
OUTPUT
email:
இது email address-யை உள்ளீடு செய்ய உதவுகிறது.
email address-யை தானாகவே சரிபார்க்கப்படுகிறது.தவறு என்றால் நமக்கு தெரியப்படுத்துகிறது.
Email Field
<html>
<head>
</head>
<body>
<h2>Email Field</h2>
<form action="one.php">
ஈமெயில் :
<input type="email" name="email"><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
file:
விருப்பமான file-யை தேர்வு செய்ய உதவுகிறது.
File Upload
<html>
<head>
</head>
<body>
<h3>File upload</h3>
<form action="script_page.php">
Select a file: <input type="file" name="myFile"><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
month:
மாதம் மற்றும் வருடம் போன்றவற்றை தேர்வு செய்ய பயனருக்கு (user) உதவுகிறது.
date picker-யை தருவதன் மூலம் நமக்கு தேதியை தேர்வு செய்ய எளிமை ஆகிறது.
Month Field
<html>
<head>
</head>
<body>
<h2>Month Field</h2>
<form action="script_page.php">
மாதம் மற்றும் வருடம் :
<input type="month" name="mymonth"><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
number:
எண்களை மட்டும் இதனுள் கொடுக்க முடியும்.
Number Field
<html>
<head>
</head>
<body>
<h4>Number Field</h4>
<form action="page.php">
அளவு( 3 முதல் 7 வரை ):
<input type="number" name="qty" min="3" max="7"><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
Number Field Step
<html>
<head>
</head>
<body>
<h4>Number Field Step</h4>
<form action="step_page.php">
அளவு( 10 முதல் 110 வரை ):
<input type="number" name="qty" min="10" max="110" step="5"><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
password:
password field-ல் கொடுக்கப்படும் எழுத்துக்கள் மறைக்கப்படுகின்றன.அவைகள் நம் கண்களுக்கு வட்டங்களாக அல்லது நட்சத்திரங்கள் மாதிரி தெரிகின்றன.
Password Field
<html>
<head>
</head>
<body>
<h2>Password field</h2>
<form action="one.php">
பெயர் :<br>
<input type="text" name="name">
<br>
கடவுச்சொல்:<br>
<input type="password" name="pwd">
<br><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
radio:
radio button பயன்படுத்தி ஒரு மதிப்பினை மட்டும் தேர்வு செய்ய முடியும்.
Radio Button
<html>
<head>
</head>
<body>
<h2>Radio Buttons</h2>
<form action="server.php">
<input type="radio" name="laptop" value="apple" checked> ஆப்பிள்<br>
<input type="radio" name="laptop" value="sony"> சோனி<br>
<input type="radio" name="laptop" value="dell"> டெல்<br><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
reset:
இது ஆரம்ப நிலைக்கு அழைத்து செல்லும்.
Reset Button
<html>
<head>
</head>
<body>
<h2>Reset Button</h2>
<form action="page.php">
அண்ணன் பெயர்:<br>
<input type="text" name="anna_name">
<br>
தம்பி பெயர் :<br>
<input type="text" name="brother_name">
<br><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>
OUTPUT
Search Field
<html>
<head>
</head>
<body>
<h2>Search Field</h2>
<form action="search.php">
Search Box:
<input type="search" name="searchbox"><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
submit:
form-ல் கொடுக்கப்பட்ட அனைத்து தகவல்களையும் எடுத்து கொண்டு server page-க்கு செல்லும் .இதுதான் submit button-னின் வேலை.
Submit Field
<html>
<head>
</head>
<body>
<h2>Submit field</h2>
<form action="one.php">
அம்மா பெயர் :<br>
<input type="text" name="amma_name" value="ராஜ்">
<br>
அப்பா பெயர்:<br>
<input type="text" name="appa_name" value="சங்கீதா">
<br><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
tel:
இதனுள் telephone எண்ணை மட்டும் கொடுக்க முடியும்.
Telephone Field
<html>
<head>
</head>
<body>
<h2>Telephone Field</h2>
<form action="phone.php">
தொலைபேசி எண்:<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{3}" placeholder="xxx-xxxx-xxx"required>
<input type="submit">
<span>Format: 123-1245-678</span>
</form>
</body>
</html>
OUTPUT
text:
ஒரு வரி எழுத்துக்களை குறிக்கின்றது.
Text Field
<html>
<head>
</head>
<body>
<h2>Text field</h2>
<form action="one.php">
அம்மா பெயர் :<br>
<input type="text" name="amma_name">
<br>
அப்பா பெயர்:<br>
<input type="text" name="appa_name">
<br><br>
<input type="submit">
</form>
</body>
</html>
OUTPUT
Time:
நேரத்தை தேர்வு செய்ய உதவுகிறது.
Time Field
<html>
<body>
<h2>Time Field</h2>
<form action="time_page.php">
நேரம்:
<input type="time" name="time_user">
<input type="submit">
</form>
</body>
</html>
OUTPUT
week:
வாரம் மற்றும் வருடத்தை தேர்வு செய்ய முடியும்.
Week Field
<html>
<body>
<h2>Week Field</h2>
<form action="weak_page.php">
வாரம் மற்றும் ஆண்டு:
<input type="week" name="year_week">
<input type="submit">
</form>
</body>
</html>
OUTPUT
No comments:
Post a Comment