ساخت فرم در HTML

انواع ورودی‌ها در فرم HTML 

HTML دارای انواع مختلفی از input است که برای دریافت اطلاعات متفاوتی استفاده می‌شوند.

برخی از انواع ورودی‌ها:

 text – ورودی متن ساده

 email – ورودی مخصوص ایمیل

 password – ورودی رمز عبور

 number – ورودی عددی

 date – انتخاب تاریخ

 checkbox – چک‌باکس

 radio – دکمه انتخابی

 file – آپلود فایل

 submit – دکمه ارسال

مثال:

<input type="email" name="user_email" placeholder="ایمیل خود را وارد کنید">

دکمه‌های فرم در HTML

برای ارسال یا تنظیم مجدد فرم، از دکمه‌ها استفاده می‌شود.

 دکمه ارسال (Submit)

<button type="submit">ارسال</button>

 دکمه بازنشانی (Reset)

<button type="reset">پاک کردن فرم</button>

 دکمه معمولی (Button)

<button type="button" onclick="alert('کلیک شد!')">کلیک کنید</button>

استفاده از برچسب labelبرای ورودی‌ها

برچسب‌ها (Labels) به کاربران کمک می‌کنند که ورودی‌ها را بهتر درک کنند.

<label for="name">نام:</label>
<input type="text" id="name" name="name">

گروه‌بندی ورودی‌ها با fieldset و legend

برای دسته‌بندی ورودی‌ها از fieldset و legend استفاده می‌کنیم.

<fieldset>
    <legend>اطلاعات شخصی</legend>
    <label>نام:</label>
    <input type="text">
</fieldset>

چک‌باکس و دکمه رادیویی

<input type="checkbox" name="subscribe" checked> عضویت در خبرنامه

دکمه رادیویی (Radio Button)

<input type="radio" name="gender" value="male" checked> مرد  
<input type="radio" name="gender" value="female"> زن  

فهرست کشویی select

<select name="city">
    <option value="tehran">تهران</option>
    <option value="mashhad">مشهد</option>
</select>

فیلدهای متنی چندخطی textarea 

<textarea name="message" rows="4" cols="50" placeholder="پیام خود را وارد کنید"></textarea>

اعتبارسنجی فرم‌ها در HTML

 ورودی الزامی (required)

<input type="text" required>

 حداقل و حداکثر کاراکتر (minlength و maxlength)

<input type="text" minlength="3" maxlength="10">

 الگوی خاص (pattern)

<input type="text" pattern="[A-Za-z]+" title="فقط حروف انگلیسی مجاز است">

ارسال فرم با جاوااسکریپت

<script>
document.getElementById("myForm").onsubmit = function(){
    alert("فرم ارسال شد!");
};
</script>

استایل‌دهی فرم با CSS

input {
    border: 2px solid blue;
    padding: 10px;
}
button {
    background: green;
    color: white;
}

آپلود فایل در فرم

<input type="file" name="upload">

فرم‌های واکنش‌گرا در موبایل

@media (max-width: 600px) {
    input {
        width: 100%;
    }
}

بهترین روش‌ها در ساخت فرم‌های HTML

 از label برای ورودی‌ها استفاده کنید.

 فیلدهای ورودی را اعتبارسنجی کنید.

 فرم را با CSS زیبا کنید.

 از AJAX برای ارسال داده‌ها بدون رفرش صفحه استفاده کنید.

نتیجه‌گیری 

ساخت فرم‌های HTML یکی از مهم‌ترین مهارت‌های توسعه وب است. با ترکیب HTML، CSS و جاوااسکریپت، می‌توان فرم‌های زیبا، کاربردی و کاربرپسند ایجاد کرد.