آموزش خصوصیات ورودی در HTML

0 دیدگاه

با جلسه بیست و ششم که جلسه آخر آموزش متنی طراحی وب سایت با Html است در خدمت شما هستیم. در این جلسه آموزش خصوصیات ورودی در HTML رو به شما آموزش میدیم.

آموزش خصوصیات ورودی در HTML

وجود فرم‌ها در صفحات سایت، یکی از ویژگی‌های مهم در جلب مخاطب و همچنین دریافت اطلاعات اختصاصی از کاربران است. بعضی از سایت‌ها فقط به فرم ثبت‌نام کاربر بسنده می‌کنند، اما بعضی دیگر با استفاده هوشمندانه از فرم‌ها، اطلاعات مفیدی از کاربران دریافت کرده و محتوای مورد نیاز آن‌ها را به طور اختصاصی نمایش می‌دهند.

فرم‌ها انواع مختلف ورودی مثل عدد، متن، تاریخ، زمان و غیره را دریافت می‌کنند. هر یک از این ورودی‌ها دارای یک نوع خصوصیت یا attribute هستند. در ادامه با انواع خصوصیات ورودی در HTML آشنا می‌شویم.

خصوصیت value در HTML

خصوصیت مقدار (value)، مقدار اولیه برای یک فیلد ورودی را مشخص می‌کند:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
</form>

First name:<br>

</form>

خصوصیت readonly در HTML

خصوصیت readonly مشخص می‌کند که فیلد ورودی فقط خواندنی (غیر قابل تغییر) باشد:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
</form>

First name:<br>

</form>

خصوصیت disabled در Html

خصوصیت disabled مشخص می‌کند که فیلد ورودی به حالت غیرفعال باشد. فیلد ورودی غیرفعال نه قابل استفاده و نه قابل کلیک شدن است و مقدار آن در هنگام فرستادن فرم، ارسال نخواهد شد:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
</form

First name:<br>

</form

خصوصیت size در HTML

خصوصیت size اندازه بر حسب کاراکتر را برای فیلد ورودی مشخص می‌کند:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
</form>

First name:<br>

</form>

خصوصیت maxlength در HTML

خصوصیت maxlength حداکثر طول مجاز برای فیلد ورودی را مشخص می‌کند:

<form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
</form>

First name:<br>

</form>

با استفاده از این خصوصیت فیلد ورودی بیشتر از تعداد کاراکتر مجاز را قبول نخواهد کرد. خصوصیت maxlength هیچ نشانه‌ای در اختیار کاربر قرار نمی‌دهد. اگر می‌خواهید به کاربر در مورد ماکزیمم طول مجاز اطلاع دهید باید از کد جاوا اسکریپت استفاده کنید. این نکته را به یاد داشته باشید که استفاده از قابلیت محدودیت در ورودی خالی از خطا و اشتباه نیست و اینکه جاوا اسکریپت راه‌های بسیاری برای افزودن ورودی مجاز دارد. برای ایجاد محدودیت ایمن در ورودی‌ها، باید سمت سرور را هم بررسی کرد.

انواع مختلف خصوصیات در HTML5

نسخه HTML5 خصوصیات زیر را برای <input> اضافه کرده است:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

همچنین خصوصیات زیر برای <form> توسط HTML5 افزوده شده است:

autocomplete
novalidate

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

خصوصیت autocomplete در HTML

خصوصیت autocomplete مشخص می‌کند که تکمیل خودکار یک فرم یا یک فیلد ورودی فعال یا غیرفعال باشد. وقتی این خصوصیت در حالت فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس ورودی‌هایی که کاربر قبلا وارد کرده است، کامل می‌کند. می‌توان خصوصیت autocomplete را برای فرم به صورت فعال و برای برخی از فیلدهای ورودی به صورت غیرفعال تنظیم کرد یا بالعکس. این خصوصیت با <form> و انواع ورودی شامل متن، جستجو، url، شماره تلفن، ایمیل، کلمه عبور، datepicker، دامنه و رنگ قابل اجرا است. در مثال زیر خصوصیت autocomplete برای فرم در حالت فعال و برای یک فیلد ورودی در حالت غیر فعال قرار دارد:

<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>

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>

</form>

این نکته را به یاد داشته باشید که ممکن است در برخی از مرورگرها لازم باشد حتما خصوصیت autocomplete را فعال کنید تا این کد اجرا شود.

خصوصیت novalidate در HTML

خصوصیت novalidate یک خصوصیت <form> است. این خصوصیت مشخص می‌کند که داده‌های فرم نباید هنگام ارسال تایید اعتبار شوند. مثال زیر نشان می‌دهد که فرم ارسال شده معتبر شناخته نمی‌شود:

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

E-mail: <input type="email" name="user_email">

</form>

خصوصیت autofocus در HTML

خصوصیت autofocus مشخص می‌کند که فیلد ورودی باید در زمان بارگذاری سایت به صورت خودکار در حالت فوکوس قرار داشته باشد. در مثال زیر به صورت خودکار در زمان بارگذاری صفحه تمرکز روی فیلد ورودی “First name” است:

First name:<input type="text" name="fname" autofocus>

1	First name:<input type="text" name="fname" autofocus>

خصوصیت form در HTML

خصوصیت form یک یا چند فرمی که عنصر <input> به آن‌ها تعلق دارد را مشخص می‌کند. این نکته را به یاد داشته باشید که برای اشاره به بیش از یک فرم باید از یک فهرست از id‌ فرم‌ها که با فاصله از هم جدا شده‌اند، استفاده کنید. در مثال یک فیلد ورودی را نشان می‌دهد که خارج از فرم HTML قرار دارد اما همچنان بخشی از فرم است:

<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">

First name: <input type="text" name="fname"><br>

</form>

Last name: <input type="text" name="lname" form="form1">

خصوصیت formaction در HTML

این خصوصیت مشخص‌کننده url فایلی است که کنترل ورودی را در زمان ارسال فایل پردازش می‌کند. خصوصیت formaction خصوصیت action مربوط به عنصر <form> را لغو می‌کند. خصوصیت formaction با “type=”submit و “type=”image به کار می‌رود. مثال زیر مربوط به یک فرم HTML با دو دکمه submit و action های متفاوت است:

<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>

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" formaction="/action_page2.php"

value="Submit as admin">

</form>

خصوصیت formenctype در HTML

خصوصیت formenctype مشخص می‌کند که داده‌های فرم در زمان ارسال چگونه رمزگذاری شوند (فقط برای فرم‌هایی با method=”post”). این خصوصیت بر خصوصیت enctype مربوط به عنصر <form> برتری داشته و با “type=”submit و “type=”image به کار می‌رود. در مثال زیر دکمه submit اول داده‌های فرم که به صورت پیش‌فرض رمزگذاری شده‌اند را ارسال کرده و به صورت “multipart/form-data” رمزگذاری می‌شوند (دکمه submit دوم):

<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>

First name: <input type="text" name="fname"><br>

<input type="submit" formenctype="multipart/form-data"

value="Submit as Multipart/form-data">

</form>

خصوصیت formmethod در HTML

خصوصیت formmethod روش http برای ارسال داده‌های فرم به action url را تعریف می‌کند. این خصوصیت بر خصوصیت method متعلق به عنصر <form> برتری دارد. این خصوصیت را می‌توان با “type=”submit و “type=”image به کار برد. در مثال زیر، دکمه submit دوم روش http فرم را لغو می‌کند:

<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>

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

</form>

خصوصیت formnovalidate در HTML

خصوصیت formnovalidate بر خصوصیت novalidate مربوط به عنصر <form> برتری داشته و می‌توان آن را با “type=”submit به کار برد. در مثال زیر، یک فرم با دو دکمه submit (با اعتبارسنجی و بدون اعتبارسنجی) وجود دارد:

<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>

E-mail: <input type="email" name="userid"><br>

</form>

خصوصیت formtarget در HTML

خصوصیت formtarget یک نام یا یک کلمه عبور را مشخص می‌کند که نشان می‌دهد پاسخ دریافت‌شده پس از ارسل فرم در کجا نمایش یابد. این خصوصیت بر خصوصیت target عنصر <form> برتری دارد و از آن می‌توان با “type=”submit و “type=”image استفاده کرد. در مثال زیر دو دکمه submit با پنجره‌های هدف متفاوت وجود دارد:

<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>

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<input type="submit" formtarget="_blank"

value="Submit to a new window">

</form>

خصوصیات height و width در HTML

این خصوصیات طول و عرض یک عنصر <“input type=”image> را مشخص می‌کنند. همیشه باید اندازه تصویر را مشخص کنید. اگر مرورگر اندازه تصویر را نداند، صفحه شما در زمان بارگذاری عکس می‌لرزد. در مثال زیر یک تصویر به عنوان دکمه submit تعریف می‌شود که دارای خصوصیت‌های height و width است:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

1	<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

خصوصیت list در HTML

خصوصیت list به یک عنصر <datalist> اشاره می‌کند که حاوی گزینه‌های از پیش تعریف شده برای یک عنصر <input> است. مثال زیر یک عنصر <input> با مقادیر از پیش تعریف شده در یک <datalist> است:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

</datalist>

خصوصیات min و max در HTML

این خصوصیات مقادیر حداقل و حداکثر را برای عنصر <input> مشخص کرده و با انواع ورودی شامل عدد، دامنه، تاریخ، datetime-local، ماه، زمان و هفته اجرا می‌شود. مثال زیر عنصرهای <input> با مقادیر min و max را نشان می‌دهد:

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">

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

خصوصیت multiple در HTML

این خصوصیت مشخص می‌کند که کاربر اجازه وارد کردن بیش از یک مقدار را در عنصر <input> دارد. خصوصیت multiple با انواع داده‌های ورودی شامل ایمیل و فایل کار می‌کند. مثال زیر یک فیلد آپلود فایل را نشان می‌دهد که چندین مقدار را می‌پذیرد:

Select images: <input type="file" name="img" multiple>

1	Select images: <input type="file" name="img" multiple>

خصوصیت pattern در HTML

خصوصیت pattern یک عبارت با قاعده تعریف می‌کند که مقدار عنصر <input> با آن مقایسه و بررسی می‌شود. این خصوصیت با ورودی‌های متن، جستجو، url، تلفن، ایمیل و کلمه عبور کار می‌کند. می‌توانید برای کمک به کاربر از خصوصیت جهانی title برای توصیف الگو استفاده کنید. در مثال زیر یک فیلد ورودی وجود دارد که تنها حاوی سه حرف است (بدون عدد یا کاراکتر خاص):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

1	Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

خصوصیت placeholder در HTML

این خصوصیت یک نکته (یک مقدار نمونه یا یک توصیف کوتاه از فرمت) ایجاد می‌کند که مقدار پیش‌بینی شده یک فیلد ورودی را توصیف می‌کند. این نکته قبل از آنکه کاربر مقداری را در فیلد ورودی وارد کند در فیلد نمایش داده می‌شود. خصوصیت placeholder با انواع ورودی شامل متن، جستجو، url، تلفن، ایمیل و کلمه عبور به کار می‌رود. مثال زیر یک فیلد ورودی که دارای متن placeholder است را نشان می‌دهد:

<input type="text" name="fname" placeholder="First name">

1	<input type="text" name="fname" placeholder="First name">

خصوصیت required در HTML

این خصوصیت مشخص می‌کند که یک فیلد ورودی حتما باید قبل از ارسال فرم پر شود. معمولا این فیلدهای برای اطلاعات مهم کاربر هستند. این خصوصیت با ورودی‌های متن، جستجو، url، تلفن، ایمیل، کلمه عبور، انتخاب‌کننده تاریخ، عدد، چک باکس، رادیو باتن و فایل استفاده می‌شود. مثال زیر یک فیلد ورودی با خصوصیت required را نشان می‌دهد:

Username: <input type="text" name="usrname" required>

1	Username: <input type="text" name="usrname" required>

خصوصیت step در HTML

این خصوصیت تعداد مجاز مراحل را برای یک عنصر <input> مشخص می‌کند. به عنوان مثال، اگر “step=”3 باشند، اعداد مجاز می‌تواند 3-، 0، 3، 6 و غیره باشند. به یاد داشته باشید که خصوصیت step می‌تواند همراه با خصوصیات max و min برای تولید یک دامنه از مقادیر مجاز به کار رود. این خصوصیت با ورودی‌های عدد، دامنه، تاریخ، datetime-local، ماه، زمان و هفته مورد استفاده قرار می‌‌گیرد. مثال زیر یک فیلد ورودی با وقفه‌های عددی مجاز را نشان می‌دهد:

<input type="number" name="points" step="3">

1	<input type="number" name="points" step="3">

این هم از آخرین جلسه آموزش Html که به اتمام رسید. امیدوارم این آموزش مورد توجه همراهان عزیز قرار گرفته باشد.

منبع

لیست جلسات قبل آموزش Html

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با پاراگراف و استایل در Html

آموزش کار با قالب بندی متن در Html

آموزش کار با کامنت در HTML

آموزش کار با کامنت در HTML

آموزش کار با رنگ ها در HTML

آموزش کار با تصاویر در HTML

آموزش کار با لینک در HTML

آموزش کار با جدول در HTML

آموزش کار با لیست ها در HTML

آموزش کار با عناصر Block و Inline در HTML

آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش کار با عنصر Head در HTML

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (3 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۲۵ شهریور ۱۳۹۹

آموزش خصوصیات ورودی در HTML

آموزش خصوصیات ورودی در HTML

خصوصیت value در HTML

خصوصیت readonly در HTML

خصوصیت disabled در Html

خصوصیت size در HTML

خصوصیت maxlength در HTML

انواع مختلف خصوصیات در HTML5

خصوصیت autocomplete در HTML

خصوصیت novalidate در HTML

خصوصیت autofocus در HTML

خصوصیت form در HTML

خصوصیت formaction در HTML

خصوصیت formenctype در HTML

خصوصیت formmethod در HTML

خصوصیت formnovalidate در HTML

خصوصیت formtarget در HTML

خصوصیات height و width در HTML

خصوصیت list در HTML

خصوصیات min و max در HTML

خصوصیت multiple در HTML

خصوصیت pattern در HTML

خصوصیت placeholder در HTML

خصوصیت required در HTML

خصوصیت step در HTML

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط