طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

طراحی سایت و برنامه نویسی

آموزش طراحی سایت و برنامه نویسی

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

در بخش‌های قبلی این سری مقالات با مبانی کار با فرم‌های 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small">
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium">
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large">
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</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
2
3
<label for="name">
  Name: <input type="text" id="name" name="user_name">
</label>

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
 
<!-- So this: -->
<div>
  <label for="username">Name:</label>
  <input type="text" name="username">
  <label for="username"><abbr title="required">*</abbr></label>
</div>
 
<!-- would be better done like this: -->
<div>
  <label for="username">
    <span>Name:</span>
    <input id="username" type="text" name="username">
    <abbr title="required">*</abbr>
  </label>
</div>
 
<!-- But this is probably best: -->
<div>
  <label for="username">Name: <abbr title="required">*</abbr></label>
  <input id="username" type="text" name="username">
</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
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

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

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

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

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

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

1
2
3
<form>
 
</form>

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

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

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

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

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

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

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

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

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

سخن پایانی

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

منبع: فرادرس

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:36

0 نظر

فرم HTML — راهنمای جامع

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

قابلیت های پیشرفته جداول HTML — راهنمای کاربردی

پیش‌نیازها

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

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

فرم HTML چیست؟

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

یک فرم HTML از یک یا چند ویجت ساخته شده است. این ویجت‌ها می‌توانند فیلدهای متنی (تک‌خطی یا چندخطی)، کادرهای انتخاب، دکمه، کادرهای تیک، یا دکمه‌های رادیویی باشند. در اغلب موارد این ویجت‌ها همراه با یک برچسب ارائه می‌شوند که هدف آن‌ها را توضیح می‌دهد. برچسب‌هایی که به درستی پیاده‌سازی شده باشند، می‌توانند هم کاربران بینا و هم نابینا را در مسیر وارد کردن ورودی در فیلد راهنمایی کنند.

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

طراحی فرم HTML

پیش از شروع به کدنویسی همواره بهتر است که قبل از هر کاری اندکی تأمل کرده و در مورد طراحی فرم بیندیشید. طراحی کردن سریع یک سند «نشانه‌گذاری» (markup) به شما کمک خواهد کرد تا مجموعه صحیحی از داده‌هایی را که می‌خواهید از کاربر بپرسید تعریف کنید. از نقطه نظر تجربه کاربر (UX) مهم است که به خاطر داشته باشید هر چه فرم بزرگ‌تر باشد، ریسک از دست دادن کاربران بیشتر می‌شود. بنابراین فرم را تا حد امکان ساده و متمرکز حفظ کنید. بدین منظور باید صرفاً داده‌هایی را که مطلقاً ضروری هستند از کاربر بپرسید. طراحی فرم یکی از مراحل بسیار مهم ساخت یک وب‌سایت یا اپلیکیشن محسوب می‌شود. بررسی تجربه کاربری فرم‌ها فراتر از حیطه این مقاله است، اما پیشنهاد می‌کنیم موارد زیر را مطالعه کنید:

مجله Smashing مقالات خوبی در زمینه UX فرم‌ها دارد، اما شاید مهم‌ترین مقاله این (+) باشد که خواندنش را توصیه می‌کنیم.
UXMatters نیز منابع زیادی دارد که توصیه‌های مفیدی را شامل می‌شوند و از طراحی فرم‌های ساده تا دغدغه‌های پیچیده‌ای مانند فرم‌های چندصفحه‌ای را شامل می‌شود.

در این مقاله، می‌خواهیم یک فرم تماس ساده بسازیم. ابتدا یک طرح‌واره از آن رسم می‌کنیم:

فرم HTML

این فرم شامل سه فیلد متنی و یک دکمه خواهد بود. ما می‌خواهیم از کاربر سؤالاتی در مورد نام، ایمیل، و پیامی که می‌خواهید ارسال کند بپرسیم. با زدن دکمه ارسال، داده‌های کاربر به وب‌سرور ارسال می‌شوند.

پیاده‌سازی فرم HTML

اینک آماده هستیم که کد HTML فرم خود را بنویسیم. برای ساخت یک فرم تماس از این عناصر HTML استفاده می کنیم: <form> ،<label> ،<input> ،<textarea> و <button>.

پیش از آنکه جلوتر برویم، ابتدا کد قالب HTML ساده زیر را کپی کرده و روی سیستم خود در فایلی به نام index.html ذخیره کنید.

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

عنصر <form>

همه فرم‌های HTML با یک عنصر <form> به صورت زیر آغاز می‌شوند:

1
2
3
<form action="/my-handling-form-page" method="post">
 
</form>

این عنصر به طور رسمی یک فرم را تعریف می‌کند. در واقع این عنصر کانتینری برای عناصر دیگر از قبیل <div> یا <p> است، اما از برخی خصوصیت‌های ویژه برای پیکربندی رفتار فرم نیز پشتیبانی می‌کند. همه این خصوصیت‌ها اختیاری هستند، اما به عنوان رویه مناسب توصیه می‌شود که همواره دست کم خصوصیت action و خصوصیت method تعیین شده باشند.

خصوصیت action مکان (URL)-ی را که داده‌های گرداوری شده فرم در زمان تحویل شدن، باید ارسال شوند مشخص می‌سازند.
خصوصیت method تعریف می‌کند که کدام متد HTTP باید برای ارسال داده‌ها مورد استفاده قرار گیرد. این متد می‌تواند get یا post باشد.

در حال حاضر، عنصر <form> فوق را به بدنه HTML خود اضافه می‌کنیم.

عناصر <label> ،<input> و <textarea>

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

برحسب کدهای HTML باید کدی مانند زیر داشته باشیم که این ویجت‌های فرم را پیاده‌سازی کند:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_mail">
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
</form>

کد فرم خود را به نحوی به‌روزرسانی کنید که به صورت فوق دربیاید.

عناصر <div> به آن دسته از عناصر گفته می‌شود که برای ساختاردهی آسان‌تر کد و استایل‌دهی سریع‌تر مورد استفاده قرار می‌گیرند. توجه داشته باید که برای همه عناصر <label> باید از خصوصیت for استفاده کنید چون این یک روش رسمی برای ایجاد ارتباط با یک ویجت فرم است. این خصوصیتِ id ویجت متناظر است. انجام این کار مزیت‌هایی دارد، بدیهی‌ترین مزیت آن است که به کاربر امکان کلیک کردن روی برچسب جهت فعالسازی ویجت متناظر را می‌دهد. در مورد مزیت‌های دیگر این خصوصیت در بخش‌های بعدی این سری مقالات بیشتر صحبت خواهیم کرد.

در مورد عنصر <input>، مهم‌ترین خصوصیت type است. این خصوصیت بسیار مهم است، زیرا روش رفتار عنصر <input> را مشخص می‌سازد. در بخش‌های بعدی این سری مقالات در مورد این موضوع نیز بیشتر صحبت خواهیم کرد.

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

در انتها توجه داشته باشید که <input> با <textarea></textarea> متفاوت است. این نیز یکی از عجایب HTML است. تگ <input> یک عنصر خالی است یعنی به تگ بستن نیاز ندارد. به طور عکس <textarea> یک عنصر خالی نیست و از این رو باید تگ بستن مناسب را نیز بیاورید. این مسئله روی برخی قابلیت‌های خاص فرم‌های HTML مثلاً روش تعریف مقدار پیش‌فرض تأثیر دارد. برای تعریف مقدار پیش‌فرض یک عنصر <input> باید از خصوصیت value مانند زیر استفاده کنید:

1
<input type="text" value="by default this element is filled with this text" />

به طور عکس، اگر می‌خواهید مقدار پیش‌فرض یک <textarea> را تعریف کنید، کافی است مقدار پیش‌فرض را بین تگ‌های باز و بسته عنصر <textarea> به صورت زیر قرار دهید:

1
<textarea>by default this element is filled with this text</textarea>

عنصر <button>

فرم ما اینک تقریباً آماده است، کافی است یک دکمه به آن اضافه کنیم تا کاربر بتواند داده‌هایی را که در فرم وارد کرده است به ما ارسال کند. این کار به سادگی با استفاده از عنصر <button> صورت می‌گیرد. بنابراین کد زیر را درست بالاتر از تگ </form> وارد کنید:

1
2
3
<div class="button">
  <button type="submit">Send your message</button>
</div>

بدین ترتیب خواهید دید که عنصر <button> نیز یک خصوصیت type می‌پذیرد. این خصوصیت سه مقدار متفاوت به صورت submit reset یا button می‌گیرد.

با کلیک روی دکمه submit (مقدار پیش‌فرض)، داده‌های فرم به صفحه وب تعریف‌شده‌ای سوی خصوصیت action در عنصر <form> ارسال می‌شود.
با کلیک روی دکمه reset همه ویجت‌های فرم بی‌درنگ به مقدار پیش‌فرض ریست می‌شوند. از نقطه نظر UX این رویه بدی محسوب می‌شود.
با کلیک روی دکمه button هیچ اتفاقی نمی‌افتد، گرچه این وضعیت احمقانه به نظر می‌رسد، اما در زمان ساخت دکمه‌های سفارشی با جاوا اسکریپت کاملاً مفید خواهد بود.

نکته: شما می‌توانید از عنصر <input> با type متناظر جهت تولید دکمه نیز استفاده کنید. برای نمونه بنویسید: <input type=”submit”>. مزیت اصلی عنصر <button> این است که عنصر <input> تنها مقدار متنی ساده را مانند یک برچسب می‌پذیرد در حالی که عنصر <button> امکان درج HTML را دارد و می‌توان متن‌های خلاقانه و پیچیده‌تری را نوشت.

استایل‌دهی ابتدایی فرم

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

فرم HTML

اگر فکر می‌کنید در جایی اشتباه کرده‌اید می‌توانید کدی را که نوشته‌اید با کد کامل شده زیر مقایسه کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Your first HTML form</title>
</head>
 
<body>
    <form action="/my-handling-form-page" method="post">
        <div>
          <label for="name">Name:</label> <input type="text" id="name" name="user_name">
        </div>
        <div>
          <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_mail">
        </div>
        <div>
          <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea>
        </div>
        <div class="button">
          <button type="submit">Send your message</button>
        </div>
    </form>
</body>
 
</html>

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

قبل از هر چیز، یک عنصر <style> به صفحه خود اضافه کنید. این کار در بخش head سند HTML انجام می‌یابد و به صورت زیر خواهد بود:

1
2
3
<style>
 
</style>

درون تگ‌های style کد CSS زیر را وارد کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
form {
  /* Just to center the form on the page */
  margin: 0 auto;
  width: 400px;
  /* To see the outline of the form */
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}
 
form div + div {
  margin-top: 1em;
}
 
label {
  /* To make sure that all labels have the same size and are properly aligned */
  display: inline-block;
  width: 90px;
  text-align: right;
}
 
input, textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;
 
  /* To give the same size to all text fields */
  width: 300px;
  box-sizing: border-box;
 
  /* To harmonize the look & feel of text field border */
  border: 1px solid #999;
}
 
input:focus, textarea:focus {
  /* To give a little highlight on active elements */
  border-color: #000;
}
 
textarea {
  /* To properly align multiline text fields with their labels */
  vertical-align: top;
 
  /* To give enough room to type some text */
  height: 5em;
}
 
.button {
  /* To position the buttons to the same position of the text fields */
  padding-left: 90px; /* same size as the label elements */
}
 
button {
  /* This extra margin represent roughly the same space as the space
     between the labels and their text fields */
  margin-left: .5em;
}

اینک فرم ما به صورت زیر در آمده است و از زشتی آن کاسته شده:

فرم HTML

در ادامه فایل کامل شده این صفحه را مشاهده می‌کنید:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>Your first HTML form, styled</title>
    <style>
      form {
        /* Just to center the form on the page */
        margin: 0 auto;
        width: 400px;
        /* To see the outline of the form */
        padding: 1em;
        border: 1px solid #CCC;
        border-radius: 1em;
      }
      form div + div {
        margin-top: 1em;
      }
      label {
        /* To make sure that all labels have the same size and are properly aligned */
        display: inline-block;
        width: 90px;
        text-align: right;
      }
      input, textarea {
        /* To make sure that all text fields have the same font settings By default, textareas have a monospace font */
        font: 1em sans-serif;
        /* To give the same size to all text fields */
        width: 300px;
        box-sizing: border-box; /* To harmonize the look & feel of text field border */
        border: 1px solid #999;
      }
      input:focus, textarea:focus {
        /* To give a little highlight on active elements */
        border-color: #000;
      }
      textarea {
        /* To properly align multiline text fields with their labels */
        vertical-align: top;
        /* To give enough room to type some text */
        height: 5em;
      }
      .button {
        /* To position the buttons to the same position of the text fields */
        padding-left: 90px;
        /* same size as the label elements */
      }
      button {
        /* This extra margin represent roughly the same space as the space between the labels and their text fields */
        margin-left: .5em;
      }
    </style>
</head>
 
<body>
    <form action="/my-handling-form-page" method="post">
        <div>
          <label for="name">Name:</label> <input type="text" id="name" name="user_name">
        </div>
        <div>
          <label for="mail">E-mail:</label> <input type="email" id="mail" name="user_mail">
        </div>
        <div>
          <label for="msg">Message:</label> <textarea id="msg" name="user_message"></textarea>
        </div>
        <div class="button">
          <button type="submit">Send your message</button>
        </div>
    </form>
</body>
 
</html>

ارسال داده‌های فرم به وب‌ سرور

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

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

برای نامگذاری داده‌ها در یک فرم، باید از خصوصیت name روی هر یک از ویجت‌هایی که اقدام به گردآوری داده‌ها می‌کنند استفاده کنیم. یک بار دیگر بخشی از کد فرم را بررسی می‌کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form action="/my-handling-form-page" method="post"> 
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name" />
  <div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </div>
 
  ...

در مثال فوق، فرم 3 بخش از داده را با نام‌های user_name، user_email و user_message ارسال می‌کند. داده‌ها به یک URL به صورت my-handling-form-page/ و با استفاده از متد POST در HTTP ارسال می‌شوند.

در سمت سرور اسکریپت در URL به نام /my-handling-form-page داده‌ها را به صورت لیستی از 3 آیتم کلید/مقدار دریافت می‌کند که در درخواست HTTP جاسازی شده‌اند. روش مدیریت داده‌ها از سوی اسکریپت بر عهده شما است. هر زبان سمت سرور مانند PHP، پایتون، روبی، جاوا، سی شارپ و غیره به این منظور سازوکار خاص خود را دارند. بررسی دقیق این موضوع خارج از حوصله این مقاله است.

سخن پایانی

اینک شما موفق شده‌اید نخستین فرم HTML خود را بسازید که به صورت زیر نمایش می‌یابد:

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

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

منبع: فرادرس

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:35

0 نظر

آموزش ساخت یک اپلیکیشن آیفون (بخش هشتم) — به زبان ساده

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

آموزش ساخت یک اپلیکیشن آیفون (بخش هفتم) — به زبان ساده

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

برای تنظیم فریمورک به گیت اعلام می‌کنیم که آن را از ریپازیتوری مربوطه روی اینترنت به صورت محلی برای ما کلون کند.

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

ماژول فرعی، پروژه و فریمورک

در انتهای این راهنما، تغییرها را با استفاده از سیستم کنترل نسخه Git کامیت می‌کنیم. پروژه ما در ریپازیتوری مربوط به خود قرار دارد. گیت از طریق استفاده از «ماژول‌های فرعی» (Submodules) ریپازیتوری‌های دیگر در پروژه اصلی، برخی تسهیلات دیگر را نیز در اختیار ما قرار می‌دهد تا تاریخچه نسخه برای هر کدام به صورت جداگانه مدیریت می‌شود.

ما قصد داریم فریمورک BFWControls را به پروژه خود اضافه کنیم. این کار نیازمند سه گام زیر است:

ریپازیتوری BFWControls را به عنوان یک ماژول فرعی به ریپازیتوری گیت خود اضافه کنید.
فایل پروژه مربوط به BFWControls را به پروژه اصلی Xcode اضافه کنید.
BFWControls.framework را به فازهای build پروژه اضافه کنید.

افزودن یک گروه/پوشه به Xcode

در Xocde روی فایل پروژه آبی‌رنگ در ابتدای بخش ناوبری پروژه Control+Click کنید. گزینه New Group را از منوی بازشدنی انتخاب کنید.

Xcode یک گروه جدید (یک آیکون پوشه زردرنگ) با نام New Group ایجاد می‌کند. یک بار روی نام کلیک کنید تا name را به حالت ویرایش درآورد.

این نام را به Submodules تغییر دهید. گروه Submodules را به سمت پایین بکشید و تا قبل از گروه Submodules بیاورید.

مواظب باشید که آن را درون گروه دیگری نکشید، اما اگر چنین اتفاقی افتاد، می‌توانید آن را دوباره به مکان صحیح درگ کنید. روی گروه جدید Submodules همراه با فشردن کلید Control کلیک کنید و گزینه Show in Finder را در منوی بازشدنی انتخاب کنید.

ترمینال

اپلیکیشن Terminal را روی مک باز کنید. آن را می‌توانید در پوشه Applications بیابید. در ترمینال ابتدا باید دایرکتوری را عوض کنیم و به پوشه جدید Submodules برویم. بدین منظور در پنجره ترمینال، دستور cd را وارد کنید و یک فاصله بدهید:

اینک باید مسیر پوشه Submodules را بدانیم. به جای وارد کردن آن کافی است پوشه Submodules را از Finder به پنجره ترمینال کشیده و رها کنید.

بدین ترتیب مسیر پوشه در ترمینال ظاهر می‌شود.

دکمه Return را بزنید تا به ترمینال اعلام کنید که دستور را اجرا کند.

افزودن یک ماژول فرعی

ما باید یک دستور دیگر در ترمینال وارد کنیم تا به گیت اعلام کنیم که ماژول فرعی BFWControls را به این پوشه اضافه کند. به این منظور باید URL مربوط به ریپازیتوری BFWControls را بدانیم. از مرورگر وب استفاده کنید تا به دنبال BFWControls بگردید. دو نتیجه اول معمولاً وب‌سایت‌های github.com و bitbucket.org هستند.

این سایت‌ها ریپازیتوری‌هایی برای استفاده عمومی و خصوصی میزبانی می‌کنند. BFWControls یک ریپازیتوری عمومی و متن‌باز است یعنی هر کسی می‌تواند از آن استفاده کند و حتی کدهایی برای بهبود آن بنویسید و با درخواست pull کد مربوط به تغییراتی که ایجاد کرده است را در پروژه ادغام کند.

روی لینک گیت‌هاب کلیک کنید. بدین ترتیب به صفحه گیت‌هاب BFWControls می‌روید که شامل لینک‌هایی برای کامیت‎ها، فایل‌ها و موارد دیگر است. ما با هیچ‌کدام این‌ها کاری نداریم. تنها چیزی که نیاز داریم لینک این ریپازیتوری است.

در سمت راست روی دکمه Clone or Download کلیک کنید، بدین ترتیب URL-ی نمایش پیدا می‌کند که شامل لینک به ریپازیتوری است. در سمت راست متن لینک، یک دکمه برای کپی کردن آن وجود دارد. روی دکمه کلیک کنید. البته می‌توانید متن لینک را به صورت دستی نیز انتخاب و کپی کنید:

به ترمینال بازگردید و در ابتدای دستور خود عبارت‌های زیر را وارد کنید:

git submodule add

مطمئن شوید که پس از آخرین کلمه یک فاصله وجود دارد و سپس گزینه Paste را از منوی Edit انتخاب کنید تا دستور تکمیل شود.

فریمورک

دکمه Return را بزنید. گیت اقدام به کلون کردن ریپازیتوری در پوشه Submodules که ایجاد کرده‌ایم می‌کند.

فریمورک

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

افزودن فایل پروژه

نگاهی به پوشه Submodules در Finder داشته‌ باشید. این پوشه هم اکنون یک پوشه دیگر به نام BFWControls نیز دارد. آن را باز کنید تا فایل BFWControls.xcodeproj را ببینید. این فایل پروژه است و باید به پروژه Xcode اضافه شود.

فریمورک

فایل BFWControls.xcodeproj را از Finder دوباره به Xcode و گروه Submodules بکشید.

فریمورک

فایل BFWControls.xcodeproj اینک باید در پروژه Xcode نمایش یافته باشد.

فریمورک

افزودن یک فریمورک

اکنون ما پروژه BFWControls Xcode را به پروژه خود اضافه کرده‌ایم. پروژه BFWControls یک framework برای ما ایجاد می‌کند که می‌تواند از سوی اپلیکیشن‌های دیگر مانند اپلیکیشن ما مورد استفاده قرار گیرد. اکنون کافی است به پروژه اعلام کنیم که از این فریمورک استفاده کند.

یک بار روی آیکون آبی پروژه در Project Navigator کلیک کنید. مطمئن شوید که آیکون اپلیکیشن زیر برگه Targets و General انتخاب شده است.

فریمورک

پنل بزرگ میانی را اسکرول کنید تا به بخش Embedded Binaries برسید. روی دکمه + زیر آن کلیک کنید.

فریمورک

در لیستی که نمایان می‌شود، گزینه فوقانی BFWControls.framework را انتخاب کنید. دقت کنید گزینه BFWControls Demo.app را انتخاب نکنید.

روی دکمه Add کلیک کنید؛ Xcode در این مرحله BFWControls.framework را به Embedded Binaries و Linked Frameworks اضافه می‌کند.

فریمورک

اپلیکیشن را اجرا کرده و بررسی کنید که آیا همه بیلدها و اجراها مانند قبل هستند یا نه. احتمالاً متوجه خواهید شد که زمان build اولیه طولانی‌تر شده است، چون کد BFWControls نیز ساخته می‌شود.

البته با باز کردن اپلیکیشن هنوز از فریمورک استفاده نکرده‌اید، اما در ادامه قصد انجام این کار را داریم.

کامیت کردن تغییرات

همانند بخش‌های قبلی در انتهای مقاله تغییرهایی را که در پروژه ایجاد کرده‌ایم، کامیت می‌کنیم تا ذخیره شوند. به این منظور:

گزینه Commit Changes را از Source Control انتخاب کنید.
یک توضیح مانند زیر وارد کنید:
Added BFWControls submodule and framework
روی دکمه Commit کلیک کنید.

نکته: فایل‌های تغییر یافته روی رایانه شما ممکن است کمی متفاوت باشند.

فریمورک

سخن پایانی

اپلیکیشن ما هم اینک ماژول فرعی BFWControls را دارد که در Git یکپارچه شده است و BFWControls.framework حاصل نیز با استفاده از Xcode در اپلیکیشن ما ادغام شده است. ما در بخش قبلی (هفتم) یک طرح‌بندی برای سلول نمای جدولی در یک فایل جدید به نام NewsTableViewCell ساختیم در بخش بعدی (نهم) از BFWControls.framework برای بارگذاری طرح‌بندی سلول سفارشی در استوری‌بورد استفاده خواهیم کرد. برای مطالعه بخش بعدی به لینک زیر رجوع کنید:

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:34

0 نظر

گزاره goto در ++C — به زبان ساده

در زبان برنامه‌نویسی ++C از گزاره goto برای ایجاد تغییر در ترتیب نرمال اجرای برنامه و انتقال کنترل از یک بخش به بخش دیگر برنامه استفاده می‌شود. در این نوشته به توضیح این ساختار می‌پردازیم. همچنین در بخش قبلی این سری مقالات آموزش برنامه‌نویسی ++C با گزاره سوئیچ آشنا شدیم. برای مطالعه بخش قبلی به لینک زیر مراجعه کنید:

گزاره switch..case در ++C — راهنمای کاربردی

ساختار گزاره goto

ساختار کلی این گزاره به صورت زیر است:

goto label;
... .. ...
... .. ...
... .. ...
label:
statement;
... .. ...

در ساختار فوق، abel یک شناسه است. وقتی که برنامه با ;goto label مواجه می‌شود، کنترل برنامه به :label پرش یافته و ادامه کد از آنجا اجرا می‌شود.

goto

مثال برای گزاره goto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// This program calculates the average of numbers entered by user.
// If user enters negative number, it ignores the number and 
// calculates the average of number entered before it.
 
# include <iostream>
using namespace std;
 
int main()
{
    float num, average, sum = 0.0;
    int i, n;
 
    cout << "Maximum number of inputs: ";
    cin >> n;
 
    for(i = 1; i <= n; ++i)
    {
        cout << "Enter n" << i << ": ";
        cin >> num;
        
        if(num < 0.0)
        {
           // Control of the program move to jump:
            goto jump;
        } 
        sum += num;
    }
    
jump:
    average = sum / (i - 1);
    cout << "\nAverage = " << average;
    return 0;
}

خروجی

Maximum number of inputs: 10
Enter n1: 2.3
Enter n2: 5.6
Enter n3: -5.6

Average = 3.95

شما می‌توانید هر برنامه ++C را بدون استفاده از گزاره goto بنویسید و عدم استفاده از این گزاره نیز عموماً ایده خوبی تلقی می‌شود.

چرا نباید از گزاره goto استفاده کنیم؟

گزاره goto قدرت پرش از هر نقطه برنامه به نقاط دیگر را در اختیار ما قرار می‌دهد، اما منطق چنین برنامه‌ای پیچیده و تودرتو خواهد بود. در برنامه‌نویسی مدرن، گزاره goto یک سازه آسیب‌رسان نگریسته می‌شود و رویه برنامه‌نویسی بدی است. به جای گزاره goto می‌توان ازگزاره‌های break و continue در ++C استفاده کرد. برای مطالعه بخش بعدی این سری مقالات به لینک زیر مراجعه کنید:

تابع های ++C — به زبان ساده
منبع: فرادرس

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:33

0 نظر

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد — به زبان ساده

انواع گوناگونی از مسائل رنگ‌آمیزی گراف وجود دارد که مساله رنگ کردن راس‌های گراف، یکی از محبوب‌ترین و متداول‌ترین آن‌ها به شمار می‌آید. در این مساله، یک گراف غیر مستقیم و عدد m داده شده است. هدف رنگ کردن راس‌های گراف به صورتی است که هیچ دو راس مجاوری، دارای رنگ مشابه نباشند. m تعداد رنگ‌های داده شده است. باید توجه داشت که در اینجا منظور از رنگ‌آمیزی، تخصیص رنگ به راس‌های گراف است. برای حل مساله رنگ آمیزی گراف، الگوریتم‌های گوناگونی ارائه شده که «الگوریتم پس گرد» (Backtracking) و «حریصانه» (Greedy) از این جمله هستند. در این مطلب، هدف حل مساله رنگ آمیزی گراف با الگوریتم پس گرد است.

تعریف مساله

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

ورودی:

یک آرایه دو بعدی، یعنی گراف [graph[V][V که در آن، V تعداد یال‌ها در گراف را مشخص می‌کند و [graph[V][V نمایش ماتریس همسایگی گراف است. مقدار [graph[i][j در صورتی که یک یال مستقیم از i به j وجود داشته باشد برابر با یک، و در غیر این صورت، مقدار [graph[i][j برابر با ۰ است.
عدد صحیح m، تعداد کل رنگ‌هایی است که می‌توان از آن‌ها استفاده کرد.

خروجی:

آرایه [color[V که باید حاوی اعدادی از ۱ تا m باشد. [color[i باید رنگ تخصیص یافته به i‌اُمین راس را نشان دهد. همچنین، در صورتی که نمی‌توان گراف را با m رنگ طبق شرط موجود رنگ‌آمیزی کرد، کد باید مقدار False را بازگرداند. در ادامه، تصویری از یک گراف داده شده که با m=3 رنگ (سفید، سبز، قرمز) رنگ‌آمیزی شده است.

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد

الگوریتم ساده

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

while there are untried conflagrations
{
generate the next configuration
if no adjacent vertices are colored with same color
{
print this configuration;
}
}

به تعداد Vm پیکربندی مختلف از رنگ‌ها وجود دارد.

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد

ایده اساسی آن است که رنگ‌ها یکی یکی به راس‌های مختلف اختصاص پیدا کنند. این کار با شروع از راس صفر (۰) آغاز می‌شود. پیش از تخصیص رنگ، امکان‌پذیری تخصیص رنگ بر اساس شرط داده شده بررسی می‌شود. این کار، با در نظر گرفتن رنگ‌هایی که در حال حاضر به راس‌های همسایه تخصیص پیدا کرده‌اند، صورت می‌پذیرد. اگر الگوریتم تشخیص دهد که تخصیص یک رنگ مشخص در شرط داده شده صدق می‌کند، تخصیص رنگ به عنوان بخشی از راهکار انجام می‌شود. اگر رنگی برای یک راس مشخص پیدا نشود که در شرط مذکور صدق کند، پس‌گرد انجام و پیغام خطای False صادر می‌شود.

کد راه حل مساله رنگ آمیزی گراف در ++C/C

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
#include<stdio.h> 
#include<stdbool.h> 
  
// Number of vertices in the graph 
#define V 4 
  
void printSolution(int color[]); 
  
/* A utility function to check if the current color assignment 
is safe for vertex v i.e. checks whether the edge exists or not 
(i.e, graph[v][i]==1). If exist then checks whether the color to  
be filled in the new vertex(c is sent in the parameter) is already 
used by its adjacent vertices(i-->adj vertices) or not (i.e, color[i]==c) */
bool isSafe (int v, bool graph[V][V], int color[], int c) 
{ 
    for (int i = 0; i < V; i++) 
        if (graph[v][i] && c == color[i]) 
            return false; 
    return true; 
} 
  
/* A recursive utility function to solve m coloring problem */
bool graphColoringUtil(bool graph[V][V], int m, int color[], int v) 
{ 
    /* base case: If all vertices are assigned a color then 
       return true */
    if (v == V) 
        return true; 
  
    /* Consider this vertex v and try different colors */
    for (int c = 1; c <= m; c++) 
    { 
        /* Check if assignment of color c to v is fine*/
        if (isSafe(v, graph, color, c)) 
        { 
           color[v] = c; 
  
           /* recur to assign colors to rest of the vertices */
           if (graphColoringUtil (graph, m, color, v+1) == true) 
             return true; 
  
            /* If assigning color c doesn't lead to a solution 
               then remove it */
           color[v] = 0; 
        } 
    } 
  
    /* If no color can be assigned to this vertex then return false */
    return false; 
} 
  
/* This function solves the m Coloring problem using Backtracking. 
  It mainly uses graphColoringUtil() to solve the problem. It returns 
  false if the m colors cannot be assigned, otherwise return true and 
  prints assignments of colors to all vertices. Please note that there 
  may be more than one solutions, this function prints one of the 
  feasible solutions.*/
bool graphColoring(bool graph[V][V], int m) 
{ 
    // Initialize all color values as 0. This initialization is needed 
    // correct functioning of isSafe() 
    int color[V]; 
    for (int i = 0; i < V; i++) 
       color[i] = 0; 
  
    // Call graphColoringUtil() for vertex 0 
    if (graphColoringUtil(graph, m, color, 0) == false) 
    { 
      printf("Solution does not exist"); 
      return false; 
    } 
  
    // Print the solution 
    printSolution(color); 
    return true; 
} 
  
/* A utility function to print solution */
void printSolution(int color[]) 
{ 
    printf("Solution Exists:"
            " Following are the assigned colors \n"); 
    for (int i = 0; i < V; i++) 
      printf(" %d ", color[i]); 
    printf("\n"); 
} 
  
// driver program to test above function 
int main() 
{ 
    /* Create following graph and test whether it is 3 colorable 
      (3)---(2) 
       |   / | 
       |  /  | 
       | /   | 
      (0)---(1) 
    */
    bool graph[V][V] = {{0, 1, 1, 1}, 
        {1, 0, 1, 0}, 
        {1, 1, 0, 1}, 
        {1, 0, 1, 0}, 
    }; 
    int m = 3; // Number of colors 
    graphColoring (graph, m); 
    return 0; 
} 

کد راه حل مساله رنگ آمیزی گراف در جاوا

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/* Java program for solution of M Coloring problem 
   using backtracking */
public class mColoringProblem { 
    final int V = 4; 
    int color[]; 
  
    /* A utility function to check if the current 
       color assignment is safe for vertex v */
    boolean isSafe(int v, int graph[][], int color[], 
                   int c) 
    { 
        for (int i = 0; i < V; i++) 
            if (graph[v][i] == 1 && c == color[i]) 
                return false; 
        return true; 
    } 
  
    /* A recursive utility function to solve m 
       coloring  problem */
    boolean graphColoringUtil(int graph[][], int m, 
                              int color[], int v) 
    { 
        /* base case: If all vertices are assigned 
           a color then return true */
        if (v == V) 
            return true; 
  
        /* Consider this vertex v and try different 
           colors */
        for (int c = 1; c <= m; c++) 
        { 
            /* Check if assignment of color c to v 
               is fine*/
            if (isSafe(v, graph, color, c)) 
            { 
                color[v] = c; 
  
                /* recur to assign colors to rest 
                   of the vertices */
                if (graphColoringUtil(graph, m, 
                                      color, v + 1)) 
                    return true; 
  
                /* If assigning color c doesn't lead 
                   to a solution then remove it */
                color[v] = 0; 
            } 
        } 
  
        /* If no color can be assigned to this vertex 
           then return false */
        return false; 
    } 
  
    /* This function solves the m Coloring problem using 
       Backtracking. It mainly uses graphColoringUtil() 
       to solve the problem. It returns false if the m 
       colors cannot be assigned, otherwise return true 
       and  prints assignments of colors to all vertices. 
       Please note that there  may be more than one 
       solutions, this function prints one of the 
       feasible solutions.*/
    boolean graphColoring(int graph[][], int m) 
    { 
        // Initialize all color values as 0. This 
        // initialization is needed correct functioning 
        // of isSafe() 
        color = new int[V]; 
        for (int i = 0; i < V; i++) 
            color[i] = 0; 
  
        // Call graphColoringUtil() for vertex 0 
        if (!graphColoringUtil(graph, m, color, 0)) 
        { 
            System.out.println("Solution does not exist"); 
            return false; 
        } 
  
        // Print the solution 
        printSolution(color); 
        return true; 
    } 
  
    /* A utility function to print solution */
    void printSolution(int color[]) 
    { 
        System.out.println("Solution Exists: Following" + 
                           " are the assigned colors"); 
        for (int i = 0; i < V; i++) 
            System.out.print(" " + color[i] + " "); 
        System.out.println(); 
    } 
  
    // driver program to test above function 
    public static void main(String args[]) 
    { 
        mColoringProblem Coloring = new mColoringProblem(); 
        /* Create following graph and test whether it is 
           3 colorable 
          (3)---(2) 
           |   / | 
           |  /  | 
           | /   | 
          (0)---(1) 
        */
        int graph[][] = {{0, 1, 1, 1}, 
            {1, 0, 1, 0}, 
            {1, 1, 0, 1}, 
            {1, 0, 1, 0}, 
        }; 
        int m = 3; // Number of colors 
        Coloring.graphColoring(graph, m); 
    } 
} 
// This code is contributed by Abhishek Shankhadhar 

کد راه حل مساله رنگ آمیزی گراف در پایتون

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
# Python program for solution of M Coloring  
# problem using backtracking 
  
class Graph(): 
  
    def __init__(self, vertices): 
        self.V = vertices 
        self.graph = [[0 for column in range(vertices)]\ 
                              for row in range(vertices)] 
  
    # A utility function to check if the current color assignment 
    # is safe for vertex v 
    def isSafe(self, v, colour, c): 
        for i in range(self.V): 
            if self.graph[v][i] == 1 and colour[i] == c: 
                return False
        return True
      
    # A recursive utility function to solve m 
    # coloring  problem 
    def graphColourUtil(self, m, colour, v): 
        if v == self.V: 
            return True
  
        for c in range(1, m+1): 
            if self.isSafe(v, colour, c) == True: 
                colour[v] = c 
                if self.graphColourUtil(m, colour, v+1) == True: 
                    return True
                colour[v] = 0
  
    def graphColouring(self, m): 
        colour = [0] * self.V 
        if self.graphColourUtil(m, colour, 0) == False: 
            return False
  
        # Print the solution 
        print "Solution exist and Following are the assigned colours:"
        for c in colour: 
            print c, 
        return True
  
# Driver Code 
g  = Graph(4) 
g.graph = [[0,1,1,1], [1,0,1,0], [1,1,0,1], [1,0,1,0]] 
m=3
g.graphColouring(m) 
  
# This code is contributed by Divyanshu Mehta 

خروجی

Solution Exists: Following are the assigned colors
1 2 3 2

منبع: فردارس

مشاوره چهارشنبه 26 تیر 1398 ساعت 15:33

0 نظر

140
1
...
12
13
صفحه 14
15
16
...
28

طراحی سایت و برنامه نویسی

ابر برجسب

جدیدترین یادداشت‌ها

بایگانی

جستجو

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

پیش‌نیازها

عنصر <form>

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

عنصر <label>

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

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

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

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

سخن پایانی

فرم HTML — راهنمای جامع

پیش‌نیازها

فرم HTML چیست؟

طراحی فرم HTML

پیاده‌سازی فرم HTML

عنصر <form>

عناصر <label> ،<input> و <textarea>

عنصر <button>

استایل‌دهی ابتدایی فرم

ارسال داده‌های فرم به وب‌ سرور

سخن پایانی

آموزش ساخت یک اپلیکیشن آیفون (بخش هشتم) — به زبان ساده

ماژول فرعی، پروژه و فریمورک

افزودن یک گروه/پوشه به Xcode

ترمینال

افزودن یک ماژول فرعی

افزودن فایل پروژه

افزودن یک فریمورک

کامیت کردن تغییرات

سخن پایانی

گزاره goto در ++C — به زبان ساده

ساختار گزاره goto

مثال برای گزاره goto

خروجی

چرا نباید از گزاره goto استفاده کنیم؟

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد — به زبان ساده

تعریف مساله

الگوریتم ساده

حل مساله رنگ آمیزی گراف با الگوریتم پس گرد

کد راه حل مساله رنگ آمیزی گراف در ++C/C

کد راه حل مساله رنگ آمیزی گراف در جاوا

کد راه حل مساله رنگ آمیزی گراف در پایتون

خروجی