عرض سلام و خسته نباشید خدمت تمام کاربران عزیز امروز با آموزش Input Types در Html در خدمت شما عزیزان هستیم .
انواع input types وجود دارد که می توانید در 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 مقدار “text” است.
مقدار text در صفت Type تگ input
<input type = “text”>
یک فیلد ورودی متن تک خطی را تعریف می کند .
مقدار Password در صفت Type تگ input
<input type = “password”>
یک قسمت رمز عبور را تعریف می کند .
<form>
<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”>
</form>
نتیجه در مرورگر :
نوشته های یک قسمت رمز عبور ستاره دار نشان داده می شوند .
مقدار Submit در صفت Type تگ input
<input type = “submit”>
دکمه ای را برای ارسال داده های فرم به یک کنترل کننده فرم تعریف می کند.
فرم-کنترل کننده معمولاً یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.
فرم کنترل کننده به وسیله صفت action آدرس دهی می شود .
اگر ویژگی value دکمه ارسال را حذف کنید ، دکمه یک متن پیش فرض دریافت می کند .
مقدار Reset در صفت Type تگ 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=”Submit”>
<input type=”reset”>
</form>
نتیجه در مرورگر :
اگر مقادیر ورودی را تغییر دهید و سپس روی دکمه “Reset” کلیک کنید ، داده های فرم به مقادیر پیش فرض بازنشانی می شوند.
مقدار Radio در صفت Type تگ input
<input type = “radio”>
یک دکمه رادیو را تعریف می کند.
دکمه های رادیویی به کاربر اجازه می دهد فقط یک گزینه محدود را انتخاب کند:
مقدار Checkbox در صفت Type تگ input
<input type = “checkbox”>
کادر تأیید را تعیین می کند.
کادرهای تأیید به کاربر اجازه می دهند گزینه های صفر یا بیشتر از تعداد محدودی گزینه را انتخاب کند.
مقدار Button در صفت Type تگ input
<input type = “button”>
یک دکمه را تعریف می کند .
مقدار Color در صفت Type تگ input
<input type = “color”>
برای فیلدهای ورودی استفاده می شود که باید حاوی یک رنگ باشد.
بسته به پشتیبانی مرورگر ، یک انتخابگر رنگ می تواند در قسمت ورودی نشان داده شود.
<form>
<label for=”favcolor”>رنگ مورد علاقه خود را انتخاب کنید </label>
<input type=”color” id=”favcolor” name=”favcolor”>
</form>
نتیجه در مرورگر :
مقدار Date در صفت Type تگ input
<input type = “date”>
برای فیلدهای ورودی استفاده می شود که باید حاوی تاریخ باشد.
بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.
همچنین می توانید از ویژگی های min و max برای افزودن محدودیت به تاریخ استفاده کنید:
<form>
<label for=”datemax”>تاریخی را تا قبل از تاریخ ۱۹۸۰-۰۱-۰۱ انتخاب کنید : </label>
<input type=”date” id=”datemax” name=”datemax” max=”1979-12-31″><br><br>
<label for=”datemin”>تاریخی را تا بعد از سال ۲۰۰۰-۰۱-۰۲ انتخاب کنید </label>
<input type=”date” id=”datemin” name=”datemin” min=”2000-01-02″>
</form>
نتیجه در مرورگر:
امیدواریم این بخش از آموزش در مورد انواع Input Types در HTML نیز برای شما مفید واقع شده باشد و ما را در تلگرام و اینستاگرام دنبال کنید .
