کار با فرم ها در صفحات html (بخش 1)

فرم در html معمولا برای دریافت اطلاعات ورودی از کاربر و ارسال جهت پردازش آنها در سرور استفاده می‌شود.آشنایی با form و کاربرد آن در ادامه ذکر می شود.

فرم در html چیست؟

فرم یکی از المان‌های html است که عموما برای جمع آوری و دریافت اطلاعات کاربران یک سایت استفاده می‌شود که این اطلاعات جمع آوری شده معمولا برای پردازش به سرور ارسال می‌شوند. برای ایجاد المان فرم از تگ <form> در صفحه استفاده می‌شود که با تگ بسته </form> خاتمه می‌یابد که ظاهر آن دیده نمی‌شود اما بین این دو، سایر المان ها مانند ورودی‌های متنی، چک باکس، دکمه رادیویی، دکمه‌های تایید یا ارسال و … قرار می‌گیرند..

فرم شامل چه المان‌هایی است؟

همانطور که گفتیم، فرم در بر دارنده برخی المان‌های دیگر برای تعامل با کاربر است. این المان‌ها به شکل های مختلفی اطلاعات را از کاربرها دریافت می‌کنند یا آنها را به سرور می‌فرستند که در این بخش برخی از مهمترین و کاربرد آنها را ذکر می‌کنیم:

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

برای دریافت متن عادی از کاربر در المان فرم از المان <input> با صفت type=”text” استفاده می‌شود. برای نمایش عنوان هر المان موجود در فرم هم می‌توان از المان برچسب <label>متن مورد نظر</label> بهره گرفت که برای صفحه‌خوان‌ها یا screen readerها اهمیت دارد. این المان (label) همچنین در کلیک بر المان‌هایی که سطح کمتری دارند (مثلا چک باکس و دکمه رادیویی) و کلیک بر آنها مشکل است، کار را راحت تر می‌کند. فقط دقت شود که در label، صفت for آنها باید با صفت id هر المان input که یک شناسه برای شناسایی آنهاست، یکی باشد.

فرم ساده زیر را ببینید که ما آن را در visual studio code نوشته ایم:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newsunweb.com</title>
</head>
<body>
    <div>
        <form>
            <label for="name">FullnName</label><br>
            <input type="text" id="name" value="newsunweb"/><br>

            <label for="phone">Phone</label><br>
            <input type="text" id="phone" value="09124640064"/>
        </form>
    </div>
</body>
</html>

نتیجه موارد بالا به این شکل است:

توجه کنید که برای ارسال هر ورودی input، آنها باید دارای یک نام باشند که با توجه به اینکه هنوز ما قصد ارسال مقادیر input را نداریم، از نوشتن صفت name برای input ها صرف نظر کردیم.

از مقدار value، می‌توان برای مقداردهی اولیه برای هر input با type برابر text استفاده کرد.

توجه: عرض پیش‌فرض هر input برابر با 20 کاراکتر است.

شکل‌های دیگر input

المان input تنها به شکل text نیست بلکه به شکل‌های مختلف با صفت های گوناگون در می آید که برخی از آنها را ذکر می‌کنیم:

input با صفت type برابر radio: این المان دکمه رادیویی را نشان می‌دهد که عموما برای انتخاب یکی از آنها از بین گزینه‌های متعدد استفاده می‌شود.

input با صفت type برابر checkbox: این المان چک باکس را نشان می‌دهد که عموما برای انتخاب 0 یا چند گزینه از آنها از بین گزینه‌های متعدد موجود استفاده می‌شود.

input با صفت type برابر submit: این المان یک دکمه را نشان می‌دهد که برای ارسال اطلاعات فرم به form-handler که یک فایل روی سرور است که اسکریپت مشخصی دارد ارسال می‌شود تا پردازش‌های لازم روی آنها انجام شود.

input با صفت type برابر button: این المان یک دکمه قابل کلیک را نشان می‌دهد.

در این قسمت برخی از مهم ترین صفت هایی که برای type المان input وجود دارد را بر شمردیم که تنها به آنها محدود نمی شود و مقادیری مانند color, date, email, file, image, month, number, password, range, reset, search, tel, time, url, week را در بر می‌گیرد که هر یک کاربردهای خاص خودشان را دارند و در صورت لزوم باید از آنها استفاده نمود. برای مثال اگر از type برابر email استفاده کنید، ورودی باید از نوع ایمیل باشد و اگر فرمت ایمیل را نداشته باشد، پس از submit کردن، با یک هشدار خطا این مساله به شما نشان داده می‌شود؛ یا چنانچه از password استفاده کنید، کارارکترها به شکل دایره های توپر در می‌آیند. این هم دقت کنید که مقدار پیشرفت صفت type در المان input برابر با text است. البته در مقالات آتی به شکل اختثصاصی در خصوص هر یک از این المان‌ها توضیحات لازم را ارائه خواهیم داد.

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

<body>
    <div>
        <form>
            <label for="f-name">FirstName</label><br>
            <input type="text" id="f-name" name="fname"/><br>

            <label for="l-name">LastName</label><br>
            <input type="text" id="f-name" name="lname"/><br><br>

            <label for="age">Age</label><br>
            <input type="number" id="age" name="age"/><br><br>

            <span>Select Gender</span><br>
            <input type="radio" id="male" name="gender" value="M"/>
            <label for="male">Male</label><br>

            <input type="radio" id="female" name="gender" value="F"/>
            <label for="female">Female</label><br><br>

            <span>Choose Course(s)</span><br>
            <input type="checkbox" id="html" value="html" name="course1"/>
            <label for="html">HTML</label><br>

            <input type="checkbox" id="css" value="css" name="course2"/>
            <label for="css">CSS</label><br>

            <input type="checkbox" id="js" value="js" name="course3"/>
            <label for="js">Javascript</label><br>
            

            <input type="checkbox" id="js" value="js" name="course4"/>
            <label for="js">Javascript</label><br>

            <input type="checkbox" id="csharp" value="csharp" name="course5"/>
            <label for="csharp">C#</label><br>

            <input type="checkbox" id="asp-core" value="aspnetcore" name="course6"/>
            <label for="asp-core">ASP.NET Core</label><br><br>

            <label for="email">Email</label><br>
            <input type="email" id="email" name="mail"/><br><br>

            <label for="pass">Password</label><br>
            <input type="password" id="pass" name="your-password"/><br>

             <br>
             <input type="submit" value="Send"/>
        </form>
    </div>
</body>

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

سخن پایانی

در این مقاله نکات اولیه در خصوص فرم‌ها که اهمیت بسیار بالایی در طراحی سایت و صفحات html دارند، مطالب و نکات لازم گفته شد. برخی از عناصر موجود در فرم جهت تعامل با کاربر و گرفتن اطلاعات ورودی از آنها بیان گردید و در نهایت مثالی هم ارائه شد. دقت کنید که فرم به همینجا ختم نمی‌شود و نکات بیشتری در خصوص آن بایدگفته شود که در مقاله بعدی در همین وبسایت نیوسان وب، نکات لازم و تکمیلی ارائه خواهد شد. پس همچنان با ما همراه باشید!

لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.