فرم ها در HTML قسمت دوم

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>
فرم ها در HTML

لیست خاصیت های ورودی

بعد از دانستن در رابطه با انواع ورودی ها حالا بهتر هست که با خاصیت های تگ input بیشتر آشنا شویم. در جدول زیر تمامی خاصیت های موجود در تگ input می‌پردازیم.

در ادامه با هر خاصیت با یک مثال آشنا خواهیم شد.

فرم ها در HTML

خاصیت های اصلی تگ input

خب  حالا وقتشه که در مورد خاصیت هایی که در جدول لیست خاصیت ها دیدیم، بیشتر آشنا بشیم.

در ادامه خاصیت های اصلی تگ input را با مثال توضیح خواهیم داد.

خاصیت value در تگ input

این خاصیت موجود در تگ input مقدار اولیه عنصر ورودی را تعیین می کند.

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

خاصیت readonly در تگ input

این خاصیت برای تبدیل فیلد ورودی به یک فیلد فقط خواندنی استفاده می شود. فیلد فقط خواندنی امکان تغییر ندارد در نتیجه هیچ مقدار را در آن نمی توان تغییر داد.

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" readonly>
</form>
فرم ها در HTML

خاصیت disabled

این خاصیت برای غیرفعال کردن فیلد ورودی استفاده می شود. یک فیلد غیرفعال شده غیر قابل کلیک و استفاده است که مقدار آن در هنگام ثبت فرم ارسال نمی شود.

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" disabled>
</form>
فرم ها در HTML

خاصیت size

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

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4"><br><br>
  <input type="submit" value="Submit">
</form>
فرم ها در HTML

خاصیت maxlenght

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

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

نسخه HTML5 خاصیت های جدیدی را در تگ <input> ارائه می دهد که در ادامه آن ها را شرح می دهیم.

فرم ها در HTML

خاصیت autocomplete

این خاصیت تعیین می کند آیا تکمیل خودکار فرم یا فیلد ورودی باید خاموش یا روشن باشد.

هنگامی که autocomplete روشن باشد، مرورگر به صورت خودکار مقدار های ورودی را برپایه چیز هایی که قبلا وارد کرده است پر می کند.

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

خاصیت autocomplete هم بر روی <form> و هم بر روی <input> مانند text, search, url, tel, email, password, datepickers, range و color است.

<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 در تگ input

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

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>
فرم ها در HTML

خاصیت autofocus

این خاصیت تعیین می کند پس از بارگیری صفحه، فیلد مورد نظر باید دارای focus باشد.

First name:<input type="text" name="fname" autofocus>
فرم ها در HTML

خاصیت های height و width

این دو خاصیت تعیین کننده طول و عرض عنصر <input type=”image”> است.

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

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
فرم ها در HTML

خاصیت list

این خاصیت به عنصر <datalist> که حاوی option پیش تعیین شده برای تگ <input> است اشاره دارد.

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
فرم ها در HTML

خاصیت min و max

این خواص تعیین کننده حداکثر و حداقل برای خاصیت value موجود در <input> هستند.

خواص min و max با فیلد های ورودی number, range, date, datetime-local, month, time و week کار می کند.

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

توسط این خاصیت به کاربر اجازه داده می شود تا در فیلد ورودی بیش از یک مقدار وارد شود.

این خاصیت با فیلد های ورودی email و file کار می کند.

Select images: <input type="file" name="img" multiple>
فرم ها در HTML

خاصیت pattern

این خاصیت اجازه می دهد مقدار فیلد ورودی توسط عبارات منظم بررسی می شود.

این خاصیت برای فیلد های ورودی text, search, url, tel, email, password کار می کند.

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

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
فرم ها در HTML

خاصیت placeholder

این خاصیت تعیین کننده یک راهنمای کوتاه برای مقدار مورد انتظار از کاربر در فیلد ورودی است(یک مقدار ساده یا شرح کوتاه از فرمت ورودی)

این راهنمای کوتاه قبل از ورود اطلاعات توسط کاربر به نمایش در می آید. این خاصیت با فیلد های ورودی text, search, url, tel, email و password کار می کند.

<input type="text" name="fname" placeholder="First name">
فرم ها در HTML

خاصیت required در ورودی ها

این خاصیت تعیین می کند فیلد ورودی مورد نظر قبل از ثبت اطلاعات باید پر شود.

این خاصیت با فیلد های ورودی text, search, url, tel, email, password, date pickers, number, checkbox, radio و file کار می کند.

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

خاصیت step در تگ input

این خاصیت برای ایجاد فاصله در بین اعداد صحیح برای یک فیلد ورودی استفاده می شود. به عنوان مثال اگر مقدار step برابر با 3 باشد، اعداد قانونی می توانند -3 ، 0 ، 3 و غیره باشد.

این خاصیت با فیلد های ورودی number, range, date, datetime-local, month, time و week کار می کند.

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

فرم ها در HTML

خاصیت ورودی Form درHTML  

خاصیت های ورودی Form خاصیت هایی هستند که شما می‌تونید با استفاده از آن‌ها از یک input از آن input در یک یا چندین فرم استفاده کنید. همچنین می‌توانید خارج از فضای تگ form از input استفاده کنید.

از این خاصیت ها برای ثبت نام های چند بخشی استفاده می‌شود. مثلا وب سایت های فریلنسری که می‌خواهند فریلنسر و کارفرما ثبت نام کنند می‌توانند از فیلد های مشابه در دو فرم بدون تکرار استفاده کنند و فقط عملیات را با action نهایی متفاوت انجام دهند.

فرم ها در HTML

خاصیت form

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

نکته: برای استفاده بیش از یک id فرم در این خاصیت از یک لیست تفکیک شده توسط فاصله استفاده کنید.

<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">
فرم ها در HTML

خاصیت formaction

این خاصیت url یک فایل که باید در فیلد ورودی و در هنگام ثبت فرم تهیه شود را تعیین می کند.

خاصیت formaction خاصیت action موجود در <form> را لغو می کند. این خاصیت به همراه type=sumbit و type=image استفاده می شود.

<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>
فرم ها در HTML

خاصیت formenctype

این خاصیت تعیین می کند اطلاعات داخل فرم باید چگونه هنگام ارسال انکود شوند.

به یاد داشته باشید این خاصیت، خاصیت enctype موجود در <form> را لغو می کند.

خاصیت formenctype مانند خاصیت قبل به همراه type=submit و type=image استفاده می شود.

<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>
فرم ها در HTML

خاصیت formmethod در تگ input

این خاصیت برای تعیین نوع متد http مورد استفاده برای ارسال اطلاعات فرم در url خاصیت action استفاده می شود.

این خاصیت، خاصیت method موجود در <form> را لغو می کند.

خاصیت formmethod مانند خاصیت قبل به همراه type=submit و type=image استفاده می شود.

<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 در تگ input

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

این خاصیت، خاصیت novalidate موجود در <form> را لغو می کند.

خاصیت formnovalidate به همراه type=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>
فرم ها در HTML

خاصیت formtarget در تگ input

این خاصیت تعیین کننده نام یا keyword که بیانگر محل نمایش نتیجه ثبت اطلاعات فرم پس از دریافت نتیجه است.

خاصیت formtarget، خاصیت target موجود در <form> را لغو می کند.

این خاصیت همراه با type=submit و type=image استفاده می شود.

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

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

امیدوارم از این مقاله استفاده لازم را برده باشید،

جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.

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

نویسنده:راحله تبریزی