HTML Input প্রতিভাতি

value প্রতিভাতি

value প্রতিভাতি ক্ষেত্রের প্রাথমিক মূল্য নির্দিষ্ট করে:

উদাহরণ

<form action="">
 প্রথম নাম:<br>
<input type="text" name="firstname" value="Bill">
<br>
 পশ্চিমবর্তী নাম:<br>
<input type="text" name="lastname">
</form>

স্বয়ং প্রয়াস করুন

readonly প্রতিভাতি

readonly প্রতিভাতি ক্ষেত্র রক্ষিত হওয়ার প্রতিভাতি নির্দিষ্ট করে (সংশোধন করা যাবে না):

উদাহরণ

<form action="">
 প্রথম নাম:<br>
<input type="text" name="firstname" value="Bill" readonly>
<br>
 পশ্চিমবর্তী নাম:<br>
<input type="text" name="lastname">
</form>

স্বয়ং প্রয়াস করুন

readonly প্রতিভাতি কোন মূল্য প্রয়োজন না। তা readonly="readonly"-এর সমতুল্য।

disabled প্রতিভাতি

disabled প্রতিভাতি ক্ষেত্র নিষ্ক্রিয় হওয়ার প্রতিভাতি নির্দিষ্ট করে:

নিষ্ক্রিয় তত্ত্বগুলি ব্যবহারযোগ্য এবং ক্লিক করা যাবে না。

নিষ্ক্রিয় তত্ত্বগুলি ফর্ম প্রক্রিয়াকরণ করা হবে না。

উদাহরণ

<form action="">
 প্রথম নাম:<br>
<input type="text" name="firstname" value="Bill" disabled>
<br>
 পশ্চিমবর্তী নাম:<br>
<input type="text" name="lastname">
</form>

স্বয়ং প্রয়াস করুন

disabled প্রতিভাতি কোন মূল্য প্রয়োজন না। তা disabled="disabled"-এর সমতুল্য।

size প্রতিভাতি

size প্রতিভাতি ক্ষেত্রের মাপ (অক্ষর অনুযায়ী):

উদাহরণ

<form action="">
 প্রথম নাম:<br>
<input type="text" name="firstname" value="Bill" size="40">
<br>
 পশ্চিমবর্তী নাম:<br>
<input type="text" name="lastname">
</form>

স্বয়ং প্রয়াস করুন

maxlength প্রতিভাতি

maxlength প্রতিভাতি নিবেদন ক্ষেত্রে মহত্তম পরিমাণ নির্দিষ্ট করে:

উদাহরণ

<form action="">
 প্রথম নাম:<br>
<input type="text" name="firstname" maxlength="10">
<br>
 পশ্চিমবর্তী নাম:<br>
<input type="text" name="lastname">
</form>

স্বয়ং প্রয়াস করুন

যদি maxlength এক্সপ্রেশন সম্পূর্ণ করা হয়, তবে ইনপুট কন্ট্রোলার অনুমদিত হয়নি যেমন অনুমদিত সংখ্যক অক্ষর বেশি হবে。

এই এক্সপ্রেশন কোনও ফিডব্যাক প্রদান করবে না। যদি ব্যবহারকারীকে প্রচেষ্টা করতে হয়, তবে JavaScript কোডকে লিখতে হবে。

মন্তব্য:ইনপুট সীমিতির কোনও সম্ভাবনা নেই। JavaScript অনেকগুলি পদ্ধতি প্রদান করে অনৈচ্ছিক ইনপুটকে বাধা দিতে। যদি ইনপুটকে নিরাপদভাবে সীমিত করতে হয়, তবে স্বীকৃতিদাতা (সার্ভার) উভয়ভাবেই সীমিতি পরীক্ষা করতে হবে。

HTML5 এক্সপ্রেশন

HTML5 তে <input> কে নিচের এক্সপ্রেশন যোগ করেছে:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height এবং width
  • list
  • min এবং max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

এবং <form> কে যেসব এক্সপ্রেশন যোগ করা হবে:

  • autocomplete
  • novalidate

autocomplete এক্সপ্রেশন

autocomplete এক্সপ্রেশন ফর্ম বা ইনপুট ফিল্ডকে স্বনিয়োগকারী করা হবে কি না নির্ধারণ করে。

যখন স্বনিয়োগকারী হওয়ার সময়কালের সময়, ব্রাউজার ব্যবহারকারীর পূর্ববর্তী ইনপুট মান ভিত্তিতে মান পূর্ণ করবে。

সুঝান:আপনি ফর্মের autocomplete সম্পূর্ণ করা করতে পারেন on, এবং বিশেষ ইনপুট ফিল্ড off করতে পারেন, এবং একইভাবে অপসারণ করতে পারেন。

autocomplete এক্সপ্রেশন প্রযোজ্য হয় form এবং নিচের <input> টাইপ: text, search, url, tel, email, password, datepickers, range এবং color。

উদাহরণ

স্বনিয়োগকারী হওয়ার সময়কালের HTML ফর্ম (কোনও ইনপুট ফিল্ড off):

<form action="action_page.php" autocomplete="on">
   প্রথম নাম:<input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   E-mail: <input type="email" name="email" autocomplete="off"><br>
   <input type="submit">
</form>

স্বয়ং প্রয়াস করুন

সুঝান:在某些浏览器中，您也许需要手动启用自动完成功能。

novalidate 属性

novalidate 属性属于 <form> 属性。

如果设置，则 novalidate 规定在提交表单时不对表单数据进行验证。

উদাহরণ

指示表单在被提交时不进行验证：

<form action="action_page.php" novalidate>
   E-mail: <input type="email" name="user_email">
   <input type="submit">
</form>

স্বয়ং প্রয়াস করুন

autofocus 属性

autofocus 属性是布尔属性。

如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点。

উদাহরণ

使 "First name" 输入字段在页面加载时自动获得焦点：

First name:<input type="text" name="fname" autofocus>

স্বয়ং প্রয়াস করুন

form 属性

form 属性规定 <input> 元素所属的一个或多个表单。

সুঝান:如需引用一个以上的表单，请使用空格分隔的表单 id 列表。

উদাহরণ

输入字段位于 HTML 表单之外（但仍属表单）：

<form action="action_page.php" id="form1">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
</form>
 Last name: <input type="text" name="lname" form="form1">

স্বয়ং প্রয়াস করুন

formaction 属性

formaction 属性规定当提交表单时处理该输入控件的文件的 URL。

formaction 属性覆盖 <form> 元素的 action 属性。

formaction 属性适用于 type="submit" 以及 type="image"。

উদাহরণ

拥有两个两个提交按钮并对于不同动作的 HTML 表单：

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formaction="demo_admin.asp"
   value="Submit as admin">
</form>

স্বয়ং প্রয়াস করুন

formenctype 属性

formenctype 属性规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）。

formenctype 属性覆盖 <form> 元素的 enctype 属性。

formenctype প্রতিভূতি type="submit" এবং type="image"-এর জন্য ব্যবহার্য

উদাহরণ

ডিফল্ট এনকোডিং এবং "multipart/form-data" (দ্বিতীয় সমর্থনকারী) এনকোডিং সমস্তবিন্যাস ডাটা (form-data) পাঠানো হবে:

<form action="demo_post_enctype.asp" method="post">
   First name: <input type="text" name="fname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formenctype="multipart/form-data">
   value="Submit as Multipart/form-data">
</form>

স্বয়ং প্রয়াস করুন

formmethod প্রতিভূতি

formmethod প্রতিভূতি সমস্তবিন্যাস ডাটা (form-data) পাঠাতে ব্যবহৃত HTTP পদ্ধতিকে নির্দিষ্ট করে

formmethod প্রতিভূতি <form> মুহূর্তের method প্রতিভূতি মিটায়

formmethod প্রতিভূতি type="submit" এবং type="image"-এর জন্য ব্যবহার্য

উদাহরণ

দ্বিতীয় সমর্থনকারী সমস্তবিন্যাস সমস্তবিন্যাসের HTTP পদ্ধতিকে মিটায়

<form action="action_page.php" method="get">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit">
   <input type="submit" formmethod="post" formaction="demo_post.asp">
   value="Submit using POST">
</form>

স্বয়ং প্রয়াস করুন

formnovalidate প্রতিভূতি

novalidate প্রতিভূতি একটি বল্টি প্রতিভূতি

যদি সমর্থন করা হয়, তবে সমস্তবিন্যাস সম্পাদন করার সময় <input> মুহূর্তের পরীক্ষণ না করা হবে

formnovalidate প্রতিভূতি <form> মুহূর্তের novalidate প্রতিভূতি মিটায়

formnovalidate প্রতিভূতি type="submit"-এর জন্য ব্যবহার্য

উদাহরণ

দুটি সমর্থনকারী সমস্তবিন্যাস (পরীক্ষণ এবং পরীক্ষণ না করা):

<form action="action_page.php">
   E-mail: <input type="email" name="userid"><br>
   <input type="submit" value="Submit"><br>
   <input type="submit" formnovalidate value="Submit without validation">
</form>

স্বয়ং প্রয়াস করুন

formtarget প্রতীকটি

formtarget প্রতীকটি নির্দিষ্ট নাম বা শব্দকোষ দ্বারা সম্মিলিত হয়, যা ফর্ম সম্মিলিত হওয়ার পরে প্রাপ্ত প্রতিক্রিয়াটিকে কোথায় দেখাবে

formtarget প্রতীকটি <form> ইউনিটের target প্রতীককে অবরূপ করে

formtarget প্রতীকটি type="submit" এবং type="image"-এর সাথে ব্যবহৃত হতে পারে।

উদাহরণ

এই ফর্মটিতে দুটি সাবমিট বাটন আছে, যা ভিন্ন লক্ষ্য উইন্ডোতে কাজ করে:

<form action="action_page.php">
   First name: <input type="text" name="fname"><br>
   Last name: <input type="text" name="lname"><br>
   <input type="submit" value="Submit as normal">
   <input type="submit" formtarget="_blank">
   value="Submit to a new window">
</form>

স্বয়ং প্রয়াস করুন

height এবং width প্রতীকটি

height এবং width প্রতীকটি <input> ইউনিটের উচ্চতা এবং প্রস্থ নির্দিষ্ট করে

height এবং width প্রতীকটি <input type="image">-এর জন্য ব্যবহৃত হয়।

মন্তব্য:সবসময় ছবির মাপ নির্দিষ্ট করুন। যদি ব্রাউজার ছবির মাপ জানতে পারে না, তবে পানেলটি ছবি লোড হওয়ার সময় ভ্রমণ করবে।

উদাহরণ

ছবিটিকে সাবমিট বাটন হিসাবে ব্যবহার করুন এবং height এবং width প্রতীক নিয়ে নিশ্চিত করুন:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

স্বয়ং প্রয়াস করুন

list প্রতীক

list প্রতীক উল্লেখিত <datalist> ইউনিটটি <input> ইউনিটের প্রিডিফাইন্ড অপশনগুলি ধারণ করে।

উদাহরণ

ব্যবহার করে <datalist> প্রিডিফাইন্ড মান সেট করুন <input> ইউনিটকে:

<input list="browsers">
<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Safari">

স্বয়ং প্রয়াস করুন

min 和 max 属性

min 和 max 属性规定 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

উদাহরণ

具有最小和最大值的 元素：

Enter a date before 1980-01-01:

 Enter a date after 2000-01-01:

 Quantity (between 1 and 5):

স্বয়ং প্রয়াস করুন

multiple 属性

multiple 属性是布尔属性。

如果设置，则规定允许用户在 元素中输入一个以上的值。

multiple 属性适用于以下输入类型：email 和 file。

উদাহরণ

接受多个值的文件上传字段：

请选择图片：

স্বয়ং প্রয়াস করুন

pattern 属性

pattern 属性规定用于检查 元素值的正则表达式。

pattern 属性适用于以下输入类型：text、search、url、tel、email、and password。

সুঝান:请使用全局的 title 属性对模式进行描述以帮助用户。

সুঝান:请在我们的 JavaScript 教程中学习更多有关正则表达式的知识。

উদাহরণ

ইনপুট ফিল্ডটি শুধুমাত্র তিনটি অক্ষরমান হতে পারে (কোনও সংখ্যা বা বিশেষ চিহ্ন নেই):

Country code: 
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

স্বয়ং প্রয়াস করুন

placeholder প্রকৃতি

placeholder প্রকৃতি এই ইনপুট ফিল্ডের প্রত্যাশিত মান বর্ণনা করতে ব্যবহৃত হয় (মাটার মান বা ফরম্যাটের সংক্ষিপ্ত বর্ণনা)。

এই টুইটারটি ব্যবহারকারীর ইনপুট করার আগে ইনপুট ফিল্ডে দেখানো হবে。

placeholder অ্যাট্রিবিউটটি text, search, url, tel, email এবং password ইনপুট টাইপগুলির প্রয়োগের জন্য প্রযোজ্য

উদাহরণ

প্লেসহোল্ডার টেক্সট সহ ইনপুট ফিল্ড:

<input type="text" name="fname" placeholder="First name">

স্বয়ং প্রয়াস করুন

required অ্যাট্রিবিউট

required অ্যাট্রিবিউটটি বুল অ্যাট্রিবিউট

যদি সম্পূর্ণ করা হয়, তবে ফর্ম সম্পাদন প্রক্রিয়ায় ইনপুট ফিল্ডটি পূর্ণ করা আবশ্যক

required অ্যাট্রিবিউটটি text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file ইনপুট টাইপগুলির প্রয়োগের জন্য প্রযোজ্য

উদাহরণ

বাধ্যতামূলক ইনপুট ফিল্ড:

Username: <input type="text" name="usrname" required>

স্বয়ং প্রয়াস করুন

step অ্যাট্রিবিউট

step অ্যাট্রিবিউটটি <input> ইনপুটটির সঠিক সংখ্যা সম্পর্কিত সময় নির্দিষ্ট করে

উদাহরণ: যদি step="3" হয়, তবে সঠিক সংখ্যা -3, 0, 3, 6, ইত্যাদি

সুঝান:step অ্যাট্রিবিউটটি max এবং min অ্যাট্রিবিউটগুলির সঙ্গে মিলিত হয়ে সঠিক মানের সময় রেঞ্জ তৈরি করতে পারে

step অ্যাট্রিবিউটটি number, range, date, datetime, datetime-local, month, time এবং week ইনপুট টাইপগুলির প্রয়োগের জন্য প্রযোজ্য

উদাহরণ

বিশেষ সংখ্যালঘু সংখ্যা সম্পর্কিত ইনপুট ফিল্ড:

<input type="number" name="points" step="3">

স্বয়ং প্রয়াস করুন