webdevlinux - logo Web Dev Linux

Typed inputs

දත්ත ටයිප් කල හැකි ආකෘති පත්‍ර අංග පිළිබඳව මෙහිදී සලකා බැලේ.

Typed input types Input types

පහත උදාහරණය අත්හදා බලන්න.

FILE : typed-input.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Typed input</title>
</head>
<body>
<form>
<p>Name : <input placeholder="Enter your name"></p>
<p>Email : <input type="email" required autofocus></p>
<p>Nick : <input maxlength="5" size="4"></p>
<p>Password : <input type="password"></p>
<p>Age : <input type="number"></p>
<p>Read only : <input value="This is readonly" readonly></p>
<p>Disabled : <input value="This is disabled" disabled></p>
<input type="submit">
</form>
</body>
</html>

පැහැදිලිකිරීම

ඉහත උදාහරණයේ සඳහන් elements හා attributes ගැන පැහැදිලි කිරීම පහත දක්වා ඇත.

placeholder="Enter your name"
අදාල ආකෘති පත්‍ර අංගය පිළිබඳව පරිශීලකයාට ඉඟියක් ලබා දීමට මෙම attribute එක යොදා ගැනේ.
<input type="number">
මෙමගින් ඉලක්කම් ටයිප් කල හැකි ආකෘති පත්‍ර අංගයක් නිරූපණය කෙරේ.
<input type="email">
මෙමගින් email address ටයිප් කල හැකි ආකෘති පත්‍ර අංගයක් නිරූපණය කෙරේ. Email address එකකට වඩා ටයිප් කිරීමේදී කොමාව භාවිතා කරන්න.
<input type="password">
මෙමගින් password එකක් ටයිප් කල හැකි ආකෘති පත්‍ර අංගයක් නිරූපණය කෙරේ.
required
මෙම attribute එක යම් ආකෘති පත්‍ර අංගයක භාවිතා වන විට එය පිරවීම අනිවාර්ය වේ. එසේ නොමැතිව ආකෘති පත්‍රය submit කල නොහැක.
maxlength="5"
ආකෘති පත්‍ර අංගයක ටයිප් කල හැකි උපරිම අකුරු ප්‍රමාණය නිරූපණය කිරීමට යොදා ගැනේ.
size="4"
ආකෘති පත්‍ර අංගයක පෙනෙන දිග වෙනස් කිරීමට යොදා ගැනේ.
autofocus
මෙම attribute එක යම් ආකෘති පත්‍ර අංගයක භාවිතා වන විට web page එක load වූ පසු cursor එක එම ආකෘති පත්‍ර අංගයෙහි පිහිටයි. එක් ආකෘති පත්‍රයක් තුල මෙම attribute එක භාවිතා කල හැක්කේ එක් වරක් පමණි.
readonly
මෙම attribute එක යම් ආකෘති පත්‍ර අංගයක භාවිතා වන විට එහි ඇති දත්ත වෙනස් කල නොහැක.
disabled
මෙම attribute එක භාවිතා කර ඇති ආකෘති පත්‍ර අංගයක දත්ත, ආකෘති පත්‍රය submit කිරීමේදී server එක වෙත යවනු නොලැබේ.