تگ 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 | شناسه یک فرم را که این کنترل به آن تعلق دارد مشخص می کند. مقادیر احتمالی: [شناسه یک عنصر فرم در سند صاحب عنصر] |
formaction | URL پرونده را مشخص می کند که هنگام ارسال کنترل پردازش می کند. |
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 | عرض کنترل را مشخص می کند. |