تگ input یکی از مهمترین تگ های موجود در تگ form می باشد. با استفاده از این تگ می توانیم کنترل های لازم بر روی اطلاعات کاربران را انجام دهیم. (طراحی سایت , سئو سایت , طراحی سایت )
در واقع تگ input نشان دهنده ی یک فیلد ورود اطلاعات می باشد. (طراحی سایت فروشگاهی , طراحی سایت شرکتی , ساخت سایت , قیمت طراحی سایت )
باتوجه به ویژگی و خصویت type می توانیم از فیلد ورودی input برای انواع ورودی های مختلف استفاده نماییم.
تگ input یک تگ بسته است و به صورت یک عنصر تنها به کار می رود.
اگر بخواهید در کنار input خود یک برچسب قرار دهید می توانید از تگ lable استفاده نمایید.
نمای کلی برای استفاده از تگ input به صورت زیر می باشد:
1 | <input type="type" name="name" > |
به طور مثال تگ input به کار رفته در عنصر form :
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body style="direction:rtl"> <form name="input" action="html_form_action.php" method="get"> نام: <input type="text" name="FirstName" value="Amir" /><br /> فامیل: <input type="text" name="LastName" value="PahlevanSadegh" /><br /> <input type="submit" value="Submit" /> </form> </body> </html> |
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| accept | file_extension audio/* video/* image/* media_type | این خصوصیت مشخص کننده نوع فایلی است که شما ارسال می کنید. این خصوصیت تنها برای file به کار میرود. |
| aling | left center right justify | این خصوصیت در حال حاضر در Html5 پشتیبانی نمی شود. با استفاده از این خصوصیت می توانیم image input را در جهت های مختلف ترازبندی کنیم. این خصوصیت تنها برای image به کار میرود. |
| alt | text | با استفاده از این خصوصیت می توانید برای عکس خود یک متن جایگزین استفاده کنید. این خصوصیت تنها برای image به کار میرود. |
| autocomplete | on off | با استفاده از این خصوصصیت می توانید مشخص کنید که فیلد های فرم ها به صورت اتوماتیک پر شوند یا خیر. پشتیبانی از Html5 |
| autofocus | autofocus | بااستفاده از این خصوصیت مکان نما در فیلد پیش فرض پس از لود صفحه قرار می گیرد. پشتیبانی از Html5 |
| checked | checked | بااسفاده از این ویژگی تگ input به طور خود کار پس از لود شدن صفحه در حالت انتخاب قرار می گیرد. این خصوصیت تنها برای checkbox و radio به کار میرود. |
| disabled | disabled | با استفاده از این خصوصیت می توانید تگ input خود را غیر فعال کنید. |
| form | form_id | با استفاده از این خصوصیت می توانید فرم هایی که به فیلد مورد نظر تعلق دارند را مشخص نمایید. پشتیبانی از Html5 |
| formaction | URL | این خصوصیت آدرس قسمتی که عملیات کنترلی برروی ورودی ها انجام می شود را ایجاد می کند. این خصوصیت تنها برای ورودی های image و submit به کار میرود. پشتیبانی از Html5 |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | توسط این خصوصیت چگونگی رمزگذاری برروی داده های فرم ها مشخص می شود. این خصوصیت تنها برای ورودی های image و submit به کار میرود. پشتیبانی از Html5 |
| formmethod | get post | این خصوصیت مشخص میکند که داده ها به کدام شکل به سرور انتقال داده شوند. این خصوصیت تنها برای ورودی های image و submit به کار میرود. پشتیبانی از Html5 |
| formnovalidate | formnovalidate | توسط این خصوصیت دیگر داده های ورودی به سرور نیازی به اعتبار سنجی ندارند. پشتیبانی از Html5 |
| formtarget | _blank _self _parent _top framename | توسط این خصوصیت می توانید مشخص کنید که پاسخ دریافت شده از سرور به چه نحوی به نمایش گذاشته شود. پشتیبانی از Html5 |
| height | pixels | توسط این خصوصیت می توانید ارتفاع تگ input را مشخص نمایید. این خصوصیت تنها برای image به کار میرود. پشتیبانی از Html5 |
| list | datalist_id | توسط این خصوصیت می توانید یک datalist را به فیلد متنی خود اضافه کنید. پشتیبانی از Html5 |
| max | number date | توسط این خصوصیت می توانید مقدار ماکسیمم تگ input را مشخص نمایید. پشتیبانی از Html5 |
| maxlength | number | توسط این خصوصیت می توانید تعداد ماکسیسم کاراکتری که می خواهید در فیلد خود قرار دهید را مشخص نمایید. پشتیبانی از Html5 |
| min | number date | توسط این خصوصیت می توانید تعداد مینیموم کاراکتری که می خواهید در فیلد خود قرار دهید را مشخص نمایید. پشتیبانی از Html5 |
| multiple | multiple | توسط این خصوصیت می توانید بیشتر از یک مقدار در تگ input قرار دهید. پشتیبانی از Html5 |
| name | text | توسط این خصوصیت یک نام برای تگ input قرار می دهیم. |
| pattern | regexp | بااستفاده از این خصوصیت یک الگو برای اعتبار سنجی فیلد ورودی می توانید مشخص کنید. پشتیبانی از Html5 |
| placeholder | text | توسط این خصوصیت می توانید نمونه ای از ورودی مورد نظر را قرار دهید تا به صورت کمرنگ در فیلد قرار بگیرد و با قرار گیری موس روی فیلد مورد نظر از بین می رود. پشتیبانی از Html5 |
| readonly | readonly | نشان دهنده این است که فیلد مورد نظر فقط خواندنی است. |
| required | required | این خصوصیت نشان می دهد که پر کردن فیلد توسط کاربر الزامی است. پشتیبانی از Html5 |
| size | number | توسط این تعداد کاراکتری که میتواند در تگ input قرار گیرد مشخص می شود. |
| src | URL | توسط این خصوصیت می توانید آدرس تصویری که میخواهید به عنوان دکمه جستجو استفاده کنید را قرار می دهید. این خصوصیت تنها برای image به کار میرود. |
| step | number | با استفاده از این خصوصیت می توانید مشخص کنید که تعداد فاصله ها در تگ input چگونه باشد. پشتیبانی از Html5 |
| type | button checkbox color date datetime datetime-local file hidden image month number password radio range reset search submit tel text time url week | توسط این خصوصیت می توانید مشخص کنید که نوع و نحوه نمایش تگ input به چه صورت باشد. می تواند به صورت دکمه یا فایل یا پسورد و یا ایمیل وغیره وجود داشته باشد. |
| value | text | با استفاده از این خصوصیت می توانید برای تگ input یک مقدار را مشخص نمایید. |
| width | pixels | توسط این خصوصیت می توانید عرض تگ input را مشخص نمایید. پشتیبانی از Html5 |
تگ input تمام ویژگی های عمومی و رویداد های عمومی را در Html پشتیبانی میکند.
تمامی مرور گر ها را پشتیبانی می کند.