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

۱۸۳ بازدید
آخرین به‌روزرسانی: ۱۳ شهریور ۱۴۰۲
زمان مطالعه: ۸ دقیقه
ساختاردهی فرم های HTML — راهنمای جامع

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

پیش‌نیازها

  • سواد مقدماتی رایانه
  • درک مبانی HTML

هدف از این مقاله آشنایی با ساختار فرم‌های HTML و معنابخشی به عناصر آن به منظور ارتقای قابلیت استفاده و دسترس‌پذیر ساختن آن‌ها است.

انعطاف‌پذیری فرم‌های HTML آن‌ها را به یکی از پیچیده‌ترین ساختارهای HTML تبدیل ساخته است. با استفاده از عناصر اختصاصی فرم و خصوصیت‌های آن‌ها می‌توان هر نوع فرم مقدماتی را ساخت. استفاده از ساختار صحیح در زمان ساخت فرم HTML تضمین می‌کند که فرم هم قابل استفاده و هم دسترس‌پذیر باشد.

عنصر <form>

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

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

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

نکته: HTML5 خصوصیت form را روی عناصر form معرفی کرده است. بدین ترتیب می‌توان یک عنصر را صراحتاً به یک عنصر اتصال داد هر چند درون <form> قرار نداشته باشد. متأسفانه در حال حاضر پیاده‌سازی این ویژگی روی مرورگرها آن قدر خوب نیست که بتوان به آن‌ها تکیه کرد.

عناصر <fieldset> و <legend>

عنصر <fieldset> روشی راحت برای ایجاد گروه‌هایی از ویجت‌ها است که مقصود مشترکی دارند و به منظور استایل‌دهی یا مقاصد معناشناختی مورد استفاده قرار می‌گیرند. می‌توانید یک <fieldset> را با گنجاندن عنصر <legend> درست زیر تگ <fieldset> برچسب‌گذاری کنید. محتوای متنی <legend> به طور رسمی مقصود <fieldset> که درونش قرار گرفته را توصیف می‌کند. فناوری‌های حمایتی زیادی از عنصر <legend> به این صورت استفاده می‌کنند که گویی بخشی از برچسب هر ویجت درون عنصر <fieldset> است. برای نمونه برخی نرم‌افزارهای قرائت صفحه مانند Jaws یا NVDA محتوای legend را پیش از خواندن برچسب هر ویجت می‌خوانند.

در ادامه مثال کوچکی را ملاحظه می‌کنید:

1<form>
2  <fieldset>
3    <legend>Fruit juice size</legend>
4    <p>
5      <input type="radio" name="size" id="size_1" value="small">
6      <label for="size_1">Small</label>
7    </p>
8    <p>
9      <input type="radio" name="size" id="size_2" value="medium">
10      <label for="size_2">Medium</label>
11    </p>
12    <p>
13      <input type="radio" name="size" id="size_3" value="large">
14      <label for="size_3">Large</label>
15    </p>
16  </fieldset>
17</form>

یک نرم‌افزار قرائت صفحه زمانی که فرم فوق را می‌خواند، به صورت «Fruit juice size small» برای ویجت اول، «Fruit juice size medium» برای ویجت دوم و «Fruit juice size large» برای ویجت سوم خواهد خواند.

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

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

عنصر <label>

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

1<label for="name">Name:</label> <input type="text" id="name" name="user_name">

وقتی <label> به درستی و از طریق خصوصیت‌های for و id به عنصر <input> وصل شده باشد، ابزار قرائت صفحه چیزی مانند «Name, edit text» می‌خواند. اگر برچسب به درستی تنظیم نشده باشد، ابزار قرائت صفحه تنها چیزی مانند «Edit text blank» می‌خواند که چندان مفید نیست. توجه کنید که ویجت می‌تواند درون عنصر <label> به صورت زیر نیز تعریف شود:

1<label for="name">
2  Name: <input type="text" id="name" name="user_name">
3</label>

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

برچسب‌ها نیز قابل کلیک هستند

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

1<form>
2  <p>
3    <label for="taste_1">I like cherry</label>
4    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
5  </p>
6  <p>
7    <label for="taste_2">I like banana</label>
8    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
9  </p>
10</form>

برچسب‌های چندگانه

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

1<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
2
3<!-- So this: -->
4<div>
5  <label for="username">Name:</label>
6  <input type="text" name="username">
7  <label for="username"><abbr title="required">*</abbr></label>
8</div>
9
10<!-- would be better done like this: -->
11<div>
12  <label for="username">
13    <span>Name:</span>
14    <input id="username" type="text" name="username">
15    <abbr title="required">*</abbr>
16  </label>
17</div>
18
19<!-- But this is probably best: -->
20<div>
21  <label for="username">Name: <abbr title="required">*</abbr></label>
22  <input id="username" type="text" name="username">
23</div>

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

  • در مثال اول، برچسب به همراه ورودی اصلاً خوانده نمی‌شود و صرفاً عبارت «edit text blank» به علاوه برچسب‌های واقعی به صورت جداگانه خوانده می‌شوند. عناصر چندگانه <label> موجب سردرگمی ابزار قرائت صفحه می‌شوند.
  • در مثال دوم، مسائل کمی روشن‌تر است. برچسب همراه با ورودی به صورت name star name edit text خوانده می‌شود و برچسب‌ها همچنان به صورت جداگانه خوانده می‌شوند. باز هم برخی موارد پیچیده هستند، اما این بار اوضاع بهتر است، زیرا ورودی و برچسب با هم ارتباط یافته‌اند.
  • مثال سوم بهترین حالت است. برچسب واقعی کلاً خوانده می‌شود و برچسب به همراه ورودی به صورت «name star edit text» خوانده می‌شود.

نکته: بسته به ابزار قرائت صفحه‌ای که استفاده می‌کنید، ممکن است نتایج کمی متفاوتی به دست آورید. ما از VoiceOver (و NDVA نیز رفتار مشابهی دارد) استفاده کرده‌ایم.

ساختارهای رایج HTML مورد استفاده در فرم‌ها

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

چنان که در مثال‌های قبلی دیدید، رویه رایج این است که برچسب و ویجت آن درون یک عنصر <div> قرار گیرد. عناصر <a> نیز کاربرد زیادی دارد. همین طور لیست‌های HTML بیشتر برای ساختاردهی چند کادر انتخاب یا دکمه‌های رادیویی استفاده می‌شوند. علاوه بر عنصر <fieldset> رویه رایج این است که از عناوین HTML مانند <h1> و <h2> و قطعه‌بندی با استفاده از <section> برای ساختاردهی فرم‌های پیچیده استفاده کنیم.

در نهایت یافتن استایل مناسب و کدنویسی آن برای طراحی یک فرم دسترس‌پذیر و با کارایی بالا وظیفه شماست. به طور معمول بخش‌های مختلف کارکردها در عناصر <section> و دکمه‌های رادیویی در یک <fieldset> قرار می‌گیرند.

مثال کاربردی: ایجاد ساختار یک فرم

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

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <title>My test page</title>
6  </head>
7  <body>
8    <p>This is my page</p>
9  </body>
10</html>

فایل CSS فرم پرداخت ما نیز به صورت زیر خواهد بود. آن را در همان دایرکتوری فایل HTML در فایلی با نام payment-form.css ذخیره کنید:

1h1 {
2    margin-top: 0;
3}
4
5ul {
6    margin: 0;
7    padding: 0;
8    list-style: none;
9}
10
11form {
12    margin: 0 auto;
13    width: 400px;
14    padding: 1em;
15    border: 1px solid #CCC;
16    border-radius: 1em;
17}
18
19div+div {
20    margin-top: 1em;
21}
22
23label span {
24    display: inline-block;
25    width: 120px;
26    text-align: right;
27}
28
29input, textarea {
30    font: 1em sans-serif;
31    width: 250px;
32    box-sizing: border-box;
33    border: 1px solid #999;
34}
35
36input[type=checkbox], input[type=radio] {
37    width: auto;
38    border: none;
39}
40
41input:focus, textarea:focus {
42    border-color: #000;
43}
44
45textarea {
46    vertical-align: top;
47    height: 5em;
48    resize: vertical;
49}
50
51fieldset {
52    width: 250px;
53    box-sizing: border-box;
54    margin-left: 136px;
55    border: 1px solid #999;
56}
57
58button {
59    margin: 20px 0 0 124px;
60}
61
62label {
63  position: relative;
64}
65
66label em {
67  position: absolute;
68  right: 5px;
69  top: 20px;
70}

قبل از هر چیز با افزودن کد زیر درون بخش <head> فایل HTML، تلاش کنید CSS را روی HTML اعمال کنید:

1<link href="payment-form.css" rel="stylesheet">

سپس شروع به افزودن عنصر <form> بیرونی بکنید:

1<form>
2
3</form>

درون تگ‌های <from> یک عنوان و یک پاراگراف اضافه کنید تا به کاربران اطلاع دهید که فیلدهای الزامی چگونه علامت‌گذاری شده‌اند:

1<h1>Payment form</h1>
2
3<p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>

سپس یک بخش بزرگ‌تر از کد را به فرم و زیر مدخل قبلی اضافه می‌کنیم. در این کد می‌بینید که فیلدهای اطلاعات تماس را درون یک عنصر <section> جدا قرار داده‌ایم. به علاوه یک مجموعه از دو دکمه رادیویی داریم که هر کدام را درون عنصر لیست (<li>) خاص خود قرار داده‌ایم. در نهایت دو متن استاندارد <input> داریم که به عناصر برچسب ارتباط یافته‌اند. هر کدام از آن‌ها شامل یک <p> هستند و به علاوه ورودی رمز عبور برای وارد کردن رمز عبور نیز تدارک دیده شده است. این کد را به فرم خود اضافه کنید:

1<section>
2    <h2>Contact information</h2>
3    <fieldset>
4      <legend>Title</legend>
5      <ul>
6          <li>
7            <label for="title_1">
8              <input type="radio" id="title_1" name="title" value="M." >
9              Mister
10            </label>
11          </li>
12          <li>
13            <label for="title_2">
14              <input type="radio" id="title_2" name="title" value="Ms.">
15              Miss
16            </label>
17          </li>
18      </ul>
19    </fieldset>
20    <p>
21      <label for="name">
22        <span>Name: </span>
23        <strong><abbr title="required">*</abbr></strong>
24      </label>
25      <input type="text" id="name" name="username">
26    </p>
27    <p>
28      <label for="mail">
29        <span>E-mail: </span>
30        <strong><abbr title="required">*</abbr></strong>
31      </label>
32      <input type="email" id="mail" name="usermail">
33    </p>
34    <p>
35      <label for="pwd">
36        <span>Password: </span>
37        <strong><abbr title="required">*</abbr></strong>
38      </label>
39      <input type="password" id="pwd" name="password">
40    </p>
41</section>

اکنون به بررسی <section> دوم فرم خود می‌پردازیم که به اطلاعات پرداخت مربوط است. در این بخش سه ویجت متمایز داریم که هر کدام برچسبی دارند و هر یک درون یک تگ <p> قرار گرفته‌اند. تگ نخست یک منوی بازشدنی (<select>) است که برای انتخاب کردن نوع کارت اعتباری استفاده می‌شود. تگ دوم یک عنصر <input> از نوع عدد است که برای وارد کردن شماره کارت اعتباری استفاده می‌شود. عنصر آخر یک <input> از نوع date است که برای وارد کردن تاریخ انقضای کارت مورد استفاده قرار می‌گیرد. این تگ به همراه یک ویجت انتخاب تاریخ در مرورگرهایی که پشتیبانی می‌کنند عرضه می‌شود و در مرورگرهای غیر پشتیبانی‌کننده به حالت همان ورودی متنی ساده درمی‌آید. بدین ترتیب کد زیر را در ادامه کدهای قبلی وارد کنید:

1<section>
2    <h2>Payment information</h2>
3    <p>
4      <label for="card">
5        <span>Card type:</span>
6      </label>
7      <select id="card" name="usercard">
8        <option value="visa">Visa</option>
9        <option value="mc">Mastercard</option>
10        <option value="amex">American Express</option>
11      </select>
12    </p>
13    <p>
14      <label for="number">
15        <span>Card number:</span>
16        <strong><abbr title="required">*</abbr></strong>
17      </label>
18      <input type="number" id="number" name="cardnumber">
19    </p>
20    <p>
21      <label for="date">
22        <span>Expiration date:</span>
23        <strong><abbr title="required">*</abbr></strong>
24        <em>formatted as yyyy/mm/dd</em>
25      </label>
26      <input type="date" id="date" name="expiration">
27    </p>
28</section>

بخش آخر که اضافه خواهیم کرد بسیار ساده‌تر است و صرفاً شامل یک <button> از نوع submit است که برای تحویل فرم استفاده می‌شود. این دکمه را به فرم خود اضافه کنید:

1<p> <button type="submit">Validate the payment</button> </p>

فرم تکمیل‌شده را می‌توانید در ادامه ملاحظه کنید.

سخن پایانی

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

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

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

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
developer.mozilla
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *