تیک تم بازاریابی اینترنتی سئو و بهینه سازی وب سایت آموزش وردپرس 
"
بخش سی و پنجم-ویژگی های ورودی HTML
| قدم قبلی > | < قدم بعدی |
در این آموزش html به معرفی ویژگی های ورودی HTML می پردازیم.
ویژگی value
ویژگی value مقدار اولیه برای یک فیلد ورودی را مشخص می کند:
1 2 3 4 | <form action=""> First name:<br> <input type="text" name="firstname" value="John"> </form> |
ویژگی readonly
ویژگی readonly مشخص می کند که فیلد ورودی فقط خواندنی است (قابل تغییر نیست):
1 2 3 4 | <form action=""> First name:<br> <input type="text" name="firstname" value="John" readonly> </form> |
ویژگی disabled
ویژگی disabled مشخص می کند که فیلد ورودی غیرفعال است.
یک فیلد ورودی غیرفعال غیر قابل استفاده و غیر قابل کلیک است و در هنگام ارسال فرم آن ارزش ارسال نمی شود:
1 2 3 4 | <form action=""> First name:<br> <input type="text" name="firstname" value="John" disabled> </form> |
ویژگی size
ویژگی size اندازه (در حروف) را برای فیلد ورودی مشخص می کند:
1 2 3 4 | <form action=""> First name:<br> <input type="text" name="firstname" value="John" size="40"> </form> |
ویژگی maxlength
ویژگی maxlength حداکثر طول طول مجاز برای فیلد ورودی را مشخص می کند:
1 2 3 4 | <form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> </form> |
با یک ویژگی maxlength ، فیلد ورودی بیش از تعداد مجاز کاراکترها را قبول نخواهد کرد.
ویژگی maxlength هر بازخوردی را ارائه نمی دهد. اگر می خواهید به کاربر هشدار دهید، باید کد جاوا اسکریپت را بنویسید.
نکته: محدودیت های ورودی به اندازه ای احمقانه نیستند و جاوا اسکریپت بسیاری از راه های اضافه کردن ورودی های غیر قانونی را فراهم می کند. برای ایمن کردن ورودی، باید توسط گیرنده (سرور) نیز بررسی شود!
ویژگی های HTML5
HTML5 ویژگی های زیر را برای <input> اضافه کرد:
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern
- placeholder
- required
- step
و ویژگی های زیر برای <form>:
- autocomplete
- novalidate
ویژگی autocomplete
ویژگی autocomplete مشخص می کند که آیا یک فرم یا فیلد ورودی باید به صورت خودکار تکمیل شود یا خاموش شود.
هنگامی که ویژگی autocomplete فعال است، مرورگر به طور خودکار مقادیر ورودی را بر اساس مقادیری که کاربر قبل وارد کرده است، کامل میکند.
نکته: ممکن است برای تکمیل فرم به صورت خودکار “برای” و “خاموش” برای فیلدهای ورودی خاص یا برعکس باشد.
ویژگی تکمیل خودکار با <form> و انواع زیر <input> کار می کند: متن، جستجو، آدرس، تلفن، ایمیل، رمز عبور، datepickers، محدوده و رنگ.
1 2 3 4 5 6 | <form action="/action_page.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form> |
نکته: در بعضی از مرورگرها ممکن است لازم باشد عملکرد تکمیل خودکار را برای این کار فعال کنید.
ویژگی novalidate
ویژگی novalidate یک ویژگی <form> است.
هنگامی که در حال حاضر، Novalidate مشخص می کند که داده های فرم هنگام ارسال نمایش داده نمی شود.
1 2 3 4 | <form action="/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form> |
ویژگی autofocus
ویژگی autofocus مشخص می کند که وقتی که صفحه بارگذاری می شود، زمینه ورودی باید به طور خودکار فوکوس شود.
1 | First name:<input type="text" name="fname" autofocus> |
ویژگی form
ویژگی form یک یا چند فرم را مشخص می کند که عنصر <input> متعلق به آن است.
نکته: برای مراجعه به بیش از یک فرم، از یک لیست از شناسه های فرم جدا شده فضا استفاده کنید.
1 2 3 4 5 6 | <form action="/action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form> Last name: <input type="text" name="lname" form="form1"> |
ویژگی formaction
ویژگی formaction نشانی اینترنتی یک فایل را مشخص می کند که هنگام ورود فرم به کنترل ورودی پردازش می کند.
خصیصه formaction خاصیت عمل عنصر <form> را لغو می کند.
ویژگی formaction با نوع = “submit” و type = “image” استفاده می شود.
1 2 3 4 5 6 7 | <form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="/action_page2.php" value="Submit as admin"> </form> |
ویژگی formenctype
مشخصه formenctype مشخص می کند که چگونه داده های فرم هنگام ارسال ارسال شوند (فقط برای فرم ها با روش = “post”).
ویژگی formenctype ویژگی خاصی از عنصر <form> را از بین می برد.
formenctype ویژگی با نوع = “submit” و type = “image” مورد استفاده قرار می گیرد.
1 2 3 4 5 6 | <form action="/action_page_binary.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form> |
ویژگی formmethod
formmethod متد HTTP را برای ارسال فرم داده به URL عمل تعریف می کند.
ویژگی formmethod خصوصی صحیح عنصر <form> را از بین می برد.
ویژگی Formmethod را می توان با نوع = “submit” و type = “image” استفاده کرد.
1 2 3 4 5 6 | <form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" value="Submit using POST"> </form> |
ویژگی formnovalidate
ویژگی formnovalidate ویژگی نوالدیت عنصر <form> را از بین می برد.
ویژگی formnovalidate را می توان با نوع = “submit” استفاده کرد.
1 2 3 4 5 | <form action="/action_page.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form> |
ویژگی formtarget
ویژگی formtarget یک نام یا یک کلمه کلیدی را مشخص می کند که نشان می دهد کجا پاسخی را که پس از ارسال فرم دریافت شده است نمایش دهد.
ویژگی formtarget مشخصه هدف عنصر <form> را از بین می برد.
ویژگی formtarget را می توان با نوع = “submit” و type = “image” استفاده کرد.
1 2 3 4 5 6 7 | <form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window"> </form> |
ویژگی های width و height
ویژگی های width و height ، ارتفاع و عرض یک عنصر <input type = “image”> را مشخص می کند.
همیشه اندازه تصاویر را مشخص کنید. اگر مرورگر اندازه را نمی داند، صفحه هنگام بارگیری تصاویر، سوسو می شود.
1 | <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48"> |
ویژگی list
ویژگی list لیست به عنصر <datalist> اشاره دارد که حاوی گزینه های پیش تعریف شده برای یک element <input> است.
1 2 3 4 5 6 7 8 9 | <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> |
ویژگی های min و max
ویژگی های min و max مقدار حداقل و حداکثر برای یک عنصر <input> را مشخص می کند.
ویژگی های min و max با انواع ورودی های زیر کار می کنند: شماره، محدوده، تاریخ، تاریخ زمان محلی، ماه، زمان و هفته.
1 2 3 4 5 6 7 8 | Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> |
ویژگی multiple
ویژگی multiple مشخص می کند که کاربر مجاز است بیش از یک مقدار را در عنصر <input> وارد کند.
ویژگی multiple با انواع ورودی زیر کار می کند: ایمیل و فایل.
1 | Select images: <input type="file" name="img" multiple> |
ویژگی pattern
ویژگی pattern یک عبارت منظم را مشخص می کند که مقدار عنصر <input> در مقابل آن بررسی می شود.
ویژگی pattern با انواع ورودی های زیر کار می کند: متن، جستجو، آدرس، تلفن، ایمیل و رمز عبور.
نکته: برای توصیف الگوی برای کمک به کاربر از ویژگی عنوان جهانی استفاده کنید.
نکته: درباره عبارات منظم در آموزش جاوا اسکریپت بیشتر بدانید.
1 | Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> |
ویژگی placeholder
ویژگی placeholder اشاره می کند به یک نکته که ارزش مورد انتظار یک فیلد ورودی را توصیف می کند(یک مقدار نمونه یا یک توضیح کوتاه از قالب).
نکته: قبل از ورود کاربر به یک مقدار در قسمت ورودی نمایش داده می شود.
ویژگی placeholder یا سوراخ کار با انواع ورودی زیر کار می کند: متن، جستجو، آدرس، تلفن، ایمیل و رمز عبور
1 | <input type="text" name="fname" placeholder="First name"> |
ویژگی required
ویژگی required مشخص می کند که یک فیلد ورودی قبل از ارسال فرم باید پر شود.
ویژگی required با انواع ورودی زیر کار می کند: متن، جستجو، آدرس، تلفن، ایمیل، رمز عبور، جمع کننده تاریخ، شماره، چک باکس، رادیو و فایل.
1 | Username: <input type="text" name="usrname" required> |
ویژگی step
ویژگی step فواصل عددی قانونی را برای عنصر <input> مشخص می کند.
مثال: اگر step = “3”، اعداد قانونی می توانند -۳، ۰، ۳، ۶ و غیره باشند
نکته: ویژگی step را می توان با ویژگی های حداکثر و حداقل برای ایجاد طیف وسیعی از مقادیر قانونی مورد استفاده قرار داد.
ویژگی step با انواع ورودی زیر کار می کند: تعداد، محدوده، تاریخ، تاریخ زمان محلی، ماه، زمان و هفته.
1 | <input type="number" name="points" step="3"> |
| گام قبلی > | < گام بعدی |
