فرم‌های ورودی برای جمع‌آوری داده‌ها
در HTML، فرم‌های ورودی برای جمع‌آوری داده‌های کاربر ضروری هستند. هر عنصر ورودی می‌تواند دارای ویژگی‌های مختلفی باشد که رفتار و ظاهر آن را تغییر می‌دهد. در اینجا یک مرور جامع از ویژگی‌های متداول استفاده شده در فرم‌های ورودی HTML ارائه شده است:
▎ویژگی‌های متداول ورودی
1. type: نوع ورودی را مشخص می‌کند (مانند متن، رمز عبور، ایمیل و غیره).
<“input type=”text>
2. name: نام عنصر ورودی را تعریف می‌کند که برای شناسایی داده‌های فرم پس از ارسال استفاده می‌شود.
<“input type=”text” name=”username>
3. value: مقدار پیش‌فرض فیلد ورودی را تنظیم می‌کند.
<“input type=”text” value=”Default Text>
4. placeholder: یک راهنمای کوتاه ارائه می‌دهد که توضیح می‌دهد مقدار مورد انتظار فیلد ورودی چیست (به عنوان مثال، یک نمونه مقدار یا توضیح مختصر).
<input type=”text” placeholder=”Enter your name”>
5. required: نشان می‌دهد که فیلد ورودی باید قبل از ارسال فرم پر شود.
<input type=”email” required>
6. disabled: فیلد ورودی را غیرفعال می‌کند و آن را نسبت به تعامل کاربر غیرقابل پاسخ می‌سازد.
<input type=”text” disabled>
7. readonly: فیلد ورودی را فقط خواندنی می‌کند و از تغییر مقدار آن توسط کاربران جلوگیری می‌کند.
<input type=”text” readonly value=”Cannot change this”>
8. maxlength:حداکثر تعداد کاراکترهای مجاز در فیلد ورودی را مشخص می‌کند.
<input type=”text” maxlength=”10″>
9. min and max: حداقل و حداکثر مقادیر را برای ورودی‌های عددی یا تاریخ‌ها تعریف می‌کنند.
<input type=”number” min=”1″ max=”10″>
10. pattern: یک عبارت منظم را مشخص می‌کند که باید با مقدار ورودی مطابقت داشته باشد تا اعتبارسنجی انجام شود.
<input type=”text” pattern=”[A-Za-z]{3,}”>
11. autocomplete: کنترل می‌کند که آیا مرورگر باید تکمیل خودکار را برای فیلد ورودی فعال کند (مقادیر می‌توانند “on” یا “off” باشند).
<input type=”text” autocomplete=”off”>
12. autofocus:به طور خودکار فیلد ورودی را هنگام بارگذاری صفحه متمرکز می‌کند.
<input type=”text” autofocus>
13. form:عنصر ورودی را با یک فرم خاص مرتبط می‌سازد و اجازه می‌دهد که با آن فرم ارسال شود.
<form id=”myForm”>
<input type=”text” form=”myForm”>
</form>
14. size: عرض فیلد ورودی را از نظر عرض کاراکترها تعریف می‌کند.
<input type=”text” size=”30″>
15. step: فاصله‌های قانونی عددی برای یک عنصر <input> با نوع “number” یا “range” را مشخص می‌کند.
<input type=”number” step=”0.01″>
▎مثال از یک فرم HTML با استفاده از ویژگی‌های مختلف ورودی
در اینجا یک مثال از یک فرم HTML ارائه شده است که از بسیاری از این ویژگی‌ها استفاده می‌کند:
<!DOCTYPE html>
<“html lang=”fa>
<head>
<“meta charset=”UTF-8>
<“meta name=”viewport” content=”width=device-width, initial-scale=1.0>
<title>Form Example</title>
<head/>
<body>
<“form action=”/submit” method=”post>
<label/> نام کاربری :<“label for=”username>
<required” نام کاربری خود را وارد کنید “=input type=”text” id=”username” name=”username” placeholder>
<label/>ایمیل:”label for=”email>
<input type=”email” id=”email” name=”email” placeholder=”example@example.com” required>
<label/> رمز عبور : <“label for=”password>
<input type=”password” id=”password” name=”password” required>
<label/> سن : <“label for=”age>
<“input type=”number” id=”age” name=”age” min=”1″ max=”120>
<label/> وبسایت :<“label for=”website>
<“input type=”url” id=”website” name=”website>
<button /> ارسال <“button type=”submit”>
<form/>
<body/>
<html/>
دیدگاهتان را بنویسید