HTML Input Types
Input Types
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
HTML1) type=”button”
<form action="test.php">
<input type="button" name="test1" id="test1" value="Click here" disabled autofocus>
</form>
ක්ලික් කළ හැකි බොත්තමක් නිර්වචනය කරයි
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
2) type=”checkbox”
<form action="test.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" disabled required autofocus checked>
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
kotu select karana ekak hadanna puluwan
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
checked | ▪️page eka load weddima input eka default select karala thiyanna meka yodaganne. |
3) type=”color”
<form action="test.php">
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000" disabled autofocus><br><br>
<input type="submit" value="submit">
</form>
eka eka color select karanna puluwan meken
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
4) type=”date”
<form action="test.php">
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" value="2024-05-21" readonly disabled max="2025-02-20" min="2024-01-15" pattern="?" title="userta pena podi text ekak" required step="5" autofocus autocomplete="on">
<input type="submit" value="Submit">
</form>
date ekak select karanna puluwan
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
min | ▪️අවසර දී ඇති අවම අගය සඳහන් කරයි |
max | ▪️අවසර දී ඇති උපරිම අගය සඳහන් කරයි |
pattern / title | ▪️input ekata labadimata awashay wana dewal pamanak labadi anek dewal limit kirima meyin siduwe ex= site ekaka email eken regsiter weddi (gmail) witharak bawitha kirimata haki lesa sekasima ▪️title = pattern eke wisthara karalathiyena de userta pehedili karanna podi text ekak ekathu karanna puluwan |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
step | ▪️(Default 1) සංඛ්යා අතර පරතරය නියම කරයි ex = 3 dunnoth 3n 3ta witahray anka denna puluwan (-/+) |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
5) type=”datetime-local”
<form action="test.php">
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime" value="2024-10-05 11:22:33" readonly disabled min="2024-01-15 10:20:10" max="2025-02-20 12:30:20" required step="5" autofocus autocomplete="on">
<input type="submit" value="Submit">
</form>
වසර, මාසය, දිනය සහ වේලාව select karanna puluwan
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
min | ▪️අවසර දී ඇති අවම අගය සඳහන් කරයි |
max | ▪️අවසර දී ඇති උපරිම අගය සඳහන් කරයි |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
step | ▪️(Default 1) සංඛ්යා අතර පරතරය නියම කරයි ex = 3 dunnoth 3n 3ta witahray anka denna puluwan (-/+) |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
6) type=”email”
<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" value="[email protected]" readonly disabled size="50" maxlength="30" minlength="10" multiple pattern="?" title="userta pena podi text ekak" placeholder="Enter Your Email" required autofocus autocomplete="on" dirname="email.dir">
<input type="submit" value="submit">
</form>
වසර, මාසය, දිනය සහ වේලාව select karanna puluwan
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
size | ▪️input එකක් ඇතුලේ දිග වැඩි කරන්න පුළුවන් |
maxlength | ▪️input එකක අවසර දී ඇති උපරිම අක්ෂර සංඛ්යාව සඳහන් කරයි |
minlength | ▪️input එකක අවශ්ය අවම අක්ෂර සංඛ්යාව සඳහන් කරයි |
multiple | ▪️පරිශීලකයෙකුට එක් අගයකට වඩා ඇතුළත් කළ හැකි බව සඳහන් කරයි ▪️user type karaddi hema email ekakma comawakin wen karanna ona |
pattern / title | ▪️input ekata labadimata awashay wana dewal pamanak labadi anek dewal limit kirima meyin siduwe ex= site ekaka email eken regsiter weddi (gmail) witharak bawitha kirimata haki lesa sekasima ▪️title = pattern eke wisthara karalathiyena de userta pehedili karanna podi text ekak ekathu karanna puluwan |
placeholder | ▪️input eka uda type karanna kalin eka gena adahasak ganna text ekak ekathu karanna puluwa input eka uda click karama ara add karapu text eka nathi wenawa |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
dirname | ▪️input eke text dishawa idirpath karanna meka yodagannawa ▪️meke agaya sema witama ( name ) ekata dila thiyena nama wenna ona e namata anthimata (.dir) kiyala ekathu wenna ona |
7) type=”file”
<form action="test.php">
<label for="myfile">Select files:</label>
<input type="file" id="myfile" name="myfile" disabled multiple required autofocus accept="image/*,video/*,.jpg,image/png"><br>
<input type="submit" value="submit">
</form>
file and image/audio/video uplaode karana eka meken karanne
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
multiple | ▪️පරිශීලකයෙකුට එක් අගයකට වඩා ඇතුළත් කළ හැකි බව සඳහන් කරයි |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
accept | ▪️file uploade karaddi file type eka thoranna puluwan. 1. file_extension = gif, .jpg, .png, .doc 2. audio/* = සියලුම sound file 3. video/* = සියලුම video file 4. image/* = සියලුම image file 5. media_type = parameters නොමැති valid media type (link = https://www.iana.org/assignments/media-types/media-types.xhtml ) ▪️file type godak ekathu karanawanam kamawakin passe anith eka ekathu akranna ona |
8) type=”hidden”
<form action="test.php">
<label for="firstname">First name:</label>
<input type="text" id="firstname" name="firstname"><br><br>
<input type="hidden" id="user_id" name="user_id" value="3487" autofocus>
<input type="submit" value="Submit">
</form>
form එකක් submit කරන විට පරිශීලකයින්ට දැකීමට හෝ වෙනස් කිරීමට නොහැකි දත්ත ඇතුළත් කිරීමට වෙබ් සංවර්ධකයින්ට ඉඩ දෙයි.- hidden field එකේ බොහෝ විට form එක submit කරන විට update කළ යුතු database record ගබඩා(store) කරයි.


id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | hiiden ekata agayak denawa hebehey meka userta penne nehe (database ekata userid eka widiyata ganna puluwan) ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
9) type=”image”
<form action="test.php">
<label for="firstname">First name: </label>
<input type="text" id="firstname" name="firstname"><br><br>
<input type="image" id="imagesubmit" disabled autofocus width="48" height="48" src="image3.jpg" alt="Submit">
</form>
image eka submit button ekak widiyata ganna puluwan
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
type | ▪️input type eke okkoma mekata ekathu karanne |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
height | ▪️input එකක උස සඳහන් කරයි. |
width | ▪️input එකක පළල සඳහන් කරයි. |
src | ▪️image eke url eka denne methanata |
alt | ▪️image eka delete unoth e wenuwata pennane (alt) eke thiyena text eka |
x,y(output) | output eke x,y kiyala pennane image eke api click karana thena coordinate deka |
10) type=”month”
<form action="test.php">
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth" value="2025-03" readonly disabled min="2025-01" max="2026-01" required step="3" autofocus autocomplete="on">
<input type="submit" value="submit">
</form>
wasarak saha masayak witharak meke select karanna puluwan
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
min | ▪️අවසර දී ඇති අවම අගය සඳහන් කරයි |
max | ▪️අවසර දී ඇති උපරිම අගය සඳහන් කරයි |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
step | ▪️(Default 1) සංඛ්යා අතර පරතරය නියම කරයි ex = 3 dunnoth 3n 3ta witahray anka denna puluwan (-/+) |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
11) type=”number”
<form action="test.php">
<label for="quantity">Quantity (between 10 and 25):</label>
<input type="number" id="quantity" name="quantity" value="15" readonly disabled size="50" min="10" max="25" placeholder="Enter Your Number" required step="3" autofocus autocomplete="on" dirname="quantity.dir">
<input type="submit" value="submit">
</form>
anka witharak type karanna puluwan
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
size | ▪️input එකක් ඇතුලේ දිග වැඩි කරන්න පුළුවන් |
min | ▪️අවසර දී ඇති අවම අගය සඳහන් කරයි |
max | ▪️අවසර දී ඇති උපරිම අගය සඳහන් කරයි |
placeholder | ▪️input eka uda type karanna kalin eka gena adahasak ganna text ekak ekathu karanna puluwa input eka uda click karama ara add karapu text eka nathi wenawa |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
step | ▪️(Default 1) සංඛ්යා අතර පරතරය නියම කරයි ex = 3 dunnoth 3n 3ta witahray anka denna puluwan (-/+) |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
dirname | ▪️input eke text dishawa idirpath karanna meka yodagannawa ▪️meke agaya sema witama ( name ) ekata dila thiyena nama wenna ona e namata anthimata (.dir) kiyala ekathu wenna ona |
12) type=”password”
<form action="test.php">
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" value="12345678" readonly disabled size="50" minlength="8" maxlength="30" pattern="?" title="userta pena podi text ekak" placeholder="Enter Your Password" required autofocus autocomplete="on" dirname="password.dir"><br>
<input type="submit" value="submit">
</form>
password ekak type karana ekata meka yodagannawa- මුරපද වැනි සංවේදී තොරතුරු ඇතුළත් ඕනෑම form එක HTTPS හරහා send කළ යුතුය.

id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
size | ▪️input එකක් ඇතුලේ දිග වැඩි කරන්න පුළුවන් |
maxlength | ▪️input එකක අවසර දී ඇති උපරිම අක්ෂර සංඛ්යාව සඳහන් කරයි |
minlength | ▪️input එකක අවශ්ය අවම අක්ෂර සංඛ්යාව සඳහන් කරයි |
pattern / title | ▪️input ekata labadimata awashay wana dewal pamanak labadi anek dewal limit kirima meyin siduwe ex= site ekaka email eken regsiter weddi (gmail) witharak bawitha kirimata haki lesa sekasima ▪️title = pattern eke wisthara karalathiyena de userta pehedili karanna podi text ekak ekathu karanna puluwan |
placeholder | ▪️input eka uda type karanna kalin eka gena adahasak ganna text ekak ekathu karanna puluwa input eka uda click karama ara add karapu text eka nathi wenawa |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
dirname | ▪️input eke text dishawa idirpath karanna meka yodagannawa ▪️meke agaya sema witama ( name ) ekata dila thiyena nama wenna ona e namata anthimata (.dir) kiyala ekathu wenna ona |
13) type=”radio”
<form action="test.php">
<input type="radio" id="html" name="fav_language" value="HTML" disabled required autofocus checked>
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
radio button එක පරිශීලකයෙකුට සීමිත තේරීම් ගණනකින් එකක් පමණක් තෝරා ගැනීමට ඉඩ දෙයි:
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️radio eke hema input ekema (name) eka samana wenna ona ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
checked | ▪️page eka load weddima input eka default select karala thiyanna meka yodaganne. |
14) type=”range”
<form action="test.php">
<label for="volume">Volume (between 0 and 50):</label>
<input type="range" id="volume" name="volume" value="25" disabled min="0" max="50" step="5" autofocus>
<input type="submit" value="submit">
</form>
adagena ehata mehata karanna puluwan slider ekak wage ekak thiyenne (number pawicchi kerenne )- Default thiyenne 0-100 dakwa

id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
min | ▪️අවසර දී ඇති අවම අගය සඳහන් කරයි |
max | ▪️අවසර දී ඇති උපරිම අගය සඳහන් කරයි |
step | ▪️(Default 1) සංඛ්යා අතර පරතරය නියම කරයි ex = 3 dunnoth 3n 3ta witahray anka denna puluwan (-/+) |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
15) type=”reset”
<form action="test.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br>
<label for="pin">Enter a PIN:</label>
<input type="text" id="pin" name="pin" maxlength="4"><br>
<input type="reset" id="reset" value="Reset" disabled autofocus>
<input type="submit" value="Submit">
</form>
සියල්ල reset කරන බොත්තමකි. දත්ත එහි ආරම්භක අගයන් වෙත නැවත සකසයි
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
16) type=”search”
<form action="test.php">
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch" value="HTML Learn" readonly disabled size="50" maxlength="30" minlength="10" pattern="?" title="userta pena podi text ekak" placeholder="Search Your Name" required autofocus autocomplete="on" dirname="gsearch.dir">
<input type="submit" value="submit">
</form>
search bar ekak create wenawa- search input සඳහා වඩාත් පොදු name එක q වේ

id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
size | ▪️input එකක් ඇතුලේ දිග වැඩි කරන්න පුළුවන් |
maxlength | ▪️input එකක අවසර දී ඇති උපරිම අක්ෂර සංඛ්යාව සඳහන් කරයි |
minlength | ▪️input එකක අවශ්ය අවම අක්ෂර සංඛ්යාව සඳහන් කරයි |
pattern / title | ▪️input ekata labadimata awashay wana dewal pamanak labadi anek dewal limit kirima meyin siduwe ex= site ekaka email eken regsiter weddi (gmail) witharak bawitha kirimata haki lesa sekasima ▪️title = pattern eke wisthara karalathiyena de userta pehedili karanna podi text ekak ekathu karanna puluwan |
placeholder | ▪️input eka uda type karanna kalin eka gena adahasak ganna text ekak ekathu karanna puluwa input eka uda click karama ara add karapu text eka nathi wenawa |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
dirname | ▪️input eke text dishawa idirpath karanna meka yodagannawa ▪️meke agaya sema witama ( name ) ekata dila thiyena nama wenna ona e namata anthimata (.dir) kiyala ekathu wenna ona |
17) type=”submit”
<form action="test.php">
<label for="firstname">First name: </label>
<input type="text" id="firstname" name="firstname"><br>
<input type="submit" id="submit" name="submit" value="Submit" disabled autofocus>
</form>
submit කල හැකි බොත්තමකි.
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
18) type=”tel”
<form action="/action_page.php">
<label for="phone">Enter a phone number:</label><br><br>
<input type="tel" id="phone" name="phone" value="12345-67890" readonly disabled size="50" maxlength="30" minlength="10" pattern="?" title="userta pena podi text ekak" placeholder="Enter Your Phone Number" required autofocus autocomplete="on" dirname="phone.dir"><br>
<input type="submit" value="Submit">
</form>
දුරකථන අංකයක් ඇතුළත් කිරීම සඳහා යොදා ගනී 
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
size | ▪️input එකක් ඇතුලේ දිග වැඩි කරන්න පුළුවන් |
maxlength | ▪️input එකක අවසර දී ඇති උපරිම අක්ෂර සංඛ්යාව සඳහන් කරයි |
minlength | ▪️input එකක අවශ්ය අවම අක්ෂර සංඛ්යාව සඳහන් කරයි |
pattern / title | ▪️input ekata labadimata awashay wana dewal pamanak labadi anek dewal limit kirima meyin siduwe ex= site ekaka email eken regsiter weddi (gmail) witharak bawitha kirimata haki lesa sekasima ▪️title = pattern eke wisthara karalathiyena de userta pehedili karanna podi text ekak ekathu karanna puluwan |
placeholder | ▪️input eka uda type karanna kalin eka gena adahasak ganna text ekak ekathu karanna puluwa input eka uda click karama ara add karapu text eka nathi wenawa |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
dirname | ▪️input eke text dishawa idirpath karanna meka yodagannawa ▪️meke agaya sema witama ( name ) ekata dila thiyena nama wenna ona e namata anthimata (.dir) kiyala ekathu wenna ona |
19) type=”text”
<form action="test.php">
<label for="firstname">First name: </label>
<input type="text" id="firstname" name="firstname" value="myname" readonly disabled size="50" maxlength="30" minlength="10" pattern="?" title="userta pena podi text ekak" placeholder="Enter Your Name" required autofocus autocomplete="on" dirname="firstname.dir"><br>
<input type="submit" value="Submit">
</form>
single-line text field ekak nirmanaya karay (input wala default enne meka)
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
size | ▪️input එකක් ඇතුලේ දිග වැඩි කරන්න පුළුවන් |
maxlength | ▪️input එකක අවසර දී ඇති උපරිම අක්ෂර සංඛ්යාව සඳහන් කරයි |
minlength | ▪️input එකක අවශ්ය අවම අක්ෂර සංඛ්යාව සඳහන් කරයි |
pattern / title | ▪️input ekata labadimata awashay wana dewal pamanak labadi anek dewal limit kirima meyin siduwe ex= site ekaka email eken regsiter weddi (gmail) witharak bawitha kirimata haki lesa sekasima ▪️title = pattern eke wisthara karalathiyena de userta pehedili karanna podi text ekak ekathu karanna puluwan |
placeholder | ▪️input eka uda type karanna kalin eka gena adahasak ganna text ekak ekathu karanna puluwa input eka uda click karama ara add karapu text eka nathi wenawa |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
dirname | ▪️input eke text dishawa idirpath karanna meka yodagannawa ▪️meke agaya sema witama ( name ) ekata dila thiyena nama wenna ona e namata anthimata (.dir) kiyala ekathu wenna ona |
20) type=”time”
<form action="test.php">
<label for="time1">Select a time:</label>
<input type="time" id="time1" name="time1" readonly disabled min="10:30" max="02:30" required step="5" autofocus autocomplete="on"><br>
<input type="submit" value="submit">
</form>
පරිශීලකයාට වේලාව පමණක් තේරීමට ඉඩ දෙයි (time-zone එකක් නැත).
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
min | ▪️අවසර දී ඇති අවම අගය සඳහන් කරයි |
max | ▪️අවසර දී ඇති උපරිම අගය සඳහන් කරයි |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
step | ▪️(Default 1) සංඛ්යා අතර පරතරය නියම කරයි ex = 3 dunnoth 3n 3ta witahray anka denna puluwan (-/+) |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
21) type=”url”
<form action="test.php">
<label for="homepage">Home Page Url:</label>
<input type="url" id="homepage" name="homepage" value="https://www.amazon.com/" readonly disabled size="50" maxlength="50" minlength="10" pattern="?" title="userta pena podi text ekak" placeholder="Enter Your Web Site Url" required autofocus autocomplete="on" dirname="homepage.dir"><br>
<input type="submit" value="submit">
</form>
URL එකක් ඇතුළු කිරීම සඳහා යොදාගනී
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
size | ▪️input එකක් ඇතුලේ දිග වැඩි කරන්න පුළුවන් |
maxlength | ▪️input එකක අවසර දී ඇති උපරිම අක්ෂර සංඛ්යාව සඳහන් කරයි |
minlength | ▪️input එකක අවශ්ය අවම අක්ෂර සංඛ්යාව සඳහන් කරයි |
pattern / title | ▪️input ekata labadimata awashay wana dewal pamanak labadi anek dewal limit kirima meyin siduwe ex= site ekaka email eken regsiter weddi (gmail) witharak bawitha kirimata haki lesa sekasima ▪️title = pattern eke wisthara karalathiyena de userta pehedili karanna podi text ekak ekathu karanna puluwan |
placeholder | ▪️input eka uda type karanna kalin eka gena adahasak ganna text ekak ekathu karanna puluwa input eka uda click karama ara add karapu text eka nathi wenawa |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |
dirname | ▪️input eke text dishawa idirpath karanna meka yodagannawa ▪️meke agaya sema witama ( name ) ekata dila thiyena nama wenna ona e namata anthimata (.dir) kiyala ekathu wenna ona |
22) type=”week”
<form action="test.php">
<label for="week">Select a week:</label>
<input type="week" id="week" name="week" value="2025-W08" readonly disabled min="2025-W01" max="2025-W13" required step="2" autofocus autocomplete="on">
<input type="submit" value="Submit">
</form>
පරිශීලකයාට සතියක් සහ වසරක් තේරීමට ඉඩ දෙයි.
id | ▪️normel id ekak denna (javascript css ehama add karaddi meka bawitha karanna puluwan) |
name | ▪️data server ekata yawaddi name eke dila thiyena nama thamay server eka peththen penanne |
type | ▪️input type eke okkoma mekata ekathu karanne |
value | ▪️input ekaka agaya niyama karay 🔹wiwida input sadaha value eka wenas lesa bawitha we 1. button/reset/submit wala button eke nama sadaha bawitha we 2. text/hidden/email/password/color/date/month/week/number/range/search/tel/url/ wala default name(value) ekak ekathu kirimata bawitha we 3. checkbox/radio/ wala form eka submit karama server ekata yawana agaya sadaha bawitha we |
readonly | ▪️input එක කියවීමට පමණක් බව සඳහන් කරයි |
disabled | ▪️input එක disable කළ යුතු බව සඳහන් කරයි |
min | ▪️අවසර දී ඇති අවම අගය සඳහන් කරයි |
max | ▪️අවසර දී ඇති උපරිම අගය සඳහන් කරයි |
required | ▪️form eka submit karanna kalin aniwaren fill karanna ona bawa sadahan karay |
step | ▪️(Default 1) සංඛ්යා අතර පරතරය නියම කරයි ex = 3 dunnoth 3n 3ta witahray anka denna puluwan (-/+) |
autofocus | ▪️page eka loade wena kota kelinma adala input ekata witharak automatically focus wenawa |
autocomplete | ▪️Browser eken kalin bawithakarapu data automatically fill karanawa input eke ▪️autocomplete Attribute Value link = https://html1.my2025.site/forms/html-input-attributes/autocomplete-attribute/ |