تگ input در HTML

با تگ input در HTML آشنا می شویم.

نکات اصلی تگ input

• تگ input در HTML عنصری را برای بازیابی اطلاعات از کاربران ایجاد می کند.
• ویژگی نوع HTML یک عنصر <input> زمینه های ورودی متفاوتی را ایجاد می کند.

استفاده از تگ input در HTML

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

توجه: HTML تگ <input> درون یک عنصر <form> قرار دارد.

Name: <input type="text" name="name"><br>

ویژگی های تگ input در HTML

accept

این نوع پرونده هایی را که از ورودی پرونده در سرور پذیرفته می شوند ، مشخص می کند.

<input type="file" name="picture" accept="image/*">

align

ترازوی افقی و عمودی عناصر ورودی را تنظیم می کند.

توجه: در HTML5 پشتیبانی نمی شود.

در عوض از ویژگی float CSS استفاده کنید. بیاموزید که چگونه در CSS Layout Float و پاک کنید.

<input type="image" src="submit.png" alt="Proceed" align="right" width="50" height="50">

alt در تگ input

این یک متن برای ورودی تصویر را نشان می دهد ، که در عوض هنگام بارگیری تصاویر نشان داده نمی شود.

<input type="image" src="submit.png" alt="Proceed">

autocomplete

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

<input type="text" name="username" autocomplete="on">

این مورد برای این انواع ورودی HTML اعمال می شود: url ، جستجو ، تلفن ، متن ، رمز ورود ، ایمیل ، دامنه و رنگ.

autofocus

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

<input type="text" name="name" autofocus>

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

checked

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

<input type="checkbox" name="role" value="jobSeeker"> I am a Job Seeker<br>
<input type="checkbox" name="role" value="student" checked> I am a Student<br>

dirname

این یک جهت برای ارسال متن است.

<input type="text" name="city" dirname="cityname.dir">

disabled

این یک عنصر ورودی را نشان می دهد که مقادیری نخواهد گرفت.

<input type="text" name="name" disabled>

توجه: این ویژگی ورودی HTML کاربران را از استفاده از عنصر <input> تا رسیدن به برخی دیگر از شرایط (مانند توافق با شرایط و ضوابط) بازمی دارد.

form

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

<form id="travel">
  Source: <input type="text" name="source"><br>
  Days: <input type="text" name="days"><br>
  <input type="submit" value="Calculate">
</form>
Destination: <input type="text" name="destination" form="travel">

توجه: برای مرتبط کردن عنصر با چندین فرم ، شناسه های فرم را با فاصله از هم جدا کنید (همه فرم ها باید در یک پرونده باشند).

<form action="/learn/action.php" id="form1">
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname" form="form1">
  <input type="submit" value="Submit">
</form>

formaction در تگ input

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

<form action="action.php">
  Name: <input type="text" name="fir_name"><br>
  Surname: <input type="text" name="las_name"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="admin.php" value="Admin Submit">
</form>

توجه: وقتی دکمه ارسال ویژگی شکل گیری را دارد ، می توان چندین URL ارسال فرم را نشان داد.

<form action="/login.php">
  Your Username <input type="text" name="name"><br>
  Your Password <input type="password" name="password"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/verify.php" value="Verify User">
</form>

formenctype

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

<form action="/verify.php" method="post">
  Verify your Email: <input type="email" name="emailField"><br>
  <input type="submit" formenctype="multipart/form-data" value="Submit">
</form>

<form action="/learn/demo_file.php" method="post">
  Favourite color: <input type="text" name="color"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data" value="Multipart & form-data Submition">
</form>

formmethod

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

<form action="/submit.php" method="post">
  Username: <input type="text" name="username"><br>
  Password <input type="password" name="pass"><br>
  Verify Password <input type="password" name="passcheck"><br>
  <input type="submit" formmethod="post" value="Submit">
</form>

توجه: این ویژگی نسبت به ویژگی متدی که در تگ <form> استفاده می شود اولویت بندی شده است.

<form action="/learn/form_methods.php" method="get">
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="/learn/form_methods.php" value="Submit with post">
</form>

formnovalidate

این نشان می دهد که در هنگام ارسال ، داده ها لازم نیست تأیید شوند.

<form action="/submit.php" method="get">
  Enter E-mail ID: <input type="email" name="userEmailID"><br>
  Enter Username: <input type="text" name="userName"><br>
  Enter Surname: <input type="text" name="userSurname"><br>
  <input type="submit" formnovalidate="formnovalidate" value="Not Validated">
</form>

نکته: اولویت این ویژگی نسبت به ویژگی nvalidate منظم مورد استفاده در تگ <form> است.

<form action="/learn/action_file.php">
  Email of the user: <input type="email" name="useremail"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="no validation submit">
</form>

formtarget

این مکان را برای باز کردن پاسخ سرور پس از ارسال فرم مشخص می کند. این ویژگی ورودی HTML نسبت به ویژگی مورد استفاده در تگ <form> اولویت بندی شده است.

<form action="/learn/action.php">
  Name: <input type="text" name="name"><br>
  Surname: <input type="text" name="surname"><br>
  <input type="submit" value="Submit as usual">
  <input type="submit" formtarget="_blank_form_target" value="New Window Submit">
</form>

<form action="/reload_data.php" method="post">
  Verify Email: <input type="email" name="emailVerify"><br>
  Verify Phone No: <input type="text" name="number"><br>
  <input formtarget="_blank" value="Open a new window and submit" type="submit">
</form>

height

ارتفاع یک عنصر ورودی از نوع تصویر را تنظیم می کند.

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

list

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

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

<input list="books">
<datalist id="books">
  <option value="Fiction">
  <option value="Non-Fiction">
</datalist>

<input list="animals">

<datalist id="animals">
  <option value="Lama">   
  <option value="Fire fox">
  <option value="Kitten">
  <option value="Cat">
  <option value="Cat again">
</datalist>

max در تگ input

حداکثر دامنه ورودی را برای یک عنصر ورودی تنظیم می کند.

<input type="number" name="age" min="18" max="25">

کد زیر شامل ترکیبی از حداکثر و حداقل است:

Enter a number lesser than 10:
<input type="number" name="num" max="9">
Enter a number greater than 10:
<input type="number" name="num" min="11">
Quantity (between -10 and 10):
<input type="number" name="qty" min="-10" max="10">

maxlength

حداکثر تعداد نویسه هایی را که کاربر می تواند برای یک عنصر ورودی وارد کند تنظیم می کند.

<!-- wp:code -->
<pre class="wp-block-code"><code></code></pre>
<!-- /wp:code -->

min

حداقل دامنه ورودی را برای یک عنصر ورودی تعیین می کند.

<input type="number" name="age" min="25">

multiple

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

<form action="/share.php">
  Type emails: <input type="email" name="emails" multiple>
  <!-- Type multiple emails separate each with a comma -->
  <input type="submit">
</form>

بخاطر بسپارید: این ویژگی با انواع ورودی HTML و ایمیل کار می کند.

در مثال زیر ، کاربران می توانند چندین تصویر را بارگذاری کنند:

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

name در تگ input

این یک نام برای یک عنصر ورودی تعریف می کند ، که کاملاً شبیه ID است.

<input type="text" name="client_name">
<input type="text" name="age">

pattern

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

<input type="text" name="name" pattern="[A-Z]{20}" title="Name in capital letters up to 20 characters">
<input type="password" name="password" pattern="[0-9A-Za-z]{8}" title="8 character password combination of letters and numbers">

این ویژگی برای این انواع ورودی HTML اعمال می شود: متن ، آدرس اینترنتی ، جستجو ، تلفن ، ایمیل و رمز عبور.

<input type="email" name="email" placeholder="Enter Your Email!">

placeholder

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

<input type="email" name="email" placeholder="Enter Your Email!">

محل نگهدارنده ویژگی برای این انواع ورودی HTML اعمال می شود: متن ، آدرس اینترنتی ، جستجو ، تلفن ، ایمیل و رمز عبور.

<input type="text" name="name" placeholder="Name">

readonly

این مشخص می کند که کاربران قادر به تغییر مقدار ورودی نخواهند بود.

<input type="email" name="email" value="hello@bitdegree.org" readonly>

required

مشخص می کند که هنگام ارسال فرم نمی توان قسمت ورودی را خالی گذاشت.

<input type="password" name="password" required>

این نوع ورودی اعمال می شود: متن ، آدرس اینترنتی ، جستجو ، ایمیل ، تلفن ، گذرواژه ، شماره ، رادیو ، کادر تأیید و پرونده.

همچنین ، می توان آن را بر روی این تگ ها اعمال کرد: <select> و <textarea>.

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

size در تگ input

عرض یک عنصر ورودی را به نویسه ها تعریف می کند.

<input type="text" name="phone" size="100">

این ویژگی اندازه عنصر ورودی را در نویسه ها تنظیم می کند. این متن برای این انواع ورودی HTML اعمال می شود: متن ، جستجو ، آدرس اینترنتی ، ایمیل ، گذرواژه.

src

این نشان دهنده پیوند منبع ورودی تصویر است.

<input type="image" src="arrow.png" alt="Submit">

step

تعداد فواصل زمانی را که داده ها به یک عنصر ورودی وارد می شوند ، تعریف می کند. اگر مرحله = “2” را می نوشتید ، ورودی های مناسب – 2 ، 0 ، 2 ، 4 ، و غیره.

<input type="number" name="expmonths" step="1">

این ویژگی را می توان برای این انواع ورودی HTML اعمال کرد: تعداد ، تاریخ ، دامنه ، datetime-local ، زمان داده ، زمان ، ماه و هفته.

<input type="number" name="score" step="2">

type

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

<input type="text" name="username">
<input type="number" name="phone">
<input type="email" name="email">

در اینجا تمام مقادیری که این ویژگی می تواند در HTML5 بدست آورد:

email	datetime-local	date	color	checkbox	button
password	number	month	image	hidden	file
tel	submit	search	reset	range	radio
		week	url	time	text

value در تگ input

این یک مقدار پیش فرض برای یک عنصر ورودی تعیین می کند.

<input type="text" name="username" value="Charles">

این ویژگی مقدار پیش فرض عنصر <input> را اضافه می کند. استفاده از این ویژگی ممکن است بسته به نوع ورودی متفاوت باشد. با:

• برای یک دکمه ، تنظیم مجدد ، ارسال – متن پیش فرض روی دکمه را تنظیم می کند.
• برای متن ، گذرواژه – مقدار پیش فرض قسمت ورودی را تنظیم می کند.
• رادیو ، تصویر – برای یک کادر تأیید ، مقدار ورودی انتخاب شده (مقدار ارسالی) را تنظیم می کند.

توجه: این ویژگی با نوع ورودی فایل قابل استفاده نیست.

width

عرض را برای یک عنصر ورودی از نوع تصویر تعریف می کند.

<input type="image" src="send.gif" alt="Submit" width="56" height="56">

پشتیبانی از مرورگر

این تگ در مرورگرهای : IE، safari ، firefox، cherom، opera  و Edge پشتیبانی می شود.

در دوره آموزش HTML بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.