آموزش HTML - ویژگی‌های ورودی

تگ <input> در HTML ویژگی‌های مختلفی را برای تعریف مشخصات و نحوه عملکرد خود ارائه می‌دهد.

ویژگی‌های ورودی

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

عنصر <input> فقط به یک تگ آغازین نیاز دارد و تنها زمانی کار می‌کند که آن را بین تگ‌های <form> قرار دهیم. در این آموزش، ویژگی‌هایی را بررسی خواهیم کرد که با عنصر <input> استفاده می‌شوند.

ویژگی‌های عنصر <input> عبارت‌اند از:

• type و name
• value
• size
• maxlength
• readonly
• disabled
• min و max
• accept و multiple
• placeholder
• required
• autofocus
• list

ویژگی‌های 'type' و 'name'

ویژگی type نوع کنترل ورودی را مشخص می‌کند؛ مانند متن، گذرواژه، ایمیل و موارد دیگر. ویژگی name در یک عنصر ورودی، شناسه‌ای به کنترل فرم اختصاص می‌دهد که به سرور امکان می‌دهد مقدار آن را شناسایی و دریافت کند.

مثال

کد HTML زیر نحوه استفاده از ویژگی‌های type و name را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>The type and name Attributes</title>
</head>
<body>
   <form >
      First name: <input type = "text" name = "first_name" />
      <br><br>
      Last name: <input type = "text" name = "last_name" />
   </form>
</body>
</html>

ویژگی 'value'

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

مثال

در مثال زیر، دو فیلد ورودی با مقادیر اولیه «نام...» و «نام خانوادگی...» ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>The value Attribute</title>
</head>	
<body>
   <form >
      First name: <input type = "text" name = "first_name" value = "first name..." />
      <br><br>
      Last name: <input type = "text" name = "last_name" value = "last name..."/>
   </form>
</body>
</html>

ویژگی 'size'

ویژگی size به شما امکان می‌دهد عرض کنترل ورودی متن را برحسب تعداد نویسه‌ها مشخص کنید. اندازه پیش‌فرض ۲۰ نویسه است.

مثال

در این مثال، اندازه کنترل ورودی متن روی ۴۰ تنظیم شده است:

<!DOCTYPE html>
<html>
<head>
   <title>The size Attribute</title>
</head>
<body>
   <form >
      First name: <input type = "text" name = "first_name" size = "40" />
      <br><br>
      Last name: <input type = "text" name = "last_name" size = "40"/>
   </form>
</body>
</html>

ویژگی 'maxlength'

ویژگی maxlength به شما امکان می‌دهد حداکثر تعداد نویسه‌هایی را مشخص کنید که کاربر می‌تواند در کادر متنی وارد کند.

مثال

مثال زیر نحوه تنظیم ویژگی maxlength برای یک فیلد ورودی را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>The maxlength Attribute</title>
</head>
<body>
   <form >
      First name: <input type = "text" name = "first_name" />
      <br><br>
      Last name: <input type = "text" name = "last_name" />
      <br><br>
      Contact: <input type = "text" name = "phone" maxlength = "10"/>
   </form>
</body>
</html>

ویژگی 'readonly'

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

مثال

مثال زیر نحوه استفاده از ویژگی readonly در عنصر <input> را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>The readonly Attribute</title>
</head>
<body>
   <form >
      Emp. Name: <input type = "text" name = " your_name" value = "your name..."/>
      <br><br>
      Emp. Email: <input type = "text" name = "mail" value = "your email..."/>
      <br><br>
      Organization: <input type = "text" name = "organization" value = "Tutorialspoint" readonly/>
   </form>
</body>
</html>

ویژگی 'disabled'

ویژگی disabled در یک فیلد ورودی مشخص می‌کند که فیلد غیرفعال است. برخلاف ویژگی readonly، مقدار یک فیلد غیرفعال هنگام ارسال فرم در اطلاعات ارسالی گنجانده نمی‌شود.

مثال

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

<!DOCTYPE html>
<html>
<head>
   <title>The disabled Attribute</title>
</head>
<body>
   <form >
      Emp. Name: <input type = "text" name = "your_name" value = "your name..."/>
      <br><br>
      Emp. Email: <input type = "email" name = "mail" value = "your email..."/>
      <br><br>
      Organization: <input type = "text" name = "organization" value = "Tutorialspoint" disabled/>
   </form>
</body>
</html>

ویژگی‌های 'min' و 'max'

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

مثال

در مثال زیر، با استفاده از ویژگی‌های min و max، حداقل ساعات کاری را ۳ و حداکثر آن را ۸ تعیین می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>The min and max Attribute</title>
</head>
<body>
   <form >
      Emp. Name: <input type = "text" name = "your_name" value = "your name..."/>
      <br><br>
      Emp. Email: <input type = "email" name = "mail" value = "your email..."/>
      <br><br>
      Organization: <input type = "text" name = "organization" value = "Tutorialspoint" readonly/>
      <br><br>
      Working Hrs: <input type = "number" name = "working_hours" min="3" max="8"/>
   </form>
</body>
</html>

ویژگی‌های 'accept' و 'multiple'

ویژگی accept انواع فایل‌هایی را مشخص می‌کند که سرور می‌پذیرد. اگر از ویژگی multiple استفاده کنیم، کاربران می‌توانند بیش از یک فایل را بارگذاری کنند.

مثال

کد HTML زیر امکان انتخاب چندین فایل تصویری را فراهم می‌کند:

<!DOCTYPE html>
<html>
<head>
   <title>The accept and multiple Attributes</title>
</head>
<body>
   <form>
      <input type = "file" name = "fileupload" accept = "image/*" multiple />
   </form>
</body>
</html>

ویژگی 'placeholder'

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

مثال

در مثال زیر، از ویژگی placeholder برای فیلد ورودی ایمیل استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>The placeholder Attribute</title>
</head>
<body>
   <form>
      Emp. Name: <input type = "text" name = "your_name"/>
      <br><br>
      Emp. Email: <input type = "email" name = "mail" placeholder = "example@email.com"/>
   </form>
</body>
</html>

ویژگی 'required'

ویژگی required در یک فیلد ورودی، مانند فیلدهای متن، جست‌وجو، گذرواژه و ایمیل، نشان می‌دهد که فیلد باید حاوی مقداری باشد تا فرم با موفقیت ارسال شود. به عبارت دیگر، این ویژگی فیلد را اجباری می‌کند.

مثال

مثال زیر نحوه استفاده از ویژگی required را نشان می‌دهد. کاربران بدون پر کردن فیلدهای اجباری نمی‌توانند فرم را ارسال کنند:

<!DOCTYPE html>
<html>
<head>
   <title>The required Attribute</title>
</head>
<body>
   <form >
      <p>علامت * نشان‌دهنده فیلد اجباری است</p>
      Emp. Name: <input type = "text" name = "your_name" required/>*
      <br><br>
      Emp. Email: <input type = "email" name = "mail" placeholder = "example@email.com" required/>*
      <br><br>
      <input type = "submit">
   </form>
</body>
</html>

ویژگی 'autofocus'

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

مثال

مثال زیر نحوه استفاده از ویژگی autofocus را نشان می‌دهد:

<!DOCTYPE html>
<html>
<head>
   <title>The autofocus Attribute</title>
</head>
<body>
   <form >
      Emp. Name: <input type = "text" name = "your_name" autofocus/>
      <br><br>
      Emp. Email: <input type = "email" name = "mail" placeholder = "example@email.com" />
      <br><br>
      <input type = "submit">
   </form>
</body>
</html>

ویژگی 'list'

ویژگی list مجموعه‌ای از گزینه‌های از پیش تعیین‌شده را برای عنصر <input> تعریف می‌کند. این گزینه‌ها درون یک <datalist> تعریف می‌شوند. عنصر <input> از یک رشته مشخص به‌عنوان شناسه استفاده می‌کند تا به عنصر متناظر <datalist> پیوند داده شود.

مثال

در این مثال، با کمک ویژگی list فهرستی از شهرها ایجاد می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>The list Attribute</title>
</head>
<body>
   <form >
      Emp. Name: <input type = "text" name = "your_name" autofocus/>
      <br><br>
      Emp. Email: <input type = "email" name = "mail" placeholder = "example@email.com" />
      <br><br>
      Location −
      <input list="location" name="cities">
         <datalist id = "location">
            <option value="Banglore">
            <option value="Hyderabad">
            <option value="Patna">
            <option value="Delhi">
         </datalist>
      <input type = "submit">
   </form>
</body>
</html>