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">
HTML
1) type=”button”
<form action="test.php">
  <input type="button" name="test1" id="test1" value="Click here" disabled autofocus>
</form>
ක්ලික් කළ හැකි බොත්තමක් නිර්වචනය කරයි
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
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
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
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
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
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
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 කරන විට පරිශීලකයින්ට දැකීමට හෝ වෙනස් කිරීමට නොහැකි දත්ත ඇතුළත් කිරීමට වෙබ් සංවර්ධකයින්ට ඉඩ දෙයි.
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
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
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
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
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 එක පරිශීලකයෙකුට සීමිත තේරීම් ගණනකින් එකක් පමණක් තෝරා ගැනීමට ඉඩ දෙයි:
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 )
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 කරන බොත්තමකි. දත්ත එහි ආරම්භක අගයන් වෙත නැවත සකසයි
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
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 කල හැකි බොත්තමකි.
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>
දුරකථන අංකයක් ඇතුළත් කිරීම සඳහා යොදා ගනී
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)
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 එකක් නැත).
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 එකක් ඇතුළු කිරීම සඳහා යොදාගනී
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>
පරිශීලකයාට සතියක් සහ වසරක් තේරීමට ඉඩ දෙයි.
Scroll to Top