استفاده از فرم در html (بخش سوم)

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

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

المان textarea

textarea يک المان در فرم‌هاي html است که شبيه input با type برابر text است؛ اما فرقي که دارد اين است که به صورت چند خطي است. مثلا اگر بخواهيد آدرس را تايپ کنيد، با توجه به اينکه فضاي بيشتري نياز داريد مي‌توانيد از اين المان استفاده کنيد. اين المان صفت‌هايي مانند rows و cols مي‌گيرد که در صورت لزوم مي‌توانيد تعداد سطر و سطوني که دوست داريد در بر بگيرد را مشخص کنيد.

توجه کنيد که المان teaxtarea برخلاف input، دو بخشي است و تگ پاياني نيز دارد. مقادير يا متن مورد نطر هم در اين المان مي‌توانند بين اين دو تگ واقع شوند. مثال زیر را ببینید و آن را در visual studio code وارد کنید و پس از submit کردن، نتیجه را بررسی کنید.

<!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 style="padding:10px;">
       <form >
            <label for="name">Website Name:</label><br>
            <input id="name" name="wbname" type="text" value="Newsunweb"/><br><br>
            <label for="address">Addres:</label><br>
            <textarea id="address" name="theAddress" cols="20" rows="3">Our address is Tehran, Iran</textarea>
            <hr>
            <input type="submit" value="Submit Form"/>
       </form>
    </div>
</body>
</html>

در مثال بالا با استفاده از صفت‌های cols و rows در المان textarea، به ترتیب، تعداد ستون و ردیف‌های آن را مشخص کردیم که البته اگر آن را بررسی کنید، متوجه خواهید شد که با بردن نشانگر ماوس روی گوشه سمت راست و پایین آن، این امکان وجود دارد که در حین اجرا به صورت دستی آنها را تغییر دهید. توجه کنید که اگر نوشته شما طولانی باشد به نحوی که از ارتفاع مشخص شده توسط rows بیشتر شود، با ظاهر شدن یک scrollbar یا نوار لغزنده عمودی، فضای textarea خود را با آن تطبیق می‌دهد.

نتیجه استفاده از textarea در مثال بالا (دکمه submit البته غیرفعال شده است):

المان fieldset

المان fieldset مي‌تواند براي نشان دادن المان‌هاي مختلف مرتبط به هم يا يک گروه به کار رود.

المان legend

المان legend براي نشان دادن عنوان مربوط به fieldset در داخل آن به کار می‌رود.

مثال زیر را ببینید:

<body>
    <div>
       <form >
           <fieldset>
               <legend>Website</legend>
               <label for="name">Website Name:</label><br>
               <input id="name" name="wbname" type="text" value="Newsunweb"/><br><br>
               <label for="address">Addres:</label><br>
               <textarea id="address" name="theAddress" cols="20" rows="3">Our address is Tehran, Iran</textarea>
           </fieldset>
           <fieldset>
            <legend>Designer</legend>
            <label for="fullname">Designer Name:</label><br>
            <input id="fullname" name="flname" type="text" value="Javad Mehdinia"/><br><br>
            <label for="phone">PhoneNumber:</label><br>
            <input id="pbone" name="phonenumber" type="text" value="09124640064"/>
        </fieldset>
            <input type="submit" value="Submit Form"/>
       </form>
    </div>
</body>

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

همانطور که مشاهده می‌کنید، با استفاده از این المان‌ها توانستیم دسته‌بندی زیبا و مناسبی در فرم ایجاد کنیم؛ این دسته بندی هرچند در نحوه ارسال داده‌ها تاثیری ندارد، اما جلوه ظاهری خوبی به آن می‌بخشد.

المان datalist

المان datalist براي نشان دادن يک ليست از عناصر داده‌های ار پيش مشخص در يک منوي پايين افتادني يا dropdown از يک input به کار مي‌رود و مقادير داده‌های از پيش مشخص (optionها)، اگر شامل آنچه که کاربر تايپ مي‌کند باشند، جهت انتخاب نمايش داده مي‌شوند.

برای استفاده از datalist در فرم‌های html باید از یک input استفاده کرد که صفت list داشته باشد و مقدار این صفت هم برابر با id دیتالیست باشد؛ خود دیتالیست یا datalist هم شامل یک سری option است که هر یک باید یک صفت value ویژه خود را داشته باشند. مثال زیر را ببینید:

<body>
    <div>
       <form >
            <input list="courses" name="course"/>
            <datalist id="courses">
                <option value="HTML">
                <option value="CSS">
                <option value="Javascript">
                <option value="C#">
                <option value="ASP.NET Core">
            </datalist>
            <input type="submit" value="Submit Form"/>
       </form>
    </div>
</body>

که نتیجه آن به شکل زیر است:

المان button

المان button که به شکل یک دکمه است، قابلیت کلیک شدن دارد. البته فرق button با input وقتی type آن submit است، این است button در جایی غیر از تگ form هم می‌تواند به کار رود؛ در حالی که این مساله برای submit برقرار نیست. کاربرد button بخصوص در استفاده از توابع جاوا اسکریپت هنگامی که روی آنها کلیک می‌شود، گسترده است که در بخش مربوط به آن، در این خصوص توضیحات لازم را ارائه خواهیم کرد. مثال زیر را ببینید:

    <div>
        <button type="button" onclick="alert('Hello User!')" >Click Here</button> 
    </div>

نکته مهم: لازم است که همیشه صفت type را برای المان button برابر با button قرار دهید؛ چرا که در غیر اینصورت مرورگرهای مختلف ممکن است رفتارهای متفاوتی را در برخورد با آن داشته باشند.

المان outout

المان output برای نشان دادن نتیجه دو یا چند input در آن به کار می‌رود که بهتر است با چند مثال آنها را توضیح دهیم. بهتر است این مثال‌ها را خودتان در visual studio code تست کنید.

مثال اول

<body>
    <div>
       <form oninput="x.value=(a.value) + (b.value)">
        <input id="a" value="Newsunweb" /><br>
        <input id="b" value="." /><br><br>
        <span>Type in above fields to see the result here: </span>
        <output name="x" for="a b"></output>
       </form>
    </div>
</body>

نتیجه مثال اول

برای دیدن نتیجه می‌توانید در هر یک از input های بالا چیزی تایپ کنید مثلا com را در فیلد دومی وارد کنید؛ که در این صورت ترکیب دو Input را مشاهده خواهید کرد.

مثال دوم

<body>
    <div>
       <form oninput="x.value= parseInt(a.value) + parseInt(b.value)">
        <input type="range" id="a" value="20" /><br>
        <input id="b" value="15" /><br><br>
        <span>Type or select a number from above elements to see the result here: </span>
        <output name="x" for="a b"></output>
       </form>
    </div>
</body>

نتیجه مثال دوم

مثال سوم

<body>
    <div>
       <form oninput="x.value= parseInt(a.value) + parseInt(b.value) + parseInt(c.value)">
        <input type="number" id="a" value="5" /><br>
        <input type="number" id="b" value="15" /><br>
        <input type="number" id="c" value="15" /><br>
        <span>Change the values to see the result: </span>
        <output name="x" for="a b c"></output>
       </form>
    </div>
</body>

نتیجه مثال سوم

نتیجه مثال سوم هم به شکل بالا است که با تغییر اعداد هر یک، مجموع آنها در output نشان داده می‌شود. البته در دو مثالی که ما زدیم، مجموع آنها را نشان دادیم که در صورت لزوم می‌توانید از تفریق و غیره نیز استفاده کنید.

جمع بندی

در این مثال در خصوص برخی المان‌های دیگر از form توضیحات لازم را ارائه دادیم و هر یک را هم برای درک بیشتر با مثال‌های متعدد توضیح دادیم. در مقاله بعدی در خصوص برخی نکات باقیمانده از فرم‌ها بحث خواهیم کرد؛ پس همچنان با نیوسان‌وب همراه باشید.

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