استایل بندی فرم های HTML — راهنمای جامع

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

• فرم های HTML در مرورگرهای قدیمی — راهنمای جامع

همچنین، برای آشنایی کامل با HTML مطالعه مطلب «زبان برنامه نویسی HTML چیست؟ | راهنمای یادگیری و شروع به کار | به زبان ساده» پیشنهاد می‌شود.

چرا استایل‌بندی ویجت‌های فرم با CSS دشوار است؟

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

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

چند سال بعدتر که CSS خلق شد بر حسب ضرورت فنی از ویجت‌های بومی برای پیاده‌سازی کنترل‌های فرم به دلیل الزام به استایل‌بندی استفاده شد. در روزهای آغازین CSS استایل‌بندی کنترل‌ها یک اولویت محسوب نمی‌شد.

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

حتی امروزه نیز هیچ مرورگر منفردی به صورت کامل CSS2.1 را پیاده‌سازی نکرده است. با این حال در طی زمان، ارائه‌دهندگان مرورگرها پشتیبانی خود از CSS را برای عناصرشان بهبود بخشیدند و گرچه CSS در این زمینه شهرت بدی کسب کرده است، اما امروزه می‌توان از آن برای استایل‌بندی فرم‌های HTML استفاده کرد.

همه ویجت‌ها در زمان فراخوانی CSS به صورت برابر ایجاد نمی‌شوند

در حال حاضر همچنان برخی دشواری‌ها در زمان استفاده از CSS روی فرم‌ها بر جا مانده است. این مشکلات را می‌توان به سه دسته عمده تقسیم کرد:

موارد خوب

برخی عناصر می‌توانند بدون هیچ مشکل و یا مشکلات جزئی روی همه پلتفرم‌ها استایل‌بندی شوند. این موارد شامل عناصر ساختاری زیر هستند:

1. <form>
2. <fieldset>
3. <label>
4. <output>

این لیست همچنین شامل همه ویجت‌های فیلد متنی (چه تک‌خطی و چه چندخطی) و دکمه‌ها نیز می‌شود.

موارد بد

برخی عناصر به ندرت می‌توانند استایل‌بندی شوند و ممکن است نیازمند برخی ترفندهای پیچیده باشند و حتی در مواردی ممکن است لازم باشد از دانش پیشرفته CSS3 برخوردار باشید.

این لیست شامل عنصر <legend> است، اما این عنصر نمی‌تواند روی همه پلتفرم‌ها به درستی موقعیت‌یابی شود. «کادرهای انتخاب» (Checkboxes) و دکمه‌های رادیویی نیز نمی‌توانند مستقیماً استایل‌بندی شوند گرچه به لطف CSS3 می‌توان راه‌حل‌هایی یافت. محتوای placeholder به هیچ روش استانداردی قابل استایل‌بندی نیست، با این حال همه مرورگرهایی که آن را پیاده‌سازی می‌کنند، شِبه‌عنصر CSS مناسبی را برای آن پیاده‌سازی کرده‌اند یا شِبه‌کلاسی دارند که امکان استایل‌بندی آن را فراهم می‌سازد.

ما در مقالات آتی مجله فرادرس، روش مدیریت همه این حالت‌ها را با جزییات بیشتر توضیح خواهیم داد.

موارد زشت

برخی عناصر نمی‌توانند با استفاده از CSS استایل‌بندی شوند. این موارد شامل همه ویجت‌های پیشرفته اینترفیس کاربر مانند کنترل‌های range ،color یا date و همه ویجت‌های بازشدنی شامل عناصر <select> ،<option> ،<optgroup> و <datalist> می‌شود. ویجت file picker نیز به طور کلی نمی‌تواند استایل‌بندی شود. عناصر جدید <progress> و <meter> نیز در همین دسته جای می‌گیرند.

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

• ساخت ویجت‌های سفارشی فرم در HTML — راهنمای جامع

استایل‌بندی ابتدایی

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

فیلم آموزش سی اس اس – طراحی وب سایت با CSS – مقدماتی در فرادرس

کلیک کنید

فیلدهای جستجو

کادرهای جستجو تنها نوعی از فیلدهای متنی هستند که ممکن است استایل‌بندی‌شان کمی دشوار باشد. در مرورگرهای مبتنی بر WebKit (کروم، سافاری و غیره) باید آن را با مشخصه webkit-appearance- دستکاری بکنید.

مثال

1<form>
2  <input type="search">
3</form>

1input[type=search] {
2  border: 1px dotted #999;
3  border-radius: 0;
4
5  -webkit-appearance: none;
6}

چنان که در تصویر فوق از فیلد جستجو روی مرورگر کروم مشخص است، دو فیلد دارای حاشیه هستند. فیلد اول بدون استفاده از مشخصه ‎-webkit-appearance رندر شده است در حالی که دومی با استفاده از مشخصه webkit-appearance:none رندر شده است. تفاوت کاملاً مشخص است.

فونت‌ها و متن

فونت CSS و قابلیت‌های متن می‌توانند به سهولت روی هر نوع ویجتی استفاده شوند. حتی می‌توان از font-face@ به همراه ویجت‌های فرم استفاده کرد. با این حال رفتار مرورگرها غالباً ناسازگار است. برخی ویجت‌ها به صورت پیش‌فرض از font-family و font-size از والدینشان ارث‌بری نمی‌کنند. مرورگرهای زیادی به جای آن از ظاهر پیش‌فرض سیستم استفاده می‌کنند. برای این که فرم شما از نظر ظاهری با باقی محتوا سازگار باشد، می‌توانید قاعده زیر را به استایل‌شیت اضافه کنید:

1button, input, select, textarea {
2  font-family : inherit;
3  font-size   : 100%;
4}

تصویر زیر تفاوت را نشان می‌دهد. در تصویر سمت چپ رندرینگ پیش‌فرض عنصر در فایرفاکس روی Mac OS X با استایل فونت پیش‌فرض پلتفرم مشاهده می‌شود. در سمت راست همان عناصر با اعمال قواعد هماهنگ‌سازی استایل دیده می‌شوند.

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

مدل باکس

همه فیلدهای متنی دارای پشتیبانی کاملی برای همه مشخصه‌های مرتبط با مدل باکس CSS شامل width ،height، padding ،margin و border هستند. با این حال مانند بخش قبل مرورگرها در زمان نمایش این ویجت‌ها عموماً به استایل‌های پیش‌فرض سیستم تکیه دارند. این بر عهده شما است که تعریف کنید دوست دارید آن‌ها چگونه با محتوای دیگر بخش‎های وب‌سایت هماهنگ شوند. اگر می‌خواهید ظاهر و حس بومی ویجت‌ها را حفظ کنید یا در صورتی که بخواهید اندازه سازگاری برایشان تعیین کنید، با کمی دشواری مواجه خواهید شد.

دلیل این مسئله آن است که هر ویجت قواعد خاص خود را برای border ،padding و margin دارد. بنابراین اگر می‌خواهید اندازه یکسانی به چند ویجت مختلف بدهید، باید از مشخصه box-sizing استفاده کنید:

1input, textarea, select, button {
2  width : 150px;
3  margin: 0;
4
5  -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
6     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
7          box-sizing: border-box;
8}

در تصویر فوق، سمت چپ بدون box-sizing ساخته شده است، در حالی که ستون راست از این مشخصه با مقدار border-box استفاده می‌کند. توجه کنید که بدین ترتیب می‌توانیم مطمئن شویم که همه عناصر علی‌رغم قواعد پیش‌فرض هر نوع ویجت، فضای یکسانی اشغال کرده‌اند.

موقعیت‌یابی

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

Legend

عنصر <legend> استایل‌بندی آسانی دارد و تنها مشکل در موقعیت‌یابی است. عنصر <legend> در هر مرورگر در بالای حاشیه فوقانی والد <fieldset> خود جای می‌گیرد. مطلقاً هیچ راهی برای تغییر دادن آن و قرار گرفتنش در داخل HTML و دوری از حاشیه فوقانی وجود ندارد. با این حال می‌توانید آن را به صورت مطلق یا نسبی با استفاده از مشخصه position موقعیت‌یابی کنید. در غیر این صورت بخشی از حاشیه fieldset خواهد بود.

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

HTML

1<fieldset>
2  <legend>Hi!</legend>
3  <h1>Hello</h1>
4</fieldset>

CSS

1legend {
2  width: 1px;
3  height: 1px;
4  overflow: hidden;
5}

Textarea

به صورت پیش‌فرض همه مرورگرها عنصر <textarea> را یک بلوک درون‌خطی در نظر می‌گیرند که در راستای خط تختانی متن تراز می‌شود. این وضعیت به ندرت مطلوب است. برای تغییر دادن inline-block به block بهتر است به آسانی از مشخصه display استفاده کنیم. اما اگر بخواهید از inline استفاده کنید، تغییر دادن تراز عمودی کار دشواری نخواهد بود:

1textarea {
2  vertical-align: top;
3}

مثال

در این بخش نگاهی به یک مثال دقیق از شیوه استایل‌بندی یک فرم HTML خواهیم داشت. بدین ترتیب بسیاری از این ایده‌ها روشن‌تر می‌شوند. ما قصد داریم این فرم تماس «کارت‌پستالی» را بسازیم.

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

فایل postcard-start.html

1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>Postcard example</title>
7    <style>
8    </style>
9</head>
10
11<body>
12
13</body>
14
15</html>

کد HTML

کد HTML این مثال چندان پیچیده نیست و صرفاً چند ID و عنوان از یک صفحه معمولی HTML بیشتر دارد:

1<form>
2  <h1>to: Mozilla</h1>
3
4  <div id="from">
5    <label for="name">from:</label>
6    <input type="text" id="name" name="user_name">
7  </div>
8
9  <div id="reply">
10    <label for="mail">reply:</label>
11    <input type="email" id="mail" name="user_email">
12  </div>
13
14  <div id="message">
15    <label for="msg">Your message:</label>
16    <textarea id="msg" name="user_message"></textarea>
17  </div>
18 
19  <div class="button">
20    <button type="submit">Send your message</button>
21  </div>
22</form>

کد فوق را در بدنه HTML اضافه می‌کنیم.

سازماندهی فایل‌ها

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

• پس‌زمینه کارت‌پستال (+) – این فایل را دانلود کرده و در همان دایرکتوری که فایل HTML قرار دارد، بگذارید.
• یک فونت ماشین تایپ (+) – فونت Secret Typewriter را دانلود کرده و فایل TTF را در همان دایرکتوری قبلی قرار دهید.
• فونت دست‌نویس (+) – فونت Journal را دانلود کرده و فایل TTF را در همان دایرکتوری HTML قرار دهید.

پیش از آغاز فونت‌ها به مقدار پردازش بیشتر نیاز دارد:

1. به بخش تولید Webfont وب‌سایت fontsquirrel (+) بروید.
2. با استفاده از فرم مربوطه، هر دو فایل فونت را آپلود کنید و یک کیت وب‌فونت ایجاد کنید. کیت را روی رایانه خود دانلود کنید.
3. فایل فشرده ارائه شده را از حالت فشرده خارج کنید.
4. درون محتوای نافشرده دو فایل woff. و دو فایل woff2. می‌بینید. این چهار فایل را در یک دایرکتوری به نام fonts در همان دایرکتوری قبلی کپی کنید. ما از فایل‌های مختلف برای هر فونت استفاده می‌کنیم تا سازگاری مرورگر را ارتقا ببخشیم.

کد CSS

اکنون نوبت بررسی CSS مثال رسیده است. همه بلوک‌های کد نمایش یافته درون عنصر <style> را یکی پس از دیگری اضافه کنید.

ابتدا زمینه را با تعریف کردن قواعد ‎@font-face آماده می‌کنیم. همه موارد مقدماتی روی عنصر ‎<body> element و عنصر <form> آماده هستند:

1@font-face {
2    font-family: 'handwriting';
3    src: url('fonts/journal-webfont.woff2') format('woff2'),
4         url('fonts/journal-webfont.woff') format('woff');
5    font-weight: normal;
6    font-style: normal;
7}
8
9@font-face {
10    font-family: 'typewriter';
11    src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
12         url('fonts/veteran_typewriter-webfont.woff') format('woff');
13    font-weight: normal;
14    font-style: normal;
15}
16
17body {
18  font  : 21px sans-serif;
19
20  padding : 2em;
21  margin  : 0;
22
23  background : #222;
24}
25
26form {
27  position: relative;
28
29  width  : 740px;
30  height : 498px;
31  margin : 0 auto;
32
33  background: #FFF url(background.jpg);
34}

اکنون می‌توانیم موقعیت عناصر خود را که شامل عنوان و همه عناصر فرم است تعیین کنیم:

1h1 {
2  position : absolute;
3  left : 415px;
4  top  : 185px;
5 
6  font : 1em "typewriter", sans-serif;
7}
8
9#from {
10  position: absolute;
11  left : 398px;
12  top  : 235px;
13}
14
15#reply {
16  position: absolute;
17  left : 390px;
18  top  : 285px;
19}
20
21#message {
22  position: absolute;
23  left : 20px;
24  top  : 70px;
25}

این همان جایی است که شروع به کار روی خود عناصر فرم می‌کنیم. ابتدا باید مطمئن شویم که عناصر <label> دارای فونت مناسبی هستند:

1label {
2  font : .8em "typewriter", sans-serif;
3}

فیلدهای متنی نیازمند نوعی قواعد مشترک هستند. به بیان ساده ما borders و backgrounds را حذف می‌کنیم و padding و margin آن‌ها را بازتعریف می‌کنیم:

1input, textarea {
2  font    : .9em/1.5em "handwriting", sans-serif;
3
4  border  : none;
5  padding : 0 10px;
6  margin  : 0;
7  width   : 240px;
8
9  background: none;
10}

زمانی که یکی از این فیلدها فوکوس بگیرند، آن‌ها را به رنگ خاکستری روشن و با پس‌زمینه شفاف هایلایت می‌کنیم. توجه کنید که افزودن مشخصه outline برای حذف هایلایت فوکوس پیش‌فرض اضافه شده روی برخی مرورگرها ضروری است:

1input:focus, textarea:focus {
2  background   : rgba(0,0,0,.1);
3  border-radius: 5px;
4  outline      : none;
5}

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

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

1input {
2    height: 2.5em; /* for IE */
3    vertical-align: middle; /* This is optional but it makes legacy IEs look better */
4}

عناصر <textarea> به صورت پیش‌فرض به عنوان یک عنصر بلوکی رندر می‌شوند. دو نکته مهم در اینجا به مشخصه‌های resize و overflow مربوط است. از آنجا که طراحی دارای اندازه ثابت است، باید از مشخصه resize برای جلوگیری از تغییر دادن اندازه فیلدهای متنی چندخطی از سوی کاربران استفاده کنیم. مشخصه overflow برای این که فیلد روی مرورگرهای مختلف به روش منسجم‌تری رندر شود مورد استفاده قرار می‌گیرد. برخی مرورگرها به صورت پیش‌فرض دارای مقدار auto هستند، در حالی که برخی دیگر دارای مقدار پیش‌فرض scroll هستند. در این حالت بهتر است هر بار که از auto استفاده می‌کنیم کاملاً مطمئن باشیم:

1textarea {
2  display : block;
3
4  padding : 10px;
5  margin  : 10px 0 0 -10px;
6  width   : 340px;
7  height  : 360px;
8
9  resize  : none;
10  overflow: auto;
11}

عنصر <button> با CSS کاملاً سازگار است و می‌توان هر کار موردنظر را روی آن حتی با استفاده از pseudo-elements اجرا کرد:

1button {
2  position     : absolute;
3  left         : 440px;
4  top          : 360px;
5
6  padding      : 5px;
7
8  font         : bold .6em sans-serif;
9  border       : 2px solid #333;
10  border-radius: 5px;
11  background   : none;
12
13  cursor       : pointer;
14
15-webkit-transform: rotate(-1.5deg);
16   -moz-transform: rotate(-1.5deg);
17    -ms-transform: rotate(-1.5deg);
18     -o-transform: rotate(-1.5deg);
19        transform: rotate(-1.5deg);
20}
21
22button:after {
23  content: " >>>";
24}
25
26button:hover,
27button:focus {
28  outline   : none;
29  background: #000;
30  color   : #FFF;
31}

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

فایل index.html

1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>Postcard example</title>
7    <style>
8    @font-face {
9        font-family: 'handwriting';
10        src: url('fonts/journal-webfont.woff2') format('woff2'),
11             url('fonts/journal-webfont.woff') format('woff');
12        font-weight: normal;
13        font-style: normal;
14    }
15    @font-face {
16        font-family: 'typewriter';
17        src: url('fonts/veteran_typewriter-webfont.woff2') format('woff2'),
18             url('fonts/veteran_typewriter-webfont.woff') format('woff');
19        font-weight: normal;
20        font-style: normal;
21    }
22    body {
23      font  : 21px sans-serif;
24      padding : 2em;
25      margin  : 0;
26      background : #222;
27    }
28    form {
29      position: relative;
30      width  : 740px;
31      height : 498px;
32      margin : 0 auto;
33      background: #FFF url(background.jpg);
34    }
35    h1 {
36      position : absolute;
37      left : 415px;
38      top  : 185px;
39      font : 1em "typewriter", sans-serif;
40    }
41    #from {
42      position: absolute;
43      left : 398px;
44      top  : 235px;
45    }
46    #reply {
47      position: absolute;
48      left : 390px;
49      top  : 285px;
50    }
51    #message {
52      position: absolute;
53      left : 20px;
54      top  : 70px;
55    }
56    label {
57      font : .8em "typewriter", sans-serif;
58    }
59    input, textarea {
60      font    : .9em/1.5em "handwriting", sans-serif;
61      border  : none;
62      padding : 0 10px;
63      margin  : 0;
64      width   : 240px;
65      background: none;
66    }
67    input:focus, textarea:focus {
68      background   : rgba(0,0,0,.1);
69      border-radius: 5px;
70      outline      : none;
71    }
72    input {
73        height: 2.5em; /* for IE */
74        vertical-align: middle; /* This is optional but it makes legacy IEs look better */
75    }
76    textarea {
77      display : block;
78      padding : 10px;
79      margin  : 10px 0 0 -10px;
80      width   : 340px;
81      height  : 360px;
82      resize  : none;
83      overflow: auto;
84    }
85    button {
86      position     : absolute;
87      left         : 440px;
88      top          : 360px;
89      padding      : 5px;
90      font         : bold .6em sans-serif;
91      border       : 2px solid #333;
92      border-radius: 5px;
93      background   : none;
94      cursor       : pointer;
95    -webkit-transform: rotate(-1.5deg);
96       -moz-transform: rotate(-1.5deg);
97        -ms-transform: rotate(-1.5deg);
98         -o-transform: rotate(-1.5deg);
99            transform: rotate(-1.5deg);
100    }
101    button:after {
102      content: " >>>";
103    }
104    button:hover,
105    button:focus {
106      outline   : none;
107      background: #000;
108      color   : #FFF;
109    }
110    </style>
111</head>
112
113<body>
114
115  <form>
116    <h1>to: Mozilla</h1>
117
118    <div id="from">
119      <label for="name">from:</label>
120      <input type="text" id="name" name="user_name">
121    </div>
122
123    <div id="reply">
124      <label for="mail">reply:</label>
125      <input type="email" id="mail" name="user_email">
126    </div>
127
128    <div id="message">
129      <label for="msg">Your message:</label>
130      <textarea id="msg" name="user_message"></textarea>
131    </div>
132
133    <div class="button">
134      <button type="submit">Send your message</button>
135    </div>
136  </form>
137
138</body>
139
140</html>

فایل postcard-start.html

1<!DOCTYPE html>
2<html>
3
4<head>
5    <meta charset="utf-8">
6    <title>Postcard example</title>
7    <style>
8    </style>
9</head>
10
11<body>
12
13</body>
14
15</html>

سخن پایانی

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

فیلم مجموعه آموزش طراحی سایت با HTML و CSS – مقدماتی تا پیشرفته در فرادرس

کلیک کنید

برای مطالعه بخش بعدی این سری مقالات روی لینک زیر کلیک کنید:

• استایل بندی پیشرفته فرم های HTML --- راهنمای جامع

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی سایت با HTML و CSS
• آموزش طراحی وب با CSS
• مجموعه آموزش‌های برنامه‌‌نویسی
• ۸ ترفند مفید CSS که باید بدانید — راهنمای کاربردی
• ۱۰ نمونه کد ساده CSS که می‌توان در ۱۰ دقیقه آموخت

==