آموزش کامل HTML – قسمت 15: فرم ها

فرم ها در html

همانند تمامی تگ های اچ تی ام ال، فرم‌ها نیز با تگ مخصوص خودشان شروع و با همان تگ و علامت / بسته می‌شوند. در واقع تگ‌ فرم بهشکل زیر استفاده می شود.

<form>

محتویاتی که قرار است در قالب فرم ارسال شوند

<form/>

برای وارد کردن اطلاعات در داخل فرم از تگ <input> استفاده می‌کنیم. این تگ در واقع به شکل‌های مختلف اطلاعات را از ما می‌گیرد و به سرور ارسال می‌کند. تگ‌های اینپوت انواع مختلفی دارند که در ادامه به آن‌ها خواهیم پرداخت.

انواع ورودی ها

همانطور که گفتیم، ورودی‌هایی که درون فرم‌ها قرار دارند، انواع مختلفی دارند. این ورودی‌ها را input می‌گوییم و با تگ <input> می‌نویسیم. در واقع ما به شکل‌های مختلفی می‌توانیم وروردی‌ها را از کاربران دریافت کنیم. به همین خاطر در کنار تگ <input> کلمه‌ یا صفتی به نام Type قرار می‌گیرد که ما به کمک آن‌ مشخص می‌کنیم قصد دریافت چه اطلاعاتی را از کاربر داریم(type یک اتریبیوت برای تگ input است). این موضوع را در زیر نشان داده‌ایم.

<input  type= “text”>

<input  type= “radio”>

<input  type= “submit”>

ورودی متن

<“input  type= “text> برای دریافت متن به عنوان ورودی به کار می‌رود. در واقع هر چیزی که به عنوان متن محسوب شود (مثل نام کاربری، نام فرد، سن و سال یا هر چیز دیگری که متن باشد) در این ورودی‌ها قرار می‌گیرد.

نام: <br>

<input type="text"  value="پردیس وردپرس"><br>

نام خانوادگی: <br>

<input type="text"  value="پردیس وردپرس">

اتریبیوت value در فرم‌ها مقدار پیش فرضی را برای ورودی قرار می‌دهد. مثلا در فرم بالا مقدار پیش فرض نام و نام خانوادگی، پردیس وردپرس است.

دکمه های رادیویی

نوع دیگر ورودی‌ها radio است. رادیوها در واقع دکمه‌هایی هستند که در مواقعی که قصد ایجاد حق انتخاب برای کاربر داریم به کار می‌بریم.

<input  type="radio" name="1" value="html" checked> اچ تی ام ال

<br>

<input  type="radio" name="1" value="CSS"> CSS

در صورت اضافه کردن اتریبیوت checked در این نوع ورودی، گزینه به صورت پیش فرض انتخاب خواهد شد. برای مثال گزینه اچ تی ام ال در مثال بالا به صورت پیش فرض انتخاب شده است.

چک باکس

<“input  type= “checkbox> برای ایجاد چک باکس به کار می‌رود. در واقع با استفاده از دکمه‌های دایره‌ای رادیو، معمولا تنها یک گزینه را می‌توان همزمان استفاده کرد ولی در چک باکس شما می‌توانید هر چند تا از گزینه‌ها که دوست دارید را انتخاب کنید.

<input  type="checkbox" >پردیس وردپرس

<br>

<input  type="checkbox">طراحی سایت

رمز عبور

<“input type= “password> برای ورود رمز عبور به کار می‌رود. این نوع ورودی متن‌هایی که در فیلد ورودی نوشته می‌شود را به صورت رمزگذاری شده و دایره‌های مشکی نمایش می‌دهد.

نام کاربری: <br>

<input type="text" ><br>

رمز عبور: <br>

<input type="text" >

دکمه ها

<“input  type= “submit> نوع دیگر ورودی‌ها submit است. این ورودی‌ که در واقع یک دکمه است، برای ثبت ورودی‌های قبلی به کار می‌رود. در واقع شما بعد از اینکه ورودی‌های قبلی(متنی یا رادیو) را پرکردید در نهایت با فشردن دکمه ثبت یا submit آن‌ها را ثبت و ذخیره می‌کنید

نام کاربری: <br>

<input type="text" ><br>

رمز عبور: <br>

<input type="text" >

<"input  type= "submit>

مجموعه این المان‌ها در قالب تگ فرم به سمت سرور حرکت می‌کنند.