در اینجا انواع مختلف ورودی که میتوانید در 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" است.
<input type="text"> یک فیلد ورودی متن تکخطی تعریف میکند:
مثال
<form>
<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" />
</form>
This is how the HTML code above will be displayed in a browser:
First name:
Last name:
<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>
کد HTML بالا در مرورگر به این صورت نمایش داده میشود:Username:
Password:
کاراکترهای موجود در فیلد رمز عبور پوشانده میشوند (به صورت ستاره * یا دایره ● نمایش داده میشوند).
<input type="submit"> یک دکمه برای ارسال دادههای فرم به یک پردازشگر فرم (form-handler) تعریف میکند. پردازشگر فرم معمولاً یک صفحه سرور با اسکریپتی برای پردازش دادههای ورودی است و در خصوصیت action فرم مشخص میشود.
مثال
<form action="/action_page.php">
<label for="fname">نام:</label><br />
<input type="text" id="fname" name="fname" value="John" /><br />
<label for="lname">نام خانوادگی:</label><br />
<input type="text" id="lname" name="lname" value="Doe" /><br /><br />
<input type="submit" value="ارسال" />
</form>
کد HTML بالا در مرورگر به این صورت نمایش داده میشود:
First name:
John
Last name:
Doe
اگر خصوصیت value دکمه ارسال را حذف کنید، دکمه یک متن پیشفرض خواهد داشت:
<input type="reset"> یک دکمه بازنشانی (reset) تعریف میکند که تمام مقادیر فرم را به مقادیر پیشفرض خود بازمیگرداند.
مثال
<form action="/action_page.php">
<label for="fname">نام:</label><br />
<input type="text" id="fname" name="fname" value="John" /><br />
<label for="lname">نام خانوادگی:</label><br />
<input type="text" id="lname" name="lname" value="Doe" /><br /><br />
<input type="submit" value="ارسال" />
<input type="reset" value="بازنشانی" />
</form>
کد HTML بالا در مرورگر به این صورت نمایش داده میشود:
First name:
John
Last name:
Doe
<input type="radio"> یک دکمه رادیویی تعریف میکند. دکمههای رادیویی به کاربر اجازه میدهند فقط یکی از تعداد محدودی گزینه را انتخاب کند.
مثال
<p>Choose your favorite Web language:</p>
<form>
<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>
</form>
کد HTML بالا در مرورگر به این صورت نمایش داده میشود:
HTML
CSS
JavaScript
<input type="checkbox"> یک چکباکس تعریف میکند. چکباکسها به کاربر اجازه میدهند صفر یا چند گزینه را از تعداد محدودی انتخاب کند.
مثال
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" />
<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>
</form>
کد HTML بالا در مرورگر به این صورت نمایش داده میشود:
I have a bike
I have a car
I have a boat
<input type="button"> یک دکمه قابل کلیک تعریف میکند.
مثال
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Color 🎨: <input type="color"> برای فیلدهایی استفاده میشود که باید حاوی یک رنگ باشند. بسته به پشتیبانی مرورگر، یک انتخابگر رنگ (color picker) ممکن است ظاهر شود.
Date 🗓️: <input type="date"> برای فیلدهایی استفاده میشود که باید حاوی یک تاریخ باشند. بسته به پشتیبانی مرورگر، یک انتخابگر تاریخ (date picker) ممکن است ظاهر شود. میتوانید از خصوصیتهای min و max برای افزودن محدودیت به تاریخها استفاده کنید.
Datetime-local: <input type="datetime-local"> یک فیلد ورودی تاریخ و زمان، بدون منطقه زمانی، مشخص میکند.
Email: <input type="email"> برای فیلدهای آدرس ایمیل استفاده میشود. ایمیل میتواند به طور خودکار هنگام ارسال اعتبارسنجی شود.
Image: <input type="image"> یک تصویر را به عنوان دکمه ارسال تعریف میکند. مسیر تصویر در خصوصیت src مشخص میشود.
File 📁: <input type="file"> یک فیلد انتخاب فایل و یک دکمه "Browse" برای آپلود فایلها تعریف میکند.
Hidden 🕵️: <input type="hidden"> یک فیلد ورودی مخفی (غیر قابل مشاهده برای کاربر) تعریف میکند. این فیلد اغلب برای ذخیره شناسهای که باید هنگام ارسال فرم بهروزرسانی شود، استفاده میشود. توجه: این یک روش امنیتی نیست زیرا مقدار آن در کد منبع صفحه قابل مشاهده است.
Month: <input type="month"> به کاربر اجازه میدهد یک ماه و سال را انتخاب کند.
Number: <input type="number"> یک فیلد ورودی عددی تعریف میکند. میتوانید با خصوصیتهایی مانند min، max و step محدودیتهایی را برای اعداد تعیین کنید.
Range: <input type="range"> یک کنترل برای وارد کردن یک عدد که مقدار دقیق آن مهم نیست، تعریف میکند (مانند یک کنترل اسلایدر).
Search: <input type="search"> برای فیلدهای جستجو استفاده میشود (این فیلد مانند یک فیلد متنی معمولی رفتار میکند).
Tel ☎️: <input type="tel"> برای فیلدهایی که باید حاوی شماره تلفن باشند، استفاده میشود.
Time: <input type="time"> به کاربر اجازه میدهد یک زمان (بدون منطقه زمانی) را انتخاب کند.
Url: <input type="url"> برای فیلدهایی که باید حاوی آدرس URL باشند، استفاده میشود.
Week: <input type="week"> به کاربر اجازه میدهد یک هفته و سال را انتخاب کند.
در اینجا لیستی از برخی محدودیتهای ورودی رایج آمده است:
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/