آموزش انواع input ها در HTML

در زیر، انواع مختلف input هایی که می توانیم در HTML مورد استفاده قرار دهیم را مشاهده می کنید:

• <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">

 نکته: مقدار پیش فرض برای خصوصیت type در inputها، "text" است.

بررسی نوع text در input

دستور <input type="text"> ،یک فیلد متنیِ تک خطی را تعریف می کند:

<form action="/action_page.php">
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="ارسال">
</form>

بررسی نوع password در input

عبارت <input type="password"> یک فیلد پسورد را تعریف می کند:

<form action="/action_page.php">
  <label for="username">نام کاربری:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">پسورد:</label><br>
  <input type="password" id="pwd" name="pwd"><br><br>
  <input type="submit" value="ارسال">
</form>

نکته: کاراکترهای فیلد پسورد، مخفی هستند و با علامت دایره یا ستاره نشان داده می شوند.

نوع submit در input

عبارت <input type="submit"> یک دکمه ی submit یا ارسال را برای ارسال داده های فرم به یک فایلِ به کار برنده(form-handler) تعریف می کند. فایلِ به کار برنده، معمولاً یک صفحه در یک سرور است و حاوی یک اسکریپت برای پردازش داده های input است. فایلِ به کار برنده، در خصوصیت action در فرم، مشخص می شود:

<form action="/action_page.php">
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value="احسان"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="عباسی"><br><br>
  <input type="submit" value="Submit">
</form> 

اگر خصوصیت value از دکمه ی submit را از قلم بیندازیم، این دکمه، یک متن پیش فرض خواهد داشت:

<form action="/action_page.php">
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value="احسان"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="عباسی"><br><br>
  <input type="submit">
</form> 

نوع reset در input

عبارت <input type="reset"> یک دکمه ی ریست را تعریف می کند که باعث می شود تمام مقادیر فرم، برابر با مقادیر پیش فرض شوند:

<form action="/action_page.php">
  <label for="fname">نام:</label><br>
  <input type="text" id="fname" name="fname" value="احسان"><br>
  <label for="lname">نام خانوادگی:</label><br>
  <input type="text" id="lname" name="lname" value="عباسی"><br><br>
  <input type="submit" value="ارسال">
  <input type="reset" value="ریست">
</form> 

نکته: اگر مقادیر input را تغییر دهید و سپس روی دکمه ی reset کلیک کنید، داده های فرم به مقادیر پیش فرض تغییر می کنند.

 نوع radio در input

عبارت <input type="radio"> یک دکمه ی رادیویی را تعریف می کند. دکمه های رادیویی، به کاربر امکان می دهند تا تنها یکی، از چند گزینه ی محدود را انتخاب کنید:

<p>زبان برنامه نویسی محبوب خود را انتخاب کنید:</p>
<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <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="ارسال">
</form> 

نوع checkbox در input

عبارت <input type="checkbox"> یک چک باکس را تعریف می کند. چک باکس ها به کاربر امکان می دهند تا صفر یا چند مورد از تعدادی گزینه ی محدود را انتخاب کند:

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> من یک دوچرخه دارم</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> من یک ماشین دارم</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> من یک قایق دارم</label><br><br>
  <input type="submit" value="ارسال">
</form> 

نوع button در input

عبارت <input type="button"> یک دکمه را تعریف می کند:

<input type="button" onclick="alert('سلام بر شما!')" value="کلیک کنید">

نوع color در input

از عبارت <input type="color"> برای ایجاد یک فیلد ورودی رنگ استفاده می شود. بسته به پشتیبانی مرورگر شما، یک جعبه ی انتخاب رنگ(color picker) در فیلد ورودی قرار می گیرد:

<form action="/action_page.php">
  <label for="favcolor">رنگ دلخواه خود را انتخاب کنید:</label>
</form>

نوع date در input

با استفاده از عبارت <input type="date"> می توانیم یک فیلد ورودی داشته باشیم که حاوی تاریخ باشد. شکل و شمایل گیرنده ی تاریخ، به مرورگر شما بستگی دارد.

<form action="/action_page.php">
  <label for="birthday">تاریخ تولد:</label>
  <input type="date" id="birthday" name="birthday">
</form>

با استفاده از خصوصیت های min و max می توانیم به تاریخ خود، محدودیت اضافه کنیم:

<form action="/action_page.php">
  <label for="datemin"> یک تاریخ پس از 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="datemax">یک تاریخ قبل از 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  
</form>

نوع Datetime-local در input

عبارت <input type="datetime-local"> یک فیلد تاریخ و زمان را مشخص می کند که منطقه ی زمانی(time zone) ندارد. بسته به مرورگر شما، یک گیرنده ی تاریخ در فیلد ورودی نشان داده می شود.

<form action="/action_page.php">
  <label for="birthdaytime">تاریخ و زمان تولد:</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

نوع email در input

از عبارت <input type="email"> برای ایجاد فیلد ورودی استفاده می شود که یک آدرس ایمیل را دربر دارد. بسته به مرورگر شما، این آدرس ایمیل می تواند به هنگام ارسال، به طور اتوماتیک اعتبار سنجی شود. برخی از گوشی های هوشمند، نوع ایمیل را تشخیص می دهند و برای تطابق ایمیل ورودی، مقدار com. را اضافه می کنند.

 <form>
  <label for="email">ایمیل خود را وارد کنید:</label>
  <input type="email" id="email" name="email">
</form> 

نوع image در input

عبارت <input type="image"> یک تصویر را بعنوان یک دکمه ی ارسال(submit) تعریف می کند. مسیرِ(path) تصویر، در خصوصیت src مشخص می شود.

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

نوع file در input

عبارت <input type="file"> یک فیلد انتخاب فایل به همراه یک دکمه به نام Browse را برای آپلود فایل مشخص می کند:

<form action="/action_page.php">
  <label for="myfile">یک فایل را انتخاب کنید:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
</form>

نوع hidden در input

عبارت <input type="hidden"> یک فیلد ورودی مخفی(hidden input) را تعریف می کند(که برای کاربر قابل مشاهده نیست).

یک فیلد hidden به برنامه نویسان اجازه می دهد که وقتی که یک فرم ارسال(submit) می شود داده هایی که قابل مشاهده نیستند یا توسط کاربران اصلاح شده اند را اضافه کنند.

یک فیلد hidden، اغلب حاوی رکوردهای دیتابیس است که نیاز داریم وقتی فرم ارسال(submit) می شود، آنها را آپدیت کنیم.

نکته: وقتی که یک مقدار در محتوای صفجه به کاربر نشان داده نمی شود، این مقدار قابل مشاهده و ویرایش است؛ برای انجام این کار، می توانیم از ابزارهای توسعه ی مرورگر یا از قابلیت View Page Source استفاده کنیم. (یعنی با زدن کلید F12 یا راست کلیک کردن روی صفحه و انتخاب گزینه ی View Page Source). از ورودی های hidden برای موارد امنیتی استفاده نکنید.

<form action="/action_page.php">
  <label for="fname">نام:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="ارسال">
</form>

 نوع month در input

عبارت <input type="month"> به کاربر امکان می دهد تا یک ماه و سال را انتخاب کند. بسته به نوع مرورگری که استفاده می کنید، یک انتخاب کننده ی تاریخ نمایش داده می شود.

<form action="/action_page.php">
  <label for="bdaymonth">سال و ماه تولد:</label>
  <input type="month" id="bdaymonth" name="bdaymonth">
  <input type="submit" value="Submit">
</form>

نوع number در input

عبارت <input type="number"> یک فیلد ورودی عددی را تعریف می کند. ما همچنین می توانیم تعیین کنیم که کدام اعداد قابل قبول هستند و محدودیت قائل شویم. مثال زیر، یک فیلد ورودی را نشان می دهد که می توانیم در آن یک مقدار از 1 تا 5 را وارد کنیم:

<form action="/action_page.php">
  <label for="quantity">تعداد را انتخاب کنید؛ یک عدد بین 1 و 5:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
  <input type="submit" value="ارسال">
</form>

انواع محدودیت های input

در زیر، یک لیست کامل از محدودیت های input را مشاهده می کنید:

 در فصل بعدی، می توانید اطلاعات بیشتری در مورد محدودیت های input مطالعه کنید.

در مثال زیر، یک فیلد input عددی وجود دارد که می توانید در آن، یک مقدار از 0 تا 100، با گام(step) 10 وارد کنید. مقدار پیش فرض، 30 است:

 <form>
  <label for="quantity">تعداد:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="30">
</form> 

نوع range در input

عبارت <input type="range"> یک کنترل را برای مشخص کردن یک عدد که مقدار دقیق آن اهمیتی ندارد(مانند یک اسلایدر) تعریف می کند. محدوده ی پیش فرض از 0 تا 100 است. اما ما می توانیم با استفاده از خصوصیت های min و max و step محدودیت هایی اعمال کنیم که چه اعدادی قابل قبول هستند.

<form>
  <label for="vol">شدت صدا: یک عدد بین 0 و 50</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form>

نوع search در input

از عبارت <input type="search"> برای جستجوی فیلدها استفاده می شود(یک فیلد search مانند یک فیلد متنی عادی رفتار می کند):

<form>
  <label for="gsearch">جستجوی گوگل:</label>
  <input type="search" id="gsearch" name="gsearch">
</form>

نوع tel در input

از عبارت <input type="tel"> برای ایجاد فیلدهایی استفاده می شود که حاوی یک شماره تلفن هستند.

<form>
  <label for="phone">شماره تلفن خود را وارد کنید:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> 

نوع time در input

عبارت <input type="time"> به کاربر امکان می دهد تا یک زمان(time) را انتخاب کند(نه منطقه ی زمانی). بسته به پشتیبانی مرورگرها، انتخاب کننده ی زمان می تواند در فیلد input نمایش پیدا کند.

<form>
  <label for="appt">یک زمان را انتخاب کنید:</label>
  <input type="time" id="appt" name="appt">
</form> 

نوع Url در input

از عبارت <input type="url"> برای ایجاد فیلدهایی استفاده می شود که حاوی یک آدرس URL هستند. بسته به پشتیبانی مرورگرها، فیلد url می تواند به طور اتوماتیک، وقتی که ارسال(submit) شوند، اعتبار سنجی شوند. برخی گوشی های هوشمند، نوع url را تشخیص می دهند و عبارت com. را در کیبورد اضافه می کنند تا با url وارد شده تطابق یابد.

<form>
  <label for="homepage">آدرس سایت را وارد کنید:</label>
  <input type="url" id="homepage" name="homepage">
</form> 

نوع week در input

عبارت <input type="week"> به کاربر امکان می دهد تا هفته و سال را انتخاب کند. بسته به پشتیبانی مرورگر، یک گیرنده ی تاریخ نشان داده می شود.

<form>
  <label for="week">هفته را انتخاب کنید:</label>
  <input type="week" id="week" name="week">
</form>