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

آشنایی با تگ 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>
نمونه ای از نوع text در فرم ها
نمونه ای از نوع text در فرم ها

همانطور که در مثال می‌بینید، از 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"> استفاده می‌کنیم.

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

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

<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>
ورودی از نوع reset
ورودی از نوع reset

نوع 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>
نوع دکمه رادیویی در تگ input
نوع دکمه رادیویی در تگ input

نوع 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>
نوع checkbox
نوع checkbox

نوع Button در input

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

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

<input type="button" onclick="alert('Hello Mizfa!')" value="Click Me!">
نوع کلید در input
نوع کلید در input
درکد بالا شما پس از کلیک بر روی دکمه Click Me! یک صفحه Alert براتون باز میشه و کلمه Hello Mizfa چاپ میشه.

نوع Color در تگ input

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

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

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form>
نوع رنگ در input
نوع رنگ در input

نوع 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>
نوع تاریخ در input
نوع تاریخ در input

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

شما می‌توانید با استفاده از کتابخانه های مختلف که در اینترنت موجود است، انتخاب کننده های رنگ و تاریخ را شخصی سازی کنید. برای مثال یک نمونه انتخاب کننده تاریخ که یک انتخاب کننده شبیه تم 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>
نوع datetime-local در input
نوع datetime-local در input

نوع 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>
نوع ایمیل در input به همراه نمایش صحت سنجی
نوع ایمیل در input به همراه نمایش صحت سنجی

نوع 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>
نوع فایل در input
نوع فایل در input

نوع 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>
نوع ماه و سال در input
نوع ماه و سال در input

نوع 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>
نوع عددی در input
نوع عددی در input

در مثال بالا حداقل عدد ۰ و حداکثر ۱۰۰ انتخاب شده است و جواب ها ۱۰ تا ۱۰ تا تغییر می‌کند. (البته بخش تغییر ده تایی در مرورگر هایی مثل 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>
نوع Range در input
نوع Range در input

نوع 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>
فیلد از نوع سرچ در input
فیلد از نوع سرچ در input

نوع 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>
نوع وارد کردن تلفن در input
نوع وارد کردن تلفن در input

نوع Time در input

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

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

نوع time در input
نوع time در input

نوع 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>
نوع url در input
نوع url در input

نوع Week در تگ input

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

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

<form>
  <label for="week">Select a week:</label>
  <input type="week" id="week" name="week">
</form>
نوع week در input
نوع week در input

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

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

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

بخش دیداری قضیه یا فرانت اند یا Client Side
بخش دیداری قضیه یا فرانت اند یا Client Side

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

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

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

  • HTML
  • CSS
  • Javascript

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

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

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

وب سایت جانم

آنقدر زیبایی

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

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

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

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

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

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

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

خاصیتValueDescription
acceptfile_extension
audio/*
video/*
image/*
media_type
این خاصیت تنها ورودی های نوع file فعال است و وظیفه مشخص کردن فرمت های پشتیبانی شده رسانه را دارد.
alignleft
right
top
middle
bottom
این خاصیت در HTML5 پشتیبانی نمی‌شود.
جهت تصاویر را در ورودی های نوع image مشخص می‌کند.
alttextبا این خاصیت در ورودی های نوع image متن جایگزین تصویر را مشخص می‌کنیم.
autocompleteon
off
با این خاصیت مشخص می‌کنیم که مرورگر بتواند فرم را خودکار تکمیل کند یا خیر.
autofocusautofocusبا این خاصیت ما می‌توانیم پس از لود شدن صفحه به صورت خودکار به فرم فوکوس کنیم.
checkedcheckedاین خاصیت برای مشخص کردن آیتم های چک باکس ها یا دکمه های رادیویی هستش که با استفاده از آن می‌توانیم یک یا چند آیتم را از پیش انتخاب شده بزنیم.
dirnameinputname.dirبا این خاصیت چپ چین بودن یا راست چین بودن ورودی ها را مشخص می‌کند.
disableddisabledبا این خاصیت شما این ورودی را غیر فعال می‌کنید.
formform_idبرای استفاده از یک ورودی خارج از فرم استفاده می‌شود.
formactionURLلینک فایلی را مشخص می‌کند که ورودی پس از ثبت فرم این ورودی را پردازش می‌کند. (در ورودی های نوع submit و image استفاده می‌شود.)
formenctypeapplication/x-www-form-urlencoded
multipart/form-data
text/plain
نوع کد گذاری فرم هایمان را با این خاصیت مشخص می‌کند. (در ورودی های نوع submit و image استفاده می‌شود.)
formmethodget
post
این خاصیت متد HTTP مورد نظر ما را در صفحه مشخص می‌کند. (در ورودی های نوع submit و image استفاده می‌شود.)
formnovalidateformnovalidateبا این خاصیت، مشخص می‌کنید که دیگر لازم نیست عناصر درون فرمتان بعد از کلیک بر روی ورودی های نوع image و submit تایید شوند.
formtarget_blank
_self
_parent
_top
framename
با این خاصیت می‌توانید عملکرد بعد از کلیک بر روی ورودی های نوع image و submit را مشخص کنید که به چه صورت عمل کند.
heightpixelsبا این خاصیت در ورودی های نوع image می‌توانیم ارتفاع تصویر را مشخص کنیم.
listdatalist_idبه یک تگ datalist ورودی ما را لینک می‌کند و اطلاعات درون این ورودی داخل datalist ما وارد می‌شود.
maxnumber
date
این خاصیت تعیین کننده حداکثر برای خاصیت مقدار موجود در <input> هستند.
maxlengthnumberبا این خاصیت حداکثر طول ورودی را مشخص می‌کنید.
minnumber
date
این خاصیت تعیین کننده حداقل برای خاصیت مقدار موجود در <input> هستند.
minlengthnumberبا این خاصیت حداقل طول ورودی را مشخص می‌کنید.
multiplemultipleبا این خاصیت کاربرتان برای این فیلد می‌تواند بیشتر از یک ورودی را وارد کنید.
nametextاین خاصیت نام ورودی را برایتان مشخص می‌کند. ( یکی از مهم ترین خاصیت های تگ input )
patternregexpبا این خاصیت شما با استفاده از الگو های Regex می‌توانید در فرم‌هایتان از اصول Regex یا عبارت های با قاعده استفاده کنید.
placeholdertextبرای نمایش یک راهنمایی کوتاه برای پر کردن فیلد ورودی می‌توانید از این خاصیت استفاده کنید.
readonlyreadonlyاگر فیلدی فقط برای خواندن باشد و نخواهیم کاربر ورودی در آن وارد کند از این خاصیت استفاده می‌کنیم.
requiredrequiredاگر در یک ورودی وارد کردن اطلاعات در کی فیلد ضروری باشد، از این خاصیت استفاده می‌کنیم.
sizenumberاین خاصیت عرض کاراکتر های درون ورودی فرم ها را مشخص می‌کند.
srcURLاین خاصیت که تنها در نوع image استفاده می‌شود، با قرار دادن لینک یک عکس، عکسی را به جای کلید submit قرار می‌دهیم.
stepnumber
any
این خاصیت برای ایجاد فاصله بین اعداد صحیح استفاده می‌شود.
typebutton
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week
همانطور که در بالا با تک تک انواع ورودی ها آشنا شدیم، این خاصیت برای مشخص کردن نوع ورودی هستش.
valuetextیک مقدار اولیه برای ورودی ما مشخص می‌کند.
widthpixelsدر ورودی های نوع image عرض تصاویر را می‌توانیم مشخص کنیم.

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

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

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

ایستگاه استراحت یک و نیم بهینه سازی موتور جستجو یا SEO
ایستگاه استراحت یک و نیم بهینه سازی موتور جستجو یا SEO

سئو چیست؟

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

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

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

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

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

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

خاصیت value در تگ input

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

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="Ali">
</form>
خاصیت value
خاصیت value

خاصیت 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>
خاصیت disabled در input
خاصیت disabled در input

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

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

خاصیت 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 یک وب سایت صحبت کنیم.

بخش بک اند - سرور قضیه - Server Side
بخش بک اند – سرور قضیه – 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">
خاصیت form در input
خاصیت form در input

خاصیت 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 آشنا شدیم که عنصری از عناصر اصلی تگ فرم هستش؛ با خاصیت ها و انواع ورودی ها آشنا شدیم که خیلی خیلی در ایجاد یک فرم بهمون کمک می‌کند.

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

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

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

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

‫7 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام خسته نباشید واقعا !
    ببخشید یه سوال دارم ممنون میشم جواب بدید :
    من میخوام تویه تگه input از دو تا type استفاده کنم ولی فقط یک type رو میگیره اونم type اول رو!
    مثلا میخوام کاربر هم بتونه ایمیل وارد کنه هم شماره و میخوام در در یک فیلد باشه .
    ممنون میشم جواب بدین .

    1. سلام سعید ببین تنها الگوریتمی که به فکرم میرسه واسه این کار اینه که type رو به صورت text قرار بدی و یه id یا class واسه input مشخص کنی بعد داخل جاوا اسکریپت بیای مشخص کنی که اگر طرف متن وارد کرد داره ایمیل وارد میکنه و نسبت به ایمیلش خطا بده که ایمیل درست نیست، اگر شماره وارد کرد، شماره رو بررسی بکنه.بدون js نمیتونی این رو اوکی کنی متاسفانه.

  2. سلام آقای مهندس اسماعیلی عزیز
    گرچه خودتون شکست نفسی میفرمایید ولی به هر حال استاد مایید 😉 من واقعا از شما در سایت میزفا خیلی یاد گرفتم و خیلی ممنونم ازتون
    عجب آموزش بلند بالایی، و البته بسیار مفید ، واقعا خسته نباشید
    همه رو خوندم و رفتم یکم خودم هم تمرین کردم
    واسم سواله چرا برای من دکمه های رادیو متفاوت کار میکنن ؟ یعنی بای دیفالت قابلیت چند انتخاب همزمان دارن !
    چیکار باید بکنم که رادیوها درست کار کنند؟

    1. سلام مونا، سلامت باشید شما لطف دارید.
      مطمئن هستید که type را روی radio میگذارید و انتخاب چند تایی هست ؟ این مشکل تنها در یک صورت اتفاق میوفته که شما تگ Form را قبل از input هاتون قرار نداده باشید.
      لطفا یک بررسی بکنید که کد هاتون حتما مانند نمونه کد زیر باشند.

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

      همچنین پیشنهاد میکنم این لینک را نیز بررسی کنید.
      HTML Input Radio

      موفق باشید.

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 مگابایت.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
Share via
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر