انواع ورودی HTML
این فصل انواع مختلف ورودی برای عنصر <input> را توصیف می کند.
ترجمه شده از انگلیسی ورودی - input (داده) نوع - type (داده).
انواع ورودی HTML
انواع مختلفی از ورودی که می توانید در 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">
نوع ورودی متن - Input Type Text
<"input type="text> یک فیلد ورودی متن تک خطی را تعریف
می
کند:
مثال
<form>
نام <br>
<input type="text"
name="First name:"><br>
نام خانوادگی<br>
<input type="text" name="lastname">
</form>
خودتان
آزمایش کنید »
کد بالا به این ترتیب در مرورگر ارائه می شود:
نام:نام خانوادگی:
نوع ورودی : رمز ورود - Input Type Password
"<input type="password> یک قسمت رمز عبور تعریف می
کند
:
مثال
<form>
نام کاربری:<br>
<input type="text"
name="username"><br>
رمز عبور کاربر:<br>
<input type="password" name="psw">
</form>
خودتان آزمایش کنید »
کد بالا به این ترتیب در مرورگر ارائه می شود:
نام کاربری:رمز عبور کاربر:
زمینه ها را پر کنید! نویسه ها در قسمت رمز عبور پوشانده می شوند (به صورت ستاره یا دایره نمایش داده می شوند).
نوع ورودی ارسال - Input Type Submit
<"input type="submit> دکمه ای را برای ارسال داده های فرم به یک کنترل
کننده فرم تعریف می کند.
فرم-کنترل کننده معمولاً یک صفحه سرور با یک اسکریپت برای پردازش داده های ورودی است.
کنترل کننده فرم در ویژگی action مشخص شده است:
مثال
<form action="/action_page.php">
نام:<br>
<input
type="text"
name="firstname" value="Mickey"><br>
نام
خانوادگی:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit"
value="Submit">
</form>
خودتان آزمایش کنید »
کد بالا به این ترتیب در مرورگر ارائه می شود:
اگر ویژگی مقدار دکمه ارسال را حذف کنید ، دکمه یک متن پیش فرض دریافت می کند:
مثال
<form action="/action_page.php">
نام:<br>
<input
type="text"
name="firstname" value="Mickey"><br>
نام
خانوادگی:<br>
<input
type="text" name="lastname"
value="Mouse"><br><br>
<input
type="submit">
</form>
خودتان آزمایش کنید »
بازنشانی نوع ورودی - Input Type Reset
<"input type="reset> یک دکمه تنظیم مجدد را تعریف می کند که تمام
مقادیر فرم را به مقادیر پیش فرض خود بازنشانی می کند:
مثال
<form action="/action_page.php">
نام :<br>
<input
type="text" name="firstname" value="Mickey"><br>
نام
خانوادگی<br>
<input type="text" name="lastname"
value="Mouse"><br><br>
<input type="submit"
value="Submit">
<input type="reset">
</form>
خودتان
آزمایش کنید »
کد بالا به این ترتیب در مرورگر ارائه می شود:
اگر مقادیر ورودی را تغییر دهید و سپس روی دکمه "Reset" کلیک کنید ، داده های فرم به مقادیر پیش فرض بازنشانی می شوند.
نوع ورودی رادیو - Input Type Radio
<"input type="radio> یک دکمه رادیو را تعریف می کند.
دکمه های رادیویی به کاربر اجازه می دهد فقط یک گزینه محدود را انتخاب کند:
مثال
<form>
<input type="radio" name="gender" value="مرد"
checked> Male<br>
<input
type="radio" name="gender" value="female"> زن<br>
<input
type="radio" name="gender" value="other"> دیگر
</form>
خودتان
آزمایش کنید »
کد بالا به این ترتیب در مرورگر ارائه می شود:
مردزن
دیگر
کادر انتخاب نوع ورودی - Input Type Checkbox
<"input type="checkbox>کادر تأیید را تعیین می کند.
کادرهای تأیید به کاربر اجازه می دهند گزینه های صفر یا بیشتر از تعداد محدودی گزینه را انتخاب کند.
مثال
<form>
<input type="checkbox" name="vehicle1"
value="Bike"> من یک دوچرخه دارم <br>
<input type="checkbox" name="vehicle2" value="Car"> من یک ماشین
دارم
</form>
خودتان آزمایش کنید »
کد بالا به این ترتیب در مرورگر ارائه می شود:
من یک دوچرخه دارممن یک ماشین دارم
دکمه نوع ورودی - Input Type Button
<"input type="button> یک دکمه را تعریف می کند:
:
کد بالا به این ترتیب در مرورگر ارائه می شود:
انواع ورودی HTML5
HTML5 چندین نوع ورودی جدید اضافه کرد:
- رنگ
- تاریخ
- تاریخ محلی
- ایمیل
- ماه
- عدد
- میزان
- جستجو
- تماس
- زمان
- ادرس وب
- هفته
انواع جدید ورودی که توسط مرورگرهای وب قدیمی پشتیبانی نمی شوند مانند <"input
type="text> رفتار می کنند.
نوع ورودی رنگ - Input Type Color
<"input type="color> برای فیلدهای ورودی استفاده می شود که
باید حاوی یک رنگ باشد.
بسته به پشتیبانی مرورگر ، یک انتخابگر رنگ می تواند در قسمت ورودی نشان داده شود.
مثال
<form>
رنگ مورد علاقه خود را انتخاب کنید:
<input type="color"
name="favcolor">
</form>
خودتان
آزمایش کنید »
نوع ورودی تاریخ - Input Type Date
<"input type="date> برای فیلدهای ورودی که باید حاوی یک
تاریخ باشد استفاده می شود.
بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.
همچنین می توانید از ویژگی های min و max
برای افزودن محدودیت به تاریخ استفاده کنید:
مثال
<form>
تاریخ قبل از 1980-01-01:
<input type="date" name="bday"
max="1979-12-31"><br>
وادر کردن تاریخ بعد از 2000-01-01:
<input
type="date"
name="bday" min="2000-01-02"><br>
</form>
خودتان آزمایش کنید »
نوع ورودی تاریخ / زمان محلی - Input Type Datetime-local
<"input type="datetime-local>فیلد ورودی تاریخ و زمان را
مشخص می کند ، بدون منطقه زمانی.
بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.
مثال
<form>
تولد (تاریخ و زمان):
<input type="datetime-local"
name="bdaytime">
</form>
خودتان آزمایش کنید »
نوع ورودی ایمیل - Input Type Email
<"input type="email> برای فیلدهای ورودی استفاده می شود که باید حاوی آدرس ایمیل
باشد.
بسته به پشتیبانی مرورگر ، آدرس ایمیل می تواند هنگام ارسال به طور خودکار تأیید شود.
برخی از تلفن های هوشمند نوع ایمیل را تشخیص داده و برای مطابقت با ورودی ایمیل ، ".com" را به صفحه کلید اضافه می کنند.
نوع ورودی فایل ها - Input Type File
<"input type="file> یک قسمت انتخاب پرونده و یک دکمه "مرور"
برای بارگذاری پرونده را تعریف می کند.
نوع ورودی ماه - Input Type Month
<"input type="month> به کاربر اجازه می دهد ماه و سال را
انتخاب کند.
بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.
مثال
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
خودتان
آزمایش کنید »
نوع ورودی شماره - Input Type Number
<"input type="number> یک قسمت ورودی عددی را تعریف می کند.
همچنین می توانید محدودیت هایی را برای تعداد پذیرفته شده تعیین کنید.
مثال زیر یک قسمت ورودی عددی را نشان می دهد ، جایی که می توانید مقداری از 1 تا 5 را وارد کنید:
مثال
<form>
کمییت از 1 تا 5:
<input type="number" name="quantity"
min="1" max="5">
</form>
خودتان آزمایش کنید »
محدودیت های ورودی
لیستی از برخی محدودیت های ورودی معمول:
| ویژگی | توضیح |
|---|---|
| checked | نشان می دهد که قسمت ورودی باید از قبل در بارگذاری صفحه انتخاب شود (برای type="checkbox" یا type="radio") |
| disabled | مشخص می کند که یک قسمت ورودی باید غیرفعال شود |
| max | حداکثر مقدار را برای یک قسمت ورودی مشخص می کند |
| maxlength | حداکثر تعداد نویسه ها را برای یک قسمت ورودی مشخص می کند |
| min | حداقل مقدار را برای یک قسمت ورودی مشخص می کند |
| pattern | یک عبارت منظم را برای بررسی مقدار ورودی در مقابل تعیین می کند |
| readonly | مشخص می کند که یک قسمت ورودی فقط خواندنی است (قابل تغییر نیست) |
| required | مشخص می کند که یک فیلد ورودی لازم است (باید پر شود) |
| size | عرض (به نویسه) یک قسمت ورودی را مشخص می کند |
| step | فواصل قانونی شماره را برای یک قسمت ورودی مشخص می کند |
| value | مقدار پیش فرض را برای یک قسمت ورودی مشخص می کند |
در فصل بعدی درباره محدودیت های ورودی اطلاعات بیشتری کسب خواهید کرد.
مثال زیر یک قسمت ورودی عددی را نشان می دهد ، جایی که می توانید مقداری از 0 تا 100 را در مراحل 10 وارد کنید. مقدار پیش فرض 30 است:
مثال
<form>
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
</form>
خودتان آزمایش کنید »
محدوده نوع ورودی - Input Type Range
<input type="range"> كنترلي را براي وارد كردن عددي كه مقدار
دقيق آن مهم نيست تعريف مي كند (مانند كنترل
لغزنده). دامنه پیش فرض 0 تا 100 است. با این حال ، می توانید محدودیت هایی را برای تعداد پذیرفته شده با ویژگی
های حداقل ، حداکثر و مرحله تعیین کنید:
min, max یا step
:
نوع ورودی جستجو - Input Type Search
<"input type="search> برای زمینه های جستجو استفاده می شود
(یک قسمت جستجو مانند یک متن متنی منظم رفتار می کند).
نوع ورودی تماس - Input Type Tel
<"input type="tel>برای فیلدهای ورودی که باید حاوی یک شماره
تلفن باشد استفاده می شود.
مثال
<form>
شماره تماس:
<input type="tel" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
خودتان
آزمایش کنید »
نوع ورودی زمان - Input Type Time
<"input type="time>> به کاربر اجازه می دهد تا زمانی را
انتخاب کند (منطقه زمانی ندارد).
بسته به پشتیبانی مرورگر ، یک انتخابگر زمان می تواند در قسمت ورودی نشان داده شود.
نوع ورودی آدرس وب - Input Type Url
<"input type="url> برای فیلدهای ورودی استفاده می شود که
باید حاوی آدرس URL باشد.
بسته به پشتیبانی مرورگر ، قسمت URL می تواند هنگام ارسال به طور خودکار تأیید شود.
برخی از تلفن های هوشمند نوع url را تشخیص می دهند و ".com" را برای مطابقت با ورودی url به صفحه کلید اضافه می کنند.
مثال
<form>
صفحه اصلی خود را اضافه کنید:
<input type="url" name="homepage">
</form>
خودتان
آزمایش کنید »
نوع ورودی هفته - Input Type Week
<"input type="week> به کاربر اجازه می دهد یک هفته و سال را
انتخاب کند.
بسته به پشتیبانی مرورگر ، یک انتخاب کننده تاریخ می تواند در قسمت ورودی نشان داده شود.
تمرینات HTML
ویژگی HTML نوع ورودی
| برچسب | توضیح |
|---|---|
| <input type=""> | نوع ورودی برای نمایش را مشخص می کند |
سایت توسط چارچوب farsiw3.ir طراحی شده است.
