تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش HTML – بخش یازدهم

آموزش HTML | آموزش HTML5

در این بخش از آموزش html5 فارسی با فرم و نحوه ایجاد آن به‌صورت مختصر آشنا می‌شویم و در قسمت‌های بعدی به‌صورت کامل این جزء از صفحه وب را به‌طور کامل بررسی خواهیم کرد.

قرار دادن فرم در صفحه با HTML

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

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

اجزاء ورودی

مهم‌ترین بخش یک فرم، ورودی‌های آن است. این بخش‌ها توسط تگ <input> وارد می‌شوند و ازآنجایی‌که چندین ورودی مختلف داریم، توسط اتریبیوت type نوع آن را مشخص می‌کنیم که طبیعتا نحوه و شکل نمایش این بخش‌ها هم متفاوت خواهد بود. توجه کنید که تگ <input> فقط تگ آغاز دارد و به‌اصطلاح empty تگ است و تگ پایان ندارد.

به‌عنوان‌مثال برای قرار دادن بخش نام و یا نام خانوادگی و در کل برای بخش‌هایی که باید با حروف الفبا پر شوند مقدار اتریبیوت type را text می‌دهیم؛ یعنی این بخش با متن پر خواهد شد.

وقتی‌که مقدار اتریبیوت type را radio بدهیم، دکمه‌های رادیویی در صفحه قرار می‌گیرند. با دادن مقدار submit به اتریبیوت type، دکمه سابمیت را به وجود می‌آورد که برای ارسال فرم به سمت سرور است. جزئیات این بخش‌ها را در همین مقاله خواهیم آموخت.

ورودی متن در فرم

فرض کنید می‌خواهید نام و نام خانوادگی کاربر را دریافت کنید. برای نام یک تکست باکس و برای نام خانوادگی تکست باکس دیگری می‌خواهیم؛ و همان‌طور که گفتیم مقدار اتریبیوت type برای این بخش‌ها text است. اتریبیوت دیگری که باید برای این ورودی‌ها تعیین شود، اتریبیوت name است که برای هر بخش باید منحصربه‌فرد باشد. اگر این اتریبیوت برای ورودی‌های مختلف یکسان باشد، تنها یکی از تکست باکس‌ها به سرور ارسال می‌شود. همچنین حداکثر ۲۰ کاراکتر در حالت دیفالت می‌توان در این بخش‌ها وارد کرد.

<!DOCTYPE html>
<html lang="en">
<head>
          <meta charset="UTF-8">
          <title> عنوان صفحه </title>
</head>
<body>
          <form>
                   نام <br/>
                   <input type="text" name="firstname" /> <br>
                   نام خانوادگی <br>
                   <input type="text" name="lastname"/>
          </form>
</body>
</html>

 

تگ form | آموزش html5 فارسی

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

وقتی‌که در فرم در بخش‌هایی لازم است از بین چندین گزینه فقط یکی را انتخاب کنیم، از دکمه‌های رادیویی استفاده می‌کنیم. پس اتریبیوت type مقدار radio را خواهد گرفت. اگر مثلا ۴ دکمه ایجاد کنیم که باید فقط یکی از آن‌ها انتخاب شود، مقدار اتریبیوت name را در هر ۴ جزء یکسان انتخاب می‌کنیم؛ مثلا وقتی می‌خواهیم جنسیت را انتخاب کنیم، دو گزینه مرد وزن‌داریم که باید یکی از این دو گزینه انتخاب شوند؛ بنابراین مقدار name را در این دو دکمه یکسان و مثلا gender قرار می‌دهیم. گفتیم که تگ <input> تگ پایان ندارد و ما می‌خواهیم که لغت و یا متنی را برای انتخاب کاربر قرار دهیم.

مقداری را که می‌خواهیم کاربر ببیند و عنوان این دکمه‌ها باشد را می‌توان قبل و یا بعد از تگ <input> قرارداد؛ که اگر قبل از تگ قرار دهید دکمه در جلوی متن و اگر بعد از تگ قرار دهید دکمه قبل از متن قرار خواهد گرفت. در کل تگ و متن به همان ترتیبی که نوشته می‌شوند نمایش داده می‌شوند، این مقداری را که کاربر قرار است ببیند را باید به اتریبیوت value بدهیم. (دلیل این کار را به‌زودی توضیح خواهیم داد.) بعضی وقت‌ها می‌خواهیم که یک دکمه به‌صورت دیفالت وقتی صفحه باز می‌شود انتخاب‌شده باشد. در این حالت اتریبیوت checked را برای دکمه موردنظر قرار می‌دهیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form>
			any value::<input type="radio" name="name" value="any value" checked/> <br>
			any value::<input type="radio" name="name" value="any value" /> <br>
			any value::<input type="radio" name="name" value="any value" /> <br>
			any value::<input type="radio" name="name" value="any value" />
		</form>
	</body>
</html>

 

در این مثال، متن any value را قبل از تگ input قراردادیم و همان‌طور که مشاهده می‌کنید، دکمه بعد از متن قرارگرفته است. یعنی اول متن و بعد تگ را نوشتیم که به همین ترتیب در مرورگر نمایش داده‌شده‌اند.

تگ form | آموزش html5 فارسی

افزودن دکمه submit

وقتی‌که فرم پر شد، اطلاعات کاربر باید برای سرور ارسال شود و در آنجا در صفحه‌ای به نام form-handler پردازش شود. ارسال فرم را با دکمه سابمیت انجام می‌دهیم.

Form-handler دارای آدرسی است و معمولا با زبان php طراحی می‌شود. چگونگی کار کردن این صفحه را در آموزش‌های php به‌طور کامل بررسی خواهیم کرد. در اینجا می‌خواهیم بگوییم که از طریق اتریبیوت action در تگ <form> آدرس صفحه form-handler را وارد می‌کنیم.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		<form>
			نام <br>
			<input type="text" name="firstname" value="نام" />
			<br> <br> <br>
			نام خانوادگی <br>
			<input type="text" name="lastname" value="نام خانوادگی" />
			<br> <br> <br>
			<input type="submit" value="ارسال">
		</form>
	</body>
</html>

در بخش‌هایی که باید با حروف الفبا پر شوند، مانند قسمت نام و نام خانوادگی، با استفاده از اتریبیوت value عبارتی را که می‌خواهیم درون تکست باکس نمایش داده شود را تعیین می‌کنیم که کاربر با کلیک در کارد مربوطه، می‌تواند متن را حذف کرده و متن جدید را وارد کند. این پراپرتی برای دکمه سابمیت هم همین کاربرد را دارد.

قبل و بعد از کلیک بر روی دکمه ارسال، آدرس بار مرورگر را چک کنید!!

تگ form | آموزش html5 فارسی

اتریبیوت Action

هنگامی‌که یک فرم تکمیل شد، اطلاعات واردشده باید به سمت سرور ارسال شوند و همان‌طور که گفتیم این اطلاعات در صفحه form-handler مورد پردازش قرار می‌گیرند. ارسال فرم را با دکمه submit انجام می‌دهیم. قبلا گفتیم که آدرس صفحه form-handler را توسط اتریبیوت action که در تگ آغاز تگ <form> نوشته می‌شود، تعیین می‌کنیم تا مرورگر اطلاعات فرم را به سمت سرور و به آدرس مربوطه ارسال کند. اگر اتریبیوت action را به کار نبریم، با فشردن دکمه سابمیت اطلاعات فرم در آدرس بار مرورگر نمایش داده می‌شوند.

آشنایی با متدهای ارسال

اکنون‌که فرم تکمیل‌شده است و آماده ارسال به سرور می‌باشد، اطلاعات را باید با یکی از دو متد GET و یا POST ارسال کنیم. متد ارسال را هم با استفاده از اتریبیوت method در تگ آغاز تگ <form> تعیین می‌کنیم.

متدی که به‌صورت دیفالت استفاده می‌شود متد GET است و زمانی استفاده می‌شود که اطلاعاتی که قرار است ارسال شوند، اطلاعات حساسی نیستند. در کل اطلاعاتی که با این متد ارسال می‌شوند اطلاعاتی کوتاه و غیر حساس هستند.

متد POST برای ارسال اطلاعات شخصی و حساس به کار می‌رود. این اطلاعات در آدرس بار مرورگر نمایش داده نمی‌شوند. با این متد هر حجم اطلاعاتی را می‌توان ارسال کرد درصورتی‌که ارسال اطلاعات با متد GET محدود است.

اتریبیوت Name

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

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <form>
                             نام <br>
                             <input type="text" value="نام" />
                             <br> <br> <br>
                             نام خانوادگی <br>
                             <input type="text" name="lastname" value="نام خانوادگی" />
                             <br> <br> <br>
                             <input type="submit" value="ارسال">
                   </form>
          </body>
</html>
تگ form | آموزش html5 فارسی

آشنایی با اتریبیوت های <fieldset> و <legend>

در فرم‌ها قسمت‌های مختلفی وجود دارند که اطلاعات آن‌ها به هم مربوط می‌باشد. مثلا اطلاعات نام و نام خانوادگی و نام پدر، تاریخ تولد و سن و … . این اطلاعاتی را که به هم مربوط می‌باشند را درون تگ <fieldset> قرار می‌دهیم و برای آن نامی را انتخاب می‌کنیم که نام انتخابی را درون تگ <legend> می‌نویسیم.

درواقع با این کار فرم را به چند بخش تقسیم می‌کنیم و برای هر بخش نامی را تعیین می‌کنیم. تقسیم‌بندی فرم با <fieldset> انجام می‌شود و اطلاعاتی که درون این تگ قرار می‌گیرند، هنگام نمایش در مرورگر درون کادری مجزا نمایش داده خواهند شد؛ و نام‌گذاری هر قسمت را با <legend> انجام می‌دهیم که این نام قسمتی از کادر اطراف اطلاعات هر دسته را اشغال می‌کند. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
          <head>
                   <meta charset="UTF-8">
                   <title> عنوان صفحه </title>
          </head>
          <body>
                   <form>
                             <fieldset>
                                      <legend> اطلاعات شخصی </legend>
                                                نام <br>
                                                <input type="text" name="firstname" value="نام" />
                                                <br> <br> <br>
                                                نام خانوادگی <br>
                                                <input type="text" name="lastname" value="نام خانوادگی" />
                                                <br> <br> <br>
                                                <input type="submit" value="ارسال">
                             </fieldset>
                   </form>
          </body>
</html

 

تگ form | آموزش html5 فارسی

نوشته های مرتبط

دیدگاه ‏خود را بنویسید