فرم ها در HTML

شما در این مقاله با موارد زیر آشنا می شوید:
  • چگونگی جمع آوری اطلاعات از بازدیدکنندگان
  • انواع کنترل های فرم
  • کنترل های جدید فرم در HTML5

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

احتمالاً بهترین شکل شناخته شده فرم، جعبه جستجویی است که در وسط صفحه اصلی گوگل قرار دارد.
کنترل فرم ها

انواع مختلفی از کنترل های فرم وجود دارد که می توانید برای جمع آوری اطلاعات از بازدیدکنندگان سایت خود استفاده کنید.افزودن متن
  • وردی متن (تک خطی)

برای متن های تک خطی مانند آدرس ایمیل یا نام استفاده می شود.
  • ورودی رمز

مانند یک باکس ورودی متن است اما کاراکترها را بصورت ستاره یا دایره توپُر نشان می دهد.
  • ناحیه متن (چند خط)

برای متن های طولانی مثل پیام ها و نظرات، به کار می رود.
امکان انتخاب

  • radio

برای استفاده هنگامی که کاربر باید یکی از چندین گزینه را انتخاب کند.
  • checkbox

هنگامی که یک کاربر می تواند بیش از یک گزینه را انتخاب کند، استفاده می شود.
  • باکس های کشویی

هنگامی که یک کاربر باید یکی از چند گزینه موجود در یک لیست را انتخاب کند.
فرم های ارسال

  • دکمه ارسال (submit)

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

  • آپلود فایل

به کاربران امکان می دهد فایل ها (به عنوان مثال عکس) را به یک وبسایت آپلود کنند.
ساختار فرم ها

<form>تمام کنترل های فرم درون یک المان <form> قرار می گیرند. این المان همیشه باید حاوی ویژگی action باشد. و معمولاً ویژگی های id و method را نیز دز خود دارد.actionهر عنصر <form> نیاز به ویژگی action دارد. مقدار آن آدرس URL صفحه ای است که اطلاعات فرم ارسال می شود.methodفرم ها را می توان با استفاده از یکی از دو روش ارسال کرد: Get یا Postروش ارسال Get در موارد زیر استفاده می شود:
  • فرم های کوچک (مانند باکس های جستجو)
  • زمان بازیابی اطلاعات از وب سرور

روش ارسال Post در موارد زیر به کار می رود:
  • فرم هایی که اجازه آپلود فایل را به کاربر می دهد.
  • فرم های بسیار طولانی
  • فرم های حاوی اطلاعات حساس و سِرّی مانند گذرواژه ها
  • فرم هایی که اطلاعات را به پایگاه داده اضافه کرده یا از آن حذف می کنند.

امنیت طراحی سایت در وردپرس

اگر ویژگی method استفاده نشود، اطلاعات فرم با استفاده از روش Get ارسال می شوند.idاین ویژگی برای شناسایی فرم از المان های دیگر به طور مشخص استفاده می شود (اغلب زمان استفاده از اسکریپت ها، به کار می رود).
ورودی متن

<input>عنصر <input> برای ایجاد چندین کنترل مختلف فرم استفاده می شود. مقدار ویژگی type مشخص می کند چه نوع ورودی توسط آن ایجاد خواهد شد.Type=”text”هنگامی که ویژگی type دارای مقدار text است، یک ورودی متنی تک خط ایجاد می شود.nameهنگامی که کاربران اطلاعات را در یک فرم وارد می کنند، سرور نیاز دارد بداند، در هر قسمت از فرم کنترل ها چه نوع داده ای وارد شده است (به عنوان مثال در یک فرم login، سرور باید بداند که کدام ورودی رمز، و کدام ورودی نام کاربری می باشد). بنابراین، هر کنترل فرم نیاز به ویژگی name دارد. مقدار این ویژگی، کنترل فرم را مشخص می کند و همراه با اطلاعاتی که به سرور وارد می شوند، ارسال می شود.
<form action="http://www.example.com/login.php">

<p>Username:

<input type="text" name="username" size="15" maxlength="30" />

</p>

</form>
maxlengthشما می توانید ویژگی maxlength را برای محدود کردن تعداد کاراکترهای کاربر که ممکن است در قسمت متن وارد کند، استفاده کنید. مقدار آن تعداد حداکثر کاراکتری است که می تواند وارد شوند. به عنوان مثال اگر ورودی متن شما سال باشد، ویژگی maxlength را برابر 4 قرار می دهید.
ورودی رمز

<input>type=”password”هنگامی که ویژگی type دارای مقدار password است، یک جعبه متن ایجاد می کند که کاملاً مانند یک ورودی تک خطی عمل می کند، به جز اینکه کاراکترها به صورت ستاره یا گلوله دیده می شوند، به این خاطر که کسی نتواند اطلاعات حساس مانند رمز را ببیند.nameاین ویژگی نام ورودی رمز را برای سرور مشخص می کند، که همراه با رمز ورودی کاربر به سرور ارسال می شود.maxlengthاین ویژگی برای type رمز مانند ورودی متن به کار می رود.
<form action="http://www.example.com/login.php">

<p>Username:

<input type="text" name="username" size="15" maxlength="30" />

</p>

<p>Password:

<input type="password" name="password" size="15" maxlength="30" />

</p>

</form>
<textarea>این المان برای ایجاد متن چندخطی استفاده می شود. برخلاف سایر المان ها، این عنصر یک المان خالی نیست، یعنی تگ پایانی دارد. هر متنی که بین تگ آغازین و پایانی آن نوشته شود، بعد از بارگذاری صفحه درون باکس ظاهر می شود. back end

اگر کاربر متن درون باکس را حذف نکند، این نوشته همراه با سایر اطلاعات به سرور ارسال می شود. (برخی سایت ها از جاوا اسکریپت برای پاک کردن این اطلاعات، زمانی که کاربر درون باکس کلیک میکند، استفاده می کنند)اگر شما قصد طراحی سایت دارید، باید از CSS برای کنترل طول و عرض یک <textarea> استفاده کنید. با این حال اگر به کدهای قدیمی نگاه کنید ممکن است ویژگی های cols و rows را در این المان ببینید. ویژگی cols نشان می دهد که عرض محدوده متن باید به اندازه چند کاراکتر باشد، و ویژگی rows تعداد ردیف هایی که می توان در آن متن نوشت را تعیین می کند.
<form action="http://www.example.com/comments.php">

<p>What did you think of this gig? </p>

<textarea name="comments" cols="20" rows="4">Enter your comments...</textarea>

</form>
Radio Button<input>type=”radio”دکمه های radio به کاربران اجازه می دهد تا فقط یکی از چند گزینه را انتخاب کنند.nameمشخصه نام به سرور با مقدار گزینه ای که کاربر انتخاب می کند، به سرور ارسال می شود. هنگامی که چندین گزینه برای یک سوال وجود دارند و باید یکی انتخاب شود، ویژگی name برای تمام گزینه ها باید یکسان باشد.valueمقدار انتخاب شده برای این ویژگی، همراه با مورد انتخاب شده، به سرور ارسال می گردد. مقدار آن برای هر دکمه در یک گروه باید متفاوت باشد (به این دلیل که سرور بداند چه گزینه ای انتخاب شده است).checkedاگر یکی از موارد دارای این ویژگی باشد، هنگام بارگذاری بصورت انتخاب شده نشان داده می شود. مقدار این ویژگی checked می باشد. توجه کنید که فقط برای یک مورد باید از این ویژگی استفاده کنید.
  • به این نکته دقت کنید که اگر کاربر یک گزینه را انتخاب کند دیگر نمی تواند آن را از حالت انتخاب درآورد، مگر اینکه یک گزینه دیگر را از همان گروه را انتخاب کند. و برای مواردی که می خواهید این اجازه را به کاربر بدهید که بتواند پس از تیک زدن یک مورد، آن را از حالت انتخاب خارج کند، باید از checkbox بجای radio استفاده کنید.

<form action="http://www.example.com/profile.php">

<p>Please select your favorite genre:

<br />

<input type="radio" name="genre" value="rock" checked="checked" /> Rock

<input type="radio" name="genre" value="pop" /> Pop

<input type="radio" name="genre" value="jazz" /> Jazz

</p>

</form>
موضوع فرم ها در طراحی سایت را در مقاله بعدی ادامه خواهیم داد.