فرمها در HTML یکی از مهمترین ابزارها برای تعامل با کاربر هستند. با استفاده از انواع مختلف ورودیها (input) میتوانیم دادههای متنوعی مثل متن، ایمیل، شماره تلفن یا حتی پیامهای بلند را از کاربر دریافت کنیم. در این مقاله بهصورت دوستانه و کاربردی، چند نوع پرکاربرد ورودی را بررسی میکنیم.
📝 ورودی متنی (Text Input)
ورودی متنی سادهترین نوع input است. وقتی از input type="text" استفاده کنیم، یک کادر ساده نمایش داده میشود که کاربر میتواند داخل آن متن دلخواهش را وارد کند. این نوع ورودی برای گرفتن اطلاعات عمومی مثل نام یا نام کاربری بسیار مناسب است.
📧 ورودی ایمیل (Email Input)
اگر بخواهیم آدرس ایمیل کاربر را دریافت کنیم، بهتر است از input type="email" استفاده کنیم. مزایای این نوع ورودی:
- مرورگر بهصورت خودکار بررسی میکند که ورودی شبیه یک ایمیل معتبر باشد.
- در موبایل، کیبورد مخصوص ایمیل نمایش داده میشود و علامت
@به راحتی در دسترس کاربر قرار میگیرد.
نمونه کد:
<form>
<label for="email">ایمیل:</label>
<input type="email" id="email" name="email">
<input type="submit" value="ذخیره">
</form>
📱 ورودی شماره تلفن (Tel Input)
برای دریافت شماره تلفن، از input type="tel" استفاده میکنیم.
- در دسکتاپ تفاوت زیادی با text ندارد.
- اما در موبایل، کیبورد مخصوص شمارهگیری باز میشود و وارد کردن شماره بسیار راحتتر خواهد بود.
نمونه کد:
<label for="telephone">تلفن:</label>
<input type="tel" id="telephone" name="telephone">
🖊️ ورودی متنهای بلند (Textarea)
گاهی لازم است کاربر یک پیام طولانی یا چند پاراگراف وارد کند. در این حالت از عنصر <textarea> استفاده میکنیم.
- امکان تایپ چند خط متن وجود دارد.
- کاربر میتواند با Enter به خط بعدی برود.
نمونه کد:
<label for="your-message">پیام شما:</label>
<textarea id="your-message" name="your-message"></textarea>
🎯 جمعبندی
- برای متنهای کوتاه:
input type="text - برای ایمیل:
input type="email - برای شماره تلفن:
input type="tel - برای متنهای بلند:
<textarea>
استفاده از نوع درست ورودی نهتنها باعث افزایش دقت دادهها میشود، بلکه تجربه کاربری بهتری مخصوصاً در موبایل ایجاد میکند.