طراحی سایت | طراحی اسلایدر | خدمات سئو | سئو وبسایت | خدمات طراحی وبسایت | پشتیبانی وبسایت |
0 محصولات نمایش سبد خرید

هیچ محصولی در سبد خرید نیست.

آموزش تگ input در HTML

تگ hgroup از چه چیز هایی تشکیل شده است | کاربرد تگ header چیست؟ | اجرای اصلی تگ head چیست؟ |
ذهن انسان محدودیت ندارد

تگ input یک کنترل ورودی فرم را در یک سند HTML نشان می دهد. کنترل ورودی فرم ، کنترلی است که به کاربر اجازه می دهد داده ها را وارد کند و با یک وب سایت یا برنامه ارتباط برقرار کند.

نحوه نوشتن تگ input

input به صورت input نوشته می شود (بدون برچسب پایان). به تگ input به طور معمول یک مشخصه type برای تعیین نوع کنترل و یک ویژگی نام داده می شود تا پردازنده فرم بتواند به آن اشاره کند. غالباً از مشخصه مقدار برای تعیین مقدار پیش فرض کنترل فرم استفاده می شود.

ویژگی های زیادی وجود دارد که می توانند با تگ input استفاده شوند. اینها در زیر “الگو” ذکر شده است.

در اینجا یک مثال ساده

از تگ input با برخی ویژگی ها آورده شده است:

<input type="text" name="fcolor" value="Blue">

در اینجا مثالی آورده شده است که شامل سه تگ input در یک فرم معمولی است:

<form action="#" method="get">
	<label>First Name: <input name="first_name"></label>
	<label>Last Name: <input name="last_name"></label>
	<inpu

مثال ها

یک فرم ساده

در اینجا فرمی وجود دارد که برای جمع آوری جزئیات نام کاربر استفاده می شود. از سه تگ input استفاده می شود:

دو مورد برای جزئیات نام ، یکی برای دکمه ارسال.

<form action="#" target="_blank" method="get">
    <p>
        <label>First name:
            <input type="text" name="first_name" maxlength="100" style="width:120px;">
        </label>
    </p>
    <p>
        <label>Last name:
            <input type="text" name="last_name" maxlength="100" style="width:120px;">
        </label>
    </p>
    <input type="submit" value="Submit">
</form>

اتصال input به form

با استفاده از ویژگی form میتوان input رابه فرم وصل کرد . اگر از ویژگی فرم تگ input استفاده می کنید ، باید شناسه شکلی را که می خواهید این عنصر را با آن مرتبط کنید مشخص کنید.

در مثال زیر ، تمام عناصر مربوط به فرم را خارج از تگ input قرار داده ام. اما من عمداً فقط دو عنصر را با فرم مرتبط کردم (برای نشان دادن تأثیر ویژگی فرم). نام اول با یک فرم مرتبط شده است اما نام خانوادگی آن را ندارد. بنابراین ، نام خانوادگی همراه با فرم ارسال نمی شود و صفحه اقدام نام خانوادگی کاربران را تأیید نمی کند.

<form action="#" target="_blank" method="get" id="customer_name">

</form>
<p>
    <label>First name:
        <input form="customer_name" type="text" name="first_name" maxlength="100" style="width:120px;">
    </label>
</p>
<p>
    <label>Last name:
        <input type="text" name="last_name" maxlength="100" style="width:120px;">
    </label>
</p>
<input form="customer_name" type="submit" value="Submit">

دکمه های رادیو

در این مثال ، ما دکمه های رادیویی را ایجاد می کنیم. این کار را با دادن مقداری radio به صفت type انجام می دهیم. هر دکمه رادیویی در یک گروه باید دارای همان مقدار نام باشد – به همین ترتیب با هم مرتبط می شوند. ارزش همان چیزی است که گزینه های مختلف را متمایز می کند.

<p>Which prize do you prefer?</p>
<form>
    <label>
        <input type="radio" name="prize" value="house">House
    </label>
    <label>
        <input type="radio" name="prize" value="money">$1 million
    </label>
    <label>
        <input type="radio" name="prize" value="none">No prize thanks, I'm already happy :)
    </label>
</form>

عناصر مرتبط با فرم


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

در اینجا عناصر مرتبط با فرم در HTML وجود دارد.

  • <button>
  • <fieldset>
  • <input>
  • <keygen>
  • <label>
  • <object>
  • <output>
  • <select>
  • <textarea>
  • <img>

ویژگی های تک input


ویژگی ها را می توان به یک عنصر HTML اضافه کرد تا اطلاعات بیشتری در مورد نحوه رفتار آن ارائه داد.

تگ input ویژگی های زیر را می پذیرد.

ویژگی توضیحات
acceptلیستی از انواع محتوا را که سرور می پذیرد ، با ویرگول مشخص می کند. مقادیر احتمالی:
audio/*
video/*
image/*
*[یک نوع MIME معتبر ، بدون پارامتر]
altمتن جایگزین. این متن را برای استفاده در مواردی که مرورگر / عامل کاربر نتواند کنترل ورودی را ارائه دهد ، مشخص می کند.
autocompleteبا این کنترل از استفاده “تکمیل خودکار” از مرورگر جلوگیری می کند. می تواند برای داده های حساس مانند جزئیات بانکی و غیره مفید باشد. مقادیر احتمالی:
روشن
خاموش (مقدار پیش فرض)
autofocusهنگام بارگیری صفحه به طور خودکار به این کنترل تمرکز می کند. این به کاربر اجازه می دهد بدون اینکه ابتدا کنترل را انتخاب کند ، شروع به استفاده از کنترل کند. بیش از یک عنصر با مشخصه فوکوس خودکار نباید در سند وجود داشته باشد.
این یک ویژگی بولی است. اگر صفت وجود داشته باشد ، مقدار آن باید رشته خالی باشد یا مقداری باشد که با نام متعارف صفت ، بدون هیچ فضای خالی پیشرو یا انتهایی  (either autofocus or autofocus="autofocus") باشد.
Empty string
autofocus
checkedهنگام بارگیری صفحه ، کنترل ورودی از قبل انتخاب خواهد شد. یا استفاده می شود type="radio" or type="checkbox".
disabled
کنترل ورودی را غیرفعال می کند. کنترل تغییرات کاربر را نمی پذیرد. همچنین نمی تواند فوکوس دریافت کند و هنگام زبانه زدن از آن چشم پوشی می شود. این یک ویژگی بولی است. اگر صفت وجود داشته باشد ، مقدار آن باید رشته خالی باشد یا مقداری باشد که با نام متعارف صفت مطابق با کوچکترین حالت ASCII باشد ، بدون فضای خالی یا پیشرو
(i.e. either disabled or disabled="disabled").
Empty string
disabled
dirnameجهت متن را همانطور که در قسمت ورودی ارسال شده تعیین می کند. مقدار این ویژگی می تواند رشته ای از متن مانند نام برای این قسمت باشد. به عنوان مثال ، اگر صفت را به عنوان dirname = “text_dir” تعیین کنید ، پس از ارسال فرم ، داده ها ممکن است به این شکل باشند: text_dir = ltr.
formشناسه یک فرم را که این کنترل به آن تعلق دارد مشخص می کند. مقادیر احتمالی: [شناسه یک عنصر فرم در سند صاحب عنصر]
formactionURL پرونده را مشخص می کند که هنگام ارسال کنترل پردازش می کند.
formenctypeنوع محتوای مورد استفاده برای رمزگذاری مجموعه داده های فرم را هنگام ارسال به سرور مشخص می کند. مقادیر احتمالی:
application/x-www-form-urlencoded (پیش فرض )
multipart/form-data (در زمان اپلود فایل استفاده کنید )
text/plain (در زمان اپلود فایل استفاده کنید)
formmethodروش HTTP را مشخص می کند تا هنگام ارسال کنترل از آن استفاده شود. مقادیر احتمالی:
get (داده های فرم هنگام ارسال به URL پیوست می شوند)
post (داده های فرم به URL پیوست نمی شوند)
dialog (در صورت وجود کادر گفتگویی را که فرم در آن قرار دارد می بندد و در غیر این صورت ارسال نمی شود)
formnovalidateمشخص می کند که فرم نباید در هنگام ارسال تأیید شود.
این یک ویژگی بولی است. اگر صفت وجود داشته باشد ، مقدار آن باید رشته خالی باشد یا مقداری باشد که با نام متعارف صفت مطابق با کوچکترین حالت ASCII باشد ، بدون فضای خالی یا پیشرو
[Empty string]
novalidate
formtargetزمینه مرور را برای بارگذاری مقصد مشخص شده در ویژگی action مشخص می کند.
مقدار
:_blank
_self
_top
_parent
heightارتفاع کنترل را مشخص می کند.
listیک عنصر datalist را برای استفاده در لیستی از گزینه های از پیش تعریف شده برای کاربر مشخص می کند. مقدار باید شناسه یک عنصر datalist در همان سند باشد.
maxحداکثر مقدار را برای کنترل مشخص می کند.
maxlengthحداکثر تعداد نویسه هایی را که کاربر اجازه دارد در قسمت متن وارد کند مشخص می کند.
minحداقل مقدار را برای کنترل مشخص می کند.
minlengthمحدوده پایینی را برای تعداد کاراکترهایی که کاربر می تواند وارد کند مشخص می کند.
multiple
مشخص می کند که کاربر مجاز است بیش از یک مقدار وارد کند.
این یک ویژگی بولینی است. اگر صفت وجود داشته باشد ، مقدار آن باید رشته خالی باشد یا مقداری باشد که با نام متعارف صفت مطابق با کوچکترین حالت ASCII باشد ، بدون فضای خالی یا پیشرو

[Empty string]
multiple
nameنامی را به کنترل ورودی اختصاص می دهد.
patternیک عبارت منظم را مشخص می کند که برابر آن مقدار کنترل باید بررسی شود. مقدار باید با الگوی دستور زبان ECMA 262 مطابقت داشته باشد.
placeholderیک اشاره کوتاه (یک کلمه یا عبارت کوتاه) را مشخص می کند که برای کمک به کاربر در ورود اطلاعات. یک اشاره می تواند یک مقدار نمونه یا یک توضیح مختصر از قالب مورد انتظار باشد.

توجه: برای یک اشاره طولانی تر یا سایر متن های مشاوره ای ، ویژگی جهانی عنوان مناسب تر است. همچنین توجه داشته باشید که از ویژگی مکان نگهدارنده نباید به عنوان جایگزین برای عنصر <label>.
readonlyکنترل ورودی را فقط برای خواندن تنظیم می کند – به کاربر اجازه نمی دهد مقدار را تغییر دهد. با این حال ، کنترل می تواند تمرکز را دریافت کند و هنگام فهرست بندی از طریق فرم های کنترل گنجانده می شود. این یک ویژگی بولی است. اگر صفت وجود داشته باشد ، مقدار آن باید رشته خالی باشد یا مقداری باشد که با نام متعارف صفت ، بدون حساسیت مورد کوچک ، مطابقت نداشته باشد ، بدون فضای خالی یا پیشرو
[Empty string]
readonly
requiredمشخص می کند که فیلد ورودی یک قسمت مورد نیاز است (کاربر باید این قسمت را تکمیل کند). این یک ویژگی بولی است. اگر صفت وجود داشته باشد ، مقدار آن باید رشته خالی باشد یا مقداری باشد که با نام متعارف صفت ، بدون حساسیت مورد کوچک ، مطابقت نداشته باشد ، بدون فضای خالی یا پیشر

[Empty string]
required
sizeعرض کنترل را با حروف مشخص می کند. مقداری که یک عدد صحیح غیر منفی معتبر بیشتر از صفر است.
srcاگر type = "image" باشد ، این ویژگی موقعیت تصویر را مشخص می کند.
stepبا محدود کردن مقادیر مجاز ، دانه بندی مورد انتظار را تعیین می کند (و لازم است).
typeنوع کنترل را مشخص می کند. مقادیر احتمالی:

hidden : یک رشته دلخواه N/A

text : متن بدون خط شکسته

search : متن بدون خط شکسته

tel : متن بدون خط شکسته

url : یک URL مطلق

email : آدرس ایمیل یا لیست آدرس های ایمیل

password : متن بدون خط شکسته (اطلاعات حساس)

datetime : تاریخ و زمان (سال ، ماه ، روز ، ساعت ، دقیقه ، ثانیه ، کسری از ثانیه) با تنظیم منطقه زمانی روی UTC

date : تاریخی (سال ، ماه ، روز) بدون منطقه زمانی

month : تاریخی متشکل از یک سال و یک ماه بدون منطقه زمانی

week : تاریخی متشکل از یک شماره هفته در هفته و یک هفته بدون منطقه زمانی

time : یک زمان (ساعت ، دقیقه ، ثانیه ها ، ثانیه های کسری) بدون منطقه زمانی

datetime-local : یک تاریخ و زمان (سال ، ماه ، روز ، ساعت ، دقیقه ، ثانیه ، کسر ثانیه) بدون منطقه زمانی

number : یک مقدار عددی

range : یک مقدار عددی ، با معنای اضافی که مقدار دقیق مهم نیست

color : یک رنگ sRGB با اجزای ۸ بیتی قرمز ، سبز و آبی

checkbox : مجموعه ای از مقادیر صفر یا بیشتر از یک لیست از پیش تعریف شده

radio : یک مقدار برشمرده شده

file :برای قرار دادن فایل کاربرد دارد

submit : یک مقدار برشمرده شده ، با معنای اضافی که باید آخرین مقدار انتخاب شده باشد و ارسال فرم را آغاز کند

image : یک مختصات ، نسبت به اندازه یک تصویر خاص ، با معنای اضافی که باید آخرین مقدار انتخاب شده باشد و ارسال فرم را آغاز کند
valueیک مقدار پیش فرض برای کنترل تعیین می کند. توجه:
اگر type = “checkbox”
یا type = “radio”
این ویژگی لازم است.
widthعرض کنترل را مشخص می کند.

دیدگاه‌های نوشته

Share via
ارسال این به یک دوست