آشنایی با تگ Input و خاصیت های آن در HTML

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

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

تگ input

در دو مقاله پیشین یعنی مقاله آشنایی با تگ Form در HTML و آشنایی با عناصر فرم ها در HTML به صورت مختصر با تگ input که از عناصر یک فرم می‌باشد، آشنا شدیم.

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

نحوه پیاده سازی

مانند نمونه زیر از تگ input استفاده می‌کنیم.

<input type="" name="">

با اینحال در ادامه با انواع ورودی ها آشنا می‌شویم و برای هرکدام از آنها مثالی خواهیم زد. این مقاله را ادامه بدید که خیلی راه طولانی ای در پیش داریم.

انواع ورودی ها

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

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

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

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

خب تعدادشون واقعا زیاده و هرکدومشون کاربرد خاص خودشون رو دارند ولی خب این مقاله همیشه هست و نگران نباشید هر موقع فراموش کردید، میتونین وارد این مقاله بشین و دوباره بررسیشون کنید. پس خیلی حساس به حفظ کردن تک تکشون نشید. شاید text و radio و checkbox و password و file و submit و… فقط نیاز باشه =))

نوع Text در input

برای ایجاد فیلد ورودی متنی تک خطی از <input type="text"> استفاده می‌شود. البته اگر در تگ input از هیچ type استفاده نکنید، به صورت پیشفرض نوع text برای فیلد مشخص می‌شود.

مثال: در نمونه زیر دو فیلد تک خطی ایجاد شده است.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

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

نوع Password در تگ input

خب یکی از مهم ترین نوع ها که به عنوان یک طراح وب حتما باید با آن آشنا باشید. نوع Password یا رمز عبور هستش.

برای پیاده سازی این نوع از <input type="password"> استفاده می‌کنیم.

مثال : در مثال زیر از نوع رمز عبور استفاده کردیم و برای مثال دو ورودی Mizfa به عنوان نام کاربری و M!zF@Aca3emi به عنوان رمز عبور مشخص شده است.

<form action="/action_page.php">
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" value="Mizfa"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd" value="M!zF@Aca3emi"><br><br>
</form>

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

نوع Submit در input

برای ثبت نهایی فرم و ارسال آن به کنترل کننده فرم از <input type="submit"> استفاده می‌کنیم.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Ali"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Esmaeili"><br><br>
  <input type="submit" value="Submit">
</form>

همانطور که در تصویر میبینید، به عنوان پیشفرض عنوان Submit در کلید ثبت قرار گرفته است، با تغییر دادن value می‌توانید عنوان سفارشی خودتان را جای Submit قرار دهید و اگر کلا value برای کلید قرار ندهید هم عنوان Submit به صورت خودکار نمایش داده خواهد شد.

نوع Reset در input

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

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="Ali"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Esmaeili"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form>

نوع Radio در تگ input

دکمه های رادیویی را می‌توانید با استفاده از <input type="radio"> پیاده سازی کنید.

دکمه های رادیویی به شما اجازه می‌دهند که تنها یکی از گزینه های موجود را انتخاب کنید.

<form action="/action_page.php">
  <input type="radio" id="SEO" name="Mizfa" value="SEO">
  <label for="SEO">SEO</label><br>
  <input type="radio" id="content" name="Mizfa" value="content">
  <label for="content">Content Marketing</label><br>
  <input type="radio" id="other" name="Mizfa" value="other">
  <label for="other">Other</label><br><br>
</form>

نوع CheckBox در input

برای ایجاد چک باکس و فیلد های چند انتخابی از <input type="checkbox"> استفاده می‌کنیم.

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

<form action="/action_page.php">
  <input type="checkbox" id="seo" name="seo" value="SEO">
  <label for="seo"> SEO</label><br>
  <input type="checkbox" id="content" name="content" value="Content Marketing">
  <label for="content"> Content Marketing</label><br>
  <input type="checkbox" id="opt" name="opt" value="Optimization">
  <label for="opt"> Optimization</label><br><br>
</form>

نوع Button در input

برای ایجاد کلید در فرم ها می‌توانید از <input type="button"> استفاده کنید.

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

<input type="button" onclick="alert('Hello Mizfa!')" value="Click Me!">

نوع Color در تگ input

اگر در فیلد هایتان نیاز بود که رنگ انتخاب شود می‌توانید از <input type="color"> استفاده کنید.

این فیلد با توجه به پشتیبانی مرورگر شما یک انتخاب کننده رنگ ( Color Picker ) نمایش می‌دهد.

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>

نوع Date در input

برای نمایش تاریخ در فیلد هایمان از نوعی به شکل <input type="date"> استفاده می‌کنیم.

این نوع هم مانند نوع Color طبق پشتیبانی مرورگرتان یک انتخاب کننده تاریخ نمایش می‌دهد.

<form action="/action_page.php">
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
  <input type="submit" value="Submit">
</form>

توجه داشته باشید که :

شما می‌توانید با استفاده از کتابخانه های مختلف که در اینترنت موجود است، انتخاب کننده های رنگ و تاریخ را شخصی سازی کنید. برای مثال یک نمونه انتخاب کننده تاریخ که یک انتخاب کننده شبیه تم iOS برای شما ایجاد می‌کند، کتابخانه AnyPicker هستش.

با خاصیت min و max می‌توانید حداقل و حداکثر تاریخ را مشخص کنید. برای مثال در نمونه زیر شما در اولین فیلد می‌توانید تاریخی قبل از سال ۱۹۸۰ را وارد کنید و در فیلد دوم شما فقط می‌توانید تاریخی بیشتر از سال ۲۰۰۰ را وارد کنید.

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>
  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

نوع Datetime-local در input

با استفاده از نوع Datetime-local می‌توانید بدون در نظر گیری منطقه زمانی تاریخ و زمان را مشخص کنید. برای استفاده از آن باید از <input type="datetime-local"> استفاده کنید.

مانند دو نوع گذشته این نوع از فیلد ها هم با توجه به پشتیبانی مرورگر یک انتخاب کننده تاریخ را مشخص می‌کند. (برای مثال مرورگر Firefox به طور کلی از این نوع پشتیبانی نمی‌کند)

<form>
  <label for="birthdaytime">Birthday (date and time):</label>
  <input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>

نوع Email در input

برای قرار دادن فیلدی برای ایمیل می‌توانید از <input type="email"> استفاده کنید.

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

در بیشتر تلفن های هوشمند امروزی هم این فیلد را شناسایی می‌کنند و در کیبورد به ما علامت های at (@) و دامنه .com را پیشنهاد می‌دهند.

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

نوع File در input

یکی از مهمترین نوع input ها نوع File ها هستند. با استفاده از این نوع می‌توانید از کاربر فایل دریافت کنید و به سرور انتقال دهید.

پیاده سازی این نوع از input علاوه بر اهمیتش، دشواری خاص خود را نیز دارد.

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

برای پیاده سازی این نوع input از <input type="file"> استفاده می‌کنیم.

<form action="/action_page.php">
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile"><br><br>
</form>

نوع Month در تگ input

برای ایجاد فیلد با ماه و سال می‌توانید از <input type="month"> استفاده کنید.

بسته به پشتیبانی مرورگر شما، انتخاب کننده تاریخ در این فیلد نمایش داده می‌شود. (در مرورگر Firefox و Safari این نوع از input پشتیبانی نمی‌شود)

<form>
 <label for="bdaymonth">Birthday (month and year):</label>
 <input type="month" id="bdaymonth" name="bdaymonth">
</form>

نوع Number در input

برای فیلد عددی از <input type="number"> استفاده می‌کنیم.

شما می‌توانید محدودیت هایی برای انتخاب اعداد نیز ایجاد کنید.

<form action="/action_page.php">
  <label for="quantity">Quantity:</label>
  <input type="number" id="quantity" name="quantity" min="0" max="100" step="10" value="40">
  <input type="submit" value="Submit">
</form>

در مثال بالا حداقل عدد ۰ و حداکثر ۱۰۰ انتخاب شده است و جواب ها ۱۰ تا ۱۰ تا تغییر می‌کند. (البته بخش تغییر ده تایی در مرورگر هایی مثل Edge پشتیبانی نمی‌شود)

نوع Range در input

برای ایجاد یک فیلد برای انتخاب یک رنج از اعداد می توانید از <input type="range"> استفاده کنید.

به صورت پیش‌فرض این مقدار از ۰ تا ۱۰۰ تعیین شده است ولی شما می‌توانید نسبت به استفاده خودتون این رو تغییر بدید.

<form action="/action_page.php" method="get">
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
  <input type="submit" value="Submit">
</form>

نوع Search در input

برای ایجاد فیلد سرچ از <input type="search"> استفاده می‌کنیم.

به طور کلی این نوع از فیلد های input دقیقا مثل نوع text هست و تفاوتی نداره. (واسه قشنگیه 🙂 )

<form action="/action_page.php">
  <label for="gsearch">Search Google:</label>
  <input type="search" id="gsearch" name="gsearch">
  <input type="submit" value="Submit">
</form>

نوع Tel در input

برای قرار دادن شماره تلفن از <input type="tel"> استفاده می‌کنیم.

البته برای استفاده از این نوع input باید حتما یک pattern ایجاد کنید.

<form action="/action_page.php">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="0912-1234567" pattern="[0-9]{4}-[0-9]{7}" required><br><br>
  <small>Format: 0912-1234567</small><br><br>
  <input type="submit" value="Submit">
</form>

نوع Time در input

اگر میخواهیم یک زمان را در فیلد مشخص کنیم، از <input type="time"> استفاده می‌کنیم. (منطقه زمانی اهمیتی ندارد).

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

نوع Url در تگ input

برای قرار دادن آدرس اینترنتی در فیلد ها از <input type="url"> استفاده می‌کنیم.

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

در بیشتر تلفن های همراه این فیلد شناسایی می‌شود و در کیبورد کلید .com را برای سرعت بخشی در تکمیل فرم قرار می‌دهد.

<form action="/action_page.php">
  <label for="homepage">Add your homepage:</label>
  <input type="url" id="homepage" name="homepage">
  <input type="submit" value="Submit">
</form>

نوع Week در تگ input

برای نمایش هفته و سال در فیلد می‌توانید از <input type="week"> استفاده کنید.

این فیلد با توجه به مرورگر شما و پشتیبانی آن نمایش پیدا می‌کند.

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>

ایستگاه استراحت ۱

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

پس بیاین اولین ایستگاه استراحتمون رو با یک آشنایی کوتاه با بخش Client Side داشته باشیم و تنفس بگیریم و بریم سراغ ادامه این مقاله، چایی رو آوردین یا نه؟ شیر موز؟ اره اونم خوبه!

سمت کاربر یا Client side دقیقا چیزیست که کاربران ما در صفحاتمان مشاهده می‌کنند.

به طور کلی زیبایی صفحه ما و کلا هر آیتم دیداری وب سایت ما در بخش سمت کاربر یا Client Side دیده می‌شود.

زبان هایی که برای سمت کاربر استفاده می‌شود :

• HTML
• CSS
• Javascript

البته کتابخانه ها و فریم ورک هایی برای CSS و Javascript آمده است که می‌توانید با استفاده از آنها سرعت کد نویسی را افزایش دهید.

بله در وصف وب سایت هامون یک شعر نوشتیم ! (روز ۳۶ ام قرنطینه ویروس کورونا xD)

[box type=”info” align=”aligncenter” class=”” width=””]

وب سایت جانم

آنقدر زیبایی

که طراح‌ها به احترامت کلاه از سر بر می دارند!

و روی کاغذ طرح‌هایشان

عرق شرم می نشیند!

– علی اسمعیلی در قرنطینه ! –

[/box]

خب مرسی از توجهتون امیدوارم خستگیتون در رفته باشه، حالا دیگه استراحت بسه بریم سراغ ادامه مقاله 🙂

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

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

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

ایستگاه استراحت ۱.۵

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

سئو چیست؟

سئو یا SEO مخفف عبارت انگلیسی “Search Engine Optimization” است به معنی “بهینه سازی سایت برای موتورهای جستجو” نظیر گوگل. به عبارت دیگر به کمک تکنیک سئو ما می‌توانیم به شکل طبیعی رتبه یک وبسایت را در نتایج، بالاتر بیاوریم. – به نقل از دوره آموزش جامع سئو میزفا

من تمام تلاشم را در مقالات کردم که اصول سئو که در هر تگ مورد نیاز هست، رو توضیح بدم.

خب امیدوارم خستگیتون در رفته باشه، حالا وقتشه بریم سراغ خاصیت های اصلی تگ input…

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

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

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

خاصیت value در تگ input

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

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

خاصیت readonly در تگ input

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

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

خاصیت disabled

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

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

خاصیت 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>

خاصیت maxlenght

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

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

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

خاصیت 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>

خاصیت autofocus

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

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

خاصیت های height و width

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

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

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

خاصیت 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>

خاصیت 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>

خاصیت 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">

خاصیت placeholder

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

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

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

خاصیت 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">

ایستگاه استراحت ۲

با خاصیت های اصلی تگ input آشنا شدیم و با مثال هاشون هم آشنا شدیم. قبل از ادامه دادن و بررسی خاصیت های ورودی Form که به ما اجازه می‌دهد خارج از فرم ها نیز input هایی را بگذاریم و ازشون درون فرم هامون استفاده کنیم. همچنین می‌توانیم از آن input در چندین فرم استفاده کنیم و… حالا در ادامه با این خاصیت ها آشنا میشیم ولی قبل از ادامه دادن یه ایستگاه استراحت داشته باشیم و یه ذره تنفس بگیریم.

استراحتگاه آخرمون میخواهم در رابطه با بخش Server Side یک وب سایت صحبت کنیم.

به طور کلی به مجموعه عملیات هایی که در سرور ما انجام می‌شود گفته می‌شود.

زبان های سمت سروری که امروزه بسیار پر طرفدار هستند به شرح زیر هستند :

• ASP.net
• PHP
• Go
• Python
• Java
• و در این چند سال اخیر بخشی از کتابخانه ها و فریمورک های جاوا اسکریپت

دلیل استفاده از برنامه های سمت سرور این است که بعضی از عملیات ها امکان اجرا شدنشون در سمت کاربر یا Client Side نیست یا از نظر امنیتی قابل اعتماد نیست.

بعد از یادگیری HTML و CSS شما می‌توانید به یادگیری یک زبان سمت سرور بپردازید. بدون آشنایی با HTML مطمئنا امکان درک کد ها را در زبان های مختلف نخواهید داشت. ما در بلاگ میزفا مقالاتی در رابطه با آشنایی با ASP.NET MVC داریم که می‌توانید آن‌ها را بخوانید و همچنین می‌توانید یک قدم جلو تر بردارید و از آموزش ویدیویی خانم آرزو ابراهیمی در آکادمی میزفا با عنوان ۱۲۰ ساعت فیلم آموزش طراحی سایت با ASP.NET Core استفاده کنید.

خب فکر میکنم استراحت دیگه کافیه و بهتره بریم سراغ بخش آخر مقالاتمون…

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

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

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

بریم که با این خاصیت ها آشنا بشیم.

خاصیت 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">

خاصیت 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>

خاصیت 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>

خاصیت 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>

خاصیت 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 های زیر را ایجاد کنید.

۱ – نام کاربری ( پیشفرض : mizfa – از نوع اجباری)

۲ – رمز عبور (از نوع اجباری اجباری)

۳ – نام و نام خانوادگی (در یک فیلد ، به همراه یک راهنما placeholder : نام و نام خانوادگی خودتان در فیلد)

۴ – کلید ثبت (حتما از نوع input)

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

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

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

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

پشت صحنه (پوووووف! چقدر سنگین بود!)