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

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

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

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

ساخت برنامه حل سودوکو در جاوا — از صفر تا صد

در این مقاله قصد داریم به بررسی یک برنامه حل سودوکو و الگوریتم‌های مورد استفاده از سوی آن بپردازیم. سپس این راه‌حل‌ها را در جاوا پیاده‌سازی می‌کنیم. نخستین راه‌حل یک حمله «تهاجم کور» (brute-force) است. راه‌حل دوم استفاده از تکنیک «لینک‌های رقصان» (Dancing Links) است. توجه داشته باشید که در این مقاله، نقطه توجه ما روی الگوریتم‌ها است و طراحی برنامه‌نویسی شیءگرا چندان موضوع توجه نیست.

معمای سودوکو

سودوکو به بیان ساده یک معمای ترکیبی جایگشت اعداد با شبکه‌ای از سلول‌های 9 × 9 است که بخشی از آن با اعدادی از 1 تا 9 پر شده است. هدف این است که سلول‌های خالیِ باقیمانده را با بقیه اعداد طوری پر کنیم که هر ردیف و هر ستون تنها یک رقم از هر نوع داشته باشد. علاوه بر آن هر زیر بخش 3 × 3 نیز شبکه مستقلی است که نباید رقم تکراری در آن باشد. سطح دشواری سودوکو به طور طبیعی با افزایش تعداد سلول‌های خالی افزایش می‌یابد.

تخته تست

برای این که راه‌حل خود را جالب‌تر کرده و الگوریتم را اعتبارسنجی کنیم از یک تخته به نام «دشوارترین سودوکوی دنیا» استفاده می‌کنیم که به صورت زیر است:

1
2
3
4
5
6
7
8
9
8 . . . . . . . . 
. . 3 6 . . . . . 
. 7 . . 9 . 2 . . 
. 5 . . . 7 . . . 
. . . . 4 5 7 . . 
. . . 1 . . . 3 . 
. . 1 . . . . 6 8
. . 8 5 . . . 1 . 
. 9 . . . . 4 . .

تخته حل‌ شده

برای این که راه‌حل را نیز به سرعت افشا کرده باشیم، باید بیان کنیم که معمای به درستی حل‌ شده نتیجه زیر را به دست می‌دهد:

1
2
3
4
5
6
7
8
9
8 1 2 7 5 3 6 4 9 
9 4 3 6 8 2 1 7 5 
6 7 5 4 9 1 2 8 3 
1 5 4 2 3 7 8 9 6 
3 6 9 8 4 5 7 2 1 
2 8 7 1 6 9 5 3 4 
5 2 1 9 7 4 3 6 8 
4 3 8 5 2 6 9 1 7 
7 9 6 3 1 8 4 5 2

الگوریتم پس‌گرد

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

مقدمه

الگوریتم «پس‌گرد» (Backtracking) تلاش می‌کند که معما را از طریق تست کردن همه سلول‌ها برای یک راه‌حل معتبر حل کند. اگر هیچ کدام از قیدهای مسئله نقض نشود، الگوریتم به سلول بعدی می‌رود و آن را با راه‌حل‌های ممکن پر کرده و همه بررسی‌ها را تکرار می‌کند.

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

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

راه‌حل

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

1
2
3
4
5
6
7
8
9
10
11
int[][] board = {
  { 8, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 3, 6, 0, 0, 0, 0, 0 },
  { 0, 7, 0, 0, 9, 0, 2, 0, 0 },
  { 0, 5, 0, 0, 0, 7, 0, 0, 0 },
  { 0, 0, 0, 0, 4, 5, 7, 0, 0 },
  { 0, 0, 0, 1, 0, 0, 0, 3, 0 },
  { 0, 0, 1, 0, 0, 0, 0, 6, 8 },
  { 0, 0, 8, 5, 0, 0, 0, 1, 0 },
  { 0, 9, 0, 0, 0, 0, 4, 0, 0 } 
};

در ادامه متد ()solve را ایجاد می‌کنیم که board را به عنوان پارامتر ورودی می‌گیرد و روی ردیف‌ها و ستون‌ها حلقه‌ای تعریف می‌کند و مقادیر مختلف را برای یافتن راه‌حل معتبر تست می‌کند.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private boolean solve(int[][] board) {
    for (int row = BOARD_START_INDEX; row < BOARD_SIZE; row++) {
        for (int column = BOARD_START_INDEX; column < BOARD_SIZE; column++) {
            if (board[row][column] == NO_VALUE) {
                for (int k = MIN_VALUE; k <= MAX_VALUE; k++) {
                    board[row][column] = k;
                    if (isValid(board, row, column) && solve(board)) {
                        return true;
                    }
                    board[row][column] = NO_VALUE;
                }
                return false;
            }
        }
    }
    return true;
}

متد دیگر که نیاز داریم متد ()isValid است که به بررسی قیدهای سودوکو می‌پردازد، یعنی بررسی می‌کند آیا ردیف ستون و شبکه 3 × 3 معتبر هستند یا نه.

1
2
3
4
5
private boolean isValid(int[][] board, int row, int column) {
    return (rowConstraint(board, row)
      && columnConstraint(board, column) 
      && subsectionConstraint(board, row, column));
}

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

1
2
3
4
5
private boolean rowConstraint(int[][] board, int row) {
    boolean[] constraint = new boolean[BOARD_SIZE];
    return IntStream.range(BOARD_START_INDEX, BOARD_SIZE)
      .allMatch(column -> checkConstraint(board, row, constraint, column));
}

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

1
2
3
4
5
private boolean columnConstraint(int[][] board, int column) {
    boolean[] constraint = new boolean[BOARD_SIZE];
    return IntStream.range(BOARD_START_INDEX, BOARD_SIZE)
      .allMatch(row -> checkConstraint(board, row, constraint, column));
}

به علاوه باید زیربخش 3 × 3 را نیز بررسی کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private boolean subsectionConstraint(int[][] board, int row, int column) {
    boolean[] constraint = new boolean[BOARD_SIZE];
    int subsectionRowStart = (row / SUBSECTION_SIZE) * SUBSECTION_SIZE;
    int subsectionRowEnd = subsectionRowStart + SUBSECTION_SIZE;
 
    int subsectionColumnStart = (column / SUBSECTION_SIZE) * SUBSECTION_SIZE;
    int subsectionColumnEnd = subsectionColumnStart + SUBSECTION_SIZE;
 
    for (int r = subsectionRowStart; r < subsectionRowEnd; r++) {
        for (int c = subsectionColumnStart; c < subsectionColumnEnd; c++) {
            if (!checkConstraint(board, r, constraint, c)) return false;
        }
    }
    return true;
}

در نهایت به یک متد ()checkConstraint نیاز داریم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
boolean checkConstraint(
  int[][] board, 
  int row, 
  boolean[] constraint, 
  int column) {
    if (board[row][column] != NO_VALUE) {
        if (!constraint[board[row][column] - 1]) {
            constraint[board[row][column] - 1] = true;
        } else {
            return false;
        }
    }
    return true;
}

زمانی که همه این موارد بررسی شدند، متد ()isValid مقدار true بازگشت می‌دهد. اینک ما تقریباً آماده تست راه‌حل هستیم. کار نوشتن الگوریتم به پایان رسیده است. اما فعلاً الگوریتم صرفاً مقادیر true یا false بازگشت می‌دهد.

بنابراین باید به صورت چشمی تخته را بررسی کنیم تا ببینیم آیا باید نتیجه را نمایش دهیم یا نه. به ظاهر این بخشی از الگوریتم نیست.

1
2
3
4
5
6
7
8
private void printBoard() {
    for (int row = BOARD_START_INDEX; row < BOARD_SIZE; row++) {
        for (int column = BOARD_START_INDEX; column < BOARD_SIZE; column++) {
            System.out.print(board[row][column] + " ");
        }
        System.out.println();
    }
}

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

لینک‌های رقصنده

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

پوشش دقیق

در این بخش راه‌حل دیگری را بررسی می‌کنیم. سودوکو را می‌توان یک مسئله «پوشش دقیق» (Exact Cover) توصیف کرد که می‌تواند از طریق ماتریس وقوع نمایش یابد. این ماتریس روابط بین دو شیء را نمایش می‌دهد.

برای نمونه اگر اعداد 1 تا 7 را انتخاب کنیم و مجموعه‌هایی به صورت {S = {A, B, C, D, E, F داشته باشیم که:

A = {1, 4, 7}
B = {1, 4}
C = {4, 5, 7}
D = {3, 5, 6}
E = {2, 3, 6, 7}
F = {2, 7}

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

1
2
3
4
5
6
7
  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 
A | 1 | 0 | 0 | 1 | 0 | 0 | 1 |
B | 1 | 0 | 0 | 1 | 0 | 0 | 0 |
C | 0 | 0 | 0 | 1 | 1 | 0 | 1 |
D | 0 | 0 | 1 | 0 | 1 | 1 | 0 |
E | 0 | 1 | 1 | 0 | 0 | 1 | 1 |
F | 0 | 1 | 0 | 0 | 0 | 0 | 1 |

زیرمجموعه {S* = {B, D, F یک پوشش دقیق است:

1
2
3
4
  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 
B | 1 | 0 | 0 | 1 | 0 | 0 | 0 |
D | 0 | 0 | 1 | 0 | 1 | 1 | 0 |
F | 0 | 1 | 0 | 0 | 0 | 0 | 1 |

هر ستون دقیقاً یک عدد 1 در همه ردیف‌های منتخب دارد.

الگوریتم X

الگوریتم X یک رویکرد آزمون‌وخطا برای یافتن همه راه‌حل‌ها برای مسئله پوشش دقیق است. یعنی اگر از مجموعه مثال {S = {A, B, C, D, E, F آغاز کنیم، باید زیرمجموعه {S* = {B, D, F را بیابیم.

طرز کار الگوریتم X چنین است:

اگر ماتریس A هیچ ستونی نداشته باشد، راه‌حل جزئی فعلی یک راه‌حل معتبر است.
با موفقیت کار را خاتمه می‌دهیم، در غیر این صورت یک ستون C را انتخاب کنید (رویکرد قطعیتی).
یک ردیف r را چنان انتخاب کنید که Ar, c = 1 (غیر قطعیتی) یعنی همه احتمال‌ها را بررسی کنید.
ردیف r را در راه‌حل جزئی بگنجانید.
برای هر ستون j که رابطه Ar, j = 1 برقرار باشد، برای هر ردیف r که Ai, j = 1 برقرار باشد:
ردیف i را از ماتریس A حذف کنید و ستون j را از ماتریس A حذف کنید.
الگوریتم را به صورت بازگشتی روی ماتریس کاهش یافته A تکرار کنید.

یک پیاده‌سازی مؤثر از الگوریتم X الگوریتم لینک‌های رقصنده (به اختصار DLX) است که از سوی دکتر «دونالد نات» (Donald Knuth) پیشنهاد شده است.

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

مسئله پوشش دقیق

ابتدا باید یک ماتریس ایجاد کنیم که معمای سودوکو را به صورت یک مسئله پوشش دقیق نمایش دهد. این ماتریس 3^9 ردیف خواهد داشت یعنی برای هر موقعیت منفرد ممکن (9 ردیف × 9 ستون) از هر عدد ممکن (9 عدد) یک ردیف هست.

ستون‌ها نماینده تخته هستند (9 × 9) که در تعداد قیدها ضرب شده‌اند. همچنین سه قید نیز تعریف کرده‌ایم:

هر ردیف تنها یک عدد از یک نوع خواهد داشت.
هر ستون تنها یک عدد از یک نوع خواهد داشت.
هر زیرمجموعه تنها یک عدد از یک نوع خواهد داشت.

به علاوه قید صریح چهارمی نیز وجود دارد:

در هر سلول تنها یک عدد می‌تواند قرار بگیرد.

بدین ترتیب در مجموع چهار قید داریم و از این رو در ماتریس پوشش دقیق، 4 × 9 × 9 ستون وجود دارند:

1
2
3
4
5
6
7
private static int BOARD_SIZE = 9;
private static int SUBSECTION_SIZE = 3;
private static int NO_VALUE = 0;
private static int CONSTRAINTS = 4;
private static int MIN_VALUE = 1;
private static int MAX_VALUE = 9;
private static int COVER_START_INDEX = 1;

1
2
3
4
private int getIndex(int row, int column, int num) {
    return (row - 1) * BOARD_SIZE * BOARD_SIZE 
      + (column - 1) * BOARD_SIZE + (num - 1);
}

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
private boolean[][] createExactCoverBoard() {
    boolean[][] coverBoard = new boolean
      [BOARD_SIZE * BOARD_SIZE * MAX_VALUE]
      [BOARD_SIZE * BOARD_SIZE * CONSTRAINTS];
 
    int hBase = 0;
    hBase = checkCellConstraint(coverBoard, hBase);
    hBase = checkRowConstraint(coverBoard, hBase);
    hBase = checkColumnConstraint(coverBoard, hBase);
    checkSubsectionConstraint(coverBoard, hBase);
     
    return coverBoard;
}
 
private int checkSubsectionConstraint(boolean[][] coverBoard, int hBase) {
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row += SUBSECTION_SIZE) {
        for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column += SUBSECTION_SIZE) {
            for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++, hBase++) {
                for (int rowDelta = 0; rowDelta < SUBSECTION_SIZE; rowDelta++) {
                    for (int columnDelta = 0; columnDelta < SUBSECTION_SIZE; columnDelta++) {
                        int index = getIndex(row + rowDelta, column + columnDelta, n);
                        coverBoard[index][hBase] = true;
                    }
                }
            }
        }
    }
    return hBase;
}
 
private int checkColumnConstraint(boolean[][] coverBoard, int hBase) {
    for (int column = COVER_START_INDEX; column <= BOARD_SIZE; c++) {
        for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++, hBase++) {
            for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row++) {
                int index = getIndex(row, column, n);
                coverBoard[index][hBase] = true;
            }
        }
    }
    return hBase;
}
 
private int checkRowConstraint(boolean[][] coverBoard, int hBase) {
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; r++) {
        for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++, hBase++) {
            for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column++) {
                int index = getIndex(row, column, n);
                coverBoard[index][hBase] = true;
            }
        }
    }
    return hBase;
}
 
private int checkCellConstraint(boolean[][] coverBoard, int hBase) {
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row++) {
        for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column++, hBase++) {
            for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++) {
                int index = getIndex(row, column, n);
                coverBoard[index][hBase] = true;
            }
        }
    }
    return hBase;
}

سپس باید تخته ذخیره ایجاد شده را به‌روزرسانی کنیم تا طرح‌بندی اولیه معما ایجاد شود:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private boolean[][] initializeExactCoverBoard(int[][] board) {
    boolean[][] coverBoard = createExactCoverBoard();
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row++) {
        for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column++) {
            int n = board[row - 1][column - 1];
            if (n != NO_VALUE) {
                for (int num = MIN_VALUE; num <= MAX_VALUE; num++) {
                    if (num != n) {
                        Arrays.fill(coverBoard[getIndex(row, column, num)], false);
                    }
                }
            }
        }
    }
    return coverBoard;
}

اینک آماده هستیم که به مرحله بعد برویم. در ادامه دو کلاس ایجاد می‌کنیم که سلول‌های ما را به همدیگر لینک می‌کنند.

گره رقصان

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

1
2
node.prev.next = node.next
node.next.prev = node.prev

گره را حذف می‌کند و همزمان:

1
2
node.prev = node
node.next = node

گره را بازیابی می‌کند.

هر گره در DLX به گره سمت چپ، راست، بالا و پایین خود لینک شده است. کلاس DancingNode همه عملیات مورد نیاز برای افزودن و حذف گره‌ها را در خود دارد:

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
class DancingNode {
    DancingNode L, R, U, D;
    ColumnNode C;
 
    DancingNode hookDown(DancingNode node) {
        assert (this.C == node.C);
        node.D = this.D;
        node.D.U = node;
        node.U = this;
        this.D = node;
        return node;
    }
 
    DancingNode hookRight(DancingNode node) {
        node.R = this.R;
        node.R.L = node;
        node.L = this;
        this.R = node;
        return node;
    }
 
    void unlinkLR() {
        this.L.R = this.R;
        this.R.L = this.L;
    }
 
    void relinkLR() {
        this.L.R = this.R.L = this;
    }
 
    void unlinkUD() {
        this.U.D = this.D;
        this.D.U = this.U;
    }
 
    void relinkUD() {
        this.U.D = this.D.U = this;
    }
 
    DancingNode() {
        L = R = U = D = this;
    }
 
    DancingNode(ColumnNode c) {
        this();
        C = c;
    }
}

گره ستون

کلاس ColumnNode ستون‌ها را به هم لینک می‌کند:

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
class ColumnNode extends DancingNode {
    int size;
    String name;
 
    ColumnNode(String n) {
        super();
        size = 0;
        name = n;
        C = this;
    }
 
    void cover() {
        unlinkLR();
        for (DancingNode i = this.D; i != this; i = i.D) {
            for (DancingNode j = i.R; j != i; j = j.R) {
                j.unlinkUD();
                j.C.size--;
            }
        }
    }
 
    void uncover() {
        for (DancingNode i = this.U; i != this; i = i.U) {
            for (DancingNode j = i.L; j != i; j = j.L) {
                j.C.size++;
                j.relinkUD();
            }
        }
        relinkLR();
    }
}

حل‌ کننده

در این مرحله باید یک شبکه متشکل از اشیای DancingNode و ColumnNode خود بسازیم:

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
private ColumnNode makeDLXBoard(boolean[][] grid) {
    int COLS = grid[0].length;
 
    ColumnNode headerNode = new ColumnNode("header");
    List<ColumnNode> columnNodes = new ArrayList<>();
 
    for (int i = 0; i < COLS; i++) {
        ColumnNode n = new ColumnNode(Integer.toString(i));
        columnNodes.add(n);
        headerNode = (ColumnNode) headerNode.hookRight(n);
    }
    headerNode = headerNode.R.C;
 
    for (boolean[] aGrid : grid) {
        DancingNode prev = null;
        for (int j = 0; j < COLS; j++) {
            if (aGrid[j]) {
                ColumnNode col = columnNodes.get(j);
                DancingNode newNode = new DancingNode(col);
                if (prev == null) prev = newNode;
                col.U.hookDown(newNode);
                prev = prev.hookRight(newNode);
                col.size++;
            }
        }
    }
 
    headerNode.size = COLS;
 
    return headerNode;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
private ColumnNode selectColumnNodeHeuristic() {
    int min = Integer.MAX_VALUE;
    ColumnNode ret = null;
    for (
      ColumnNode c = (ColumnNode) header.R; 
      c != header; 
      c = (ColumnNode) c.R) {
        if (c.size < min) {
            min = c.size;
            ret = c;
        }
    }
    return ret;
}

در نهایت می‌توانیم به صورت بازگشتی به دنبال پاسخ بگردیم:

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
private void search(int k) {
    if (header.R == header) {
        handleSolution(answer);
    } else {
        ColumnNode c = selectColumnNodeHeuristic();
        c.cover();
 
        for (DancingNode r = c.D; r != c; r = r.D) {
            answer.add(r);
 
            for (DancingNode j = r.R; j != r; j = j.R) {
                j.C.cover();
            }
 
            search(k + 1);
 
            r = answer.remove(answer.size() - 1);
            c = r.C;
 
            for (DancingNode j = r.L; j != r; j = j.L) {
                j.C.uncover();
            }
        }
        c.uncover();
    }
}

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

مقایسه راه‌ حل‌ها

می‌توانیم دو الگوریتم مختلف را با اجرا روی رایانه یکسان با هم مقایسه کنیم. بدین ترتیب از تأثیرگذاری تفاوت اجزای محاسباتی رایانه مانند CPU یا RAM جلوگیری می‌کنیم، چون زمان‌های واقعی روی رایانه‌های مختلف متفاوت خواهد بود. با این حال، اینک می‌توانیم نتایج نسبی را ببینیم و بدین ترتیب می‌توان گفت که کدام الگوریتم سریع‌تر بود است. روی رایانه‌ای که ما تست کردیم، اجرای الگوریتم پس‌گرد برای حل معما به حدود 250 میلی‌ثانیه زمان نیاز داشت.

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

سخن پایانی

در این راهنما، به بررسی دو راه‌حل معمای سودوکو با استفاده از توابع داخلی جاوا پرداختیم. الگوریتم پس‌گرد که یک الگوریتم حمله کور است می‌تواند معمای استاندارد 9 × 9 سودوکو را به سادگی حل کند. در ادامه الگوریتم نسبتاً پیچیده‌تر لینک‌های رقصان نیز مورد بررسی قرار گرفت. هر دو الگوریتم می‌توانند معماهای سودوکو را در کسری از ثانیه حل کنند. در نهایت باید اشاره کنیم که کد کامل الگوریتم‌های بررسی شده در این مقاله را می‌توانید در این صفحه (+) مشاهده کن

منبع: فرادرس

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

0 نظر

ساخت برنامه حل سودوکو در جاوا — از صفر تا صد

معمای سودوکو

تخته تست

1
2
3
4
5
6
7
8
9
8 . . . . . . . . 
. . 3 6 . . . . . 
. 7 . . 9 . 2 . . 
. 5 . . . 7 . . . 
. . . . 4 5 7 . . 
. . . 1 . . . 3 . 
. . 1 . . . . 6 8
. . 8 5 . . . 1 . 
. 9 . . . . 4 . .

تخته حل‌ شده

1
2
3
4
5
6
7
8
9
8 1 2 7 5 3 6 4 9 
9 4 3 6 8 2 1 7 5 
6 7 5 4 9 1 2 8 3 
1 5 4 2 3 7 8 9 6 
3 6 9 8 4 5 7 2 1 
2 8 7 1 6 9 5 3 4 
5 2 1 9 7 4 3 6 8 
4 3 8 5 2 6 9 1 7 
7 9 6 3 1 8 4 5 2

الگوریتم پس‌گرد

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

مقدمه

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

راه‌حل

1
2
3
4
5
6
7
8
9
10
11
int[][] board = {
  { 8, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 3, 6, 0, 0, 0, 0, 0 },
  { 0, 7, 0, 0, 9, 0, 2, 0, 0 },
  { 0, 5, 0, 0, 0, 7, 0, 0, 0 },
  { 0, 0, 0, 0, 4, 5, 7, 0, 0 },
  { 0, 0, 0, 1, 0, 0, 0, 3, 0 },
  { 0, 0, 1, 0, 0, 0, 0, 6, 8 },
  { 0, 0, 8, 5, 0, 0, 0, 1, 0 },
  { 0, 9, 0, 0, 0, 0, 4, 0, 0 } 
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
private boolean solve(int[][] board) {
    for (int row = BOARD_START_INDEX; row < BOARD_SIZE; row++) {
        for (int column = BOARD_START_INDEX; column < BOARD_SIZE; column++) {
            if (board[row][column] == NO_VALUE) {
                for (int k = MIN_VALUE; k <= MAX_VALUE; k++) {
                    board[row][column] = k;
                    if (isValid(board, row, column) && solve(board)) {
                        return true;
                    }
                    board[row][column] = NO_VALUE;
                }
                return false;
            }
        }
    }
    return true;
}

1
2
3
4
5
private boolean isValid(int[][] board, int row, int column) {
    return (rowConstraint(board, row)
      && columnConstraint(board, column) 
      && subsectionConstraint(board, row, column));
}

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

1
2
3
4
5
private boolean rowConstraint(int[][] board, int row) {
    boolean[] constraint = new boolean[BOARD_SIZE];
    return IntStream.range(BOARD_START_INDEX, BOARD_SIZE)
      .allMatch(column -> checkConstraint(board, row, constraint, column));
}

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

1
2
3
4
5
private boolean columnConstraint(int[][] board, int column) {
    boolean[] constraint = new boolean[BOARD_SIZE];
    return IntStream.range(BOARD_START_INDEX, BOARD_SIZE)
      .allMatch(row -> checkConstraint(board, row, constraint, column));
}

به علاوه باید زیربخش 3 × 3 را نیز بررسی کنیم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
private boolean subsectionConstraint(int[][] board, int row, int column) {
    boolean[] constraint = new boolean[BOARD_SIZE];
    int subsectionRowStart = (row / SUBSECTION_SIZE) * SUBSECTION_SIZE;
    int subsectionRowEnd = subsectionRowStart + SUBSECTION_SIZE;
 
    int subsectionColumnStart = (column / SUBSECTION_SIZE) * SUBSECTION_SIZE;
    int subsectionColumnEnd = subsectionColumnStart + SUBSECTION_SIZE;
 
    for (int r = subsectionRowStart; r < subsectionRowEnd; r++) {
        for (int c = subsectionColumnStart; c < subsectionColumnEnd; c++) {
            if (!checkConstraint(board, r, constraint, c)) return false;
        }
    }
    return true;
}

در نهایت به یک متد ()checkConstraint نیاز داریم:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
boolean checkConstraint(
  int[][] board, 
  int row, 
  boolean[] constraint, 
  int column) {
    if (board[row][column] != NO_VALUE) {
        if (!constraint[board[row][column] - 1]) {
            constraint[board[row][column] - 1] = true;
        } else {
            return false;
        }
    }
    return true;
}

1
2
3
4
5
6
7
8
private void printBoard() {
    for (int row = BOARD_START_INDEX; row < BOARD_SIZE; row++) {
        for (int column = BOARD_START_INDEX; column < BOARD_SIZE; column++) {
            System.out.print(board[row][column] + " ");
        }
        System.out.println();
    }
}

لینک‌های رقصنده

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

پوشش دقیق

برای نمونه اگر اعداد 1 تا 7 را انتخاب کنیم و مجموعه‌هایی به صورت {S = {A, B, C, D, E, F داشته باشیم که:

A = {1, 4, 7}
B = {1, 4}
C = {4, 5, 7}
D = {3, 5, 6}
E = {2, 3, 6, 7}
F = {2, 7}

1
2
3
4
5
6
7
  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 
A | 1 | 0 | 0 | 1 | 0 | 0 | 1 |
B | 1 | 0 | 0 | 1 | 0 | 0 | 0 |
C | 0 | 0 | 0 | 1 | 1 | 0 | 1 |
D | 0 | 0 | 1 | 0 | 1 | 1 | 0 |
E | 0 | 1 | 1 | 0 | 0 | 1 | 1 |
F | 0 | 1 | 0 | 0 | 0 | 0 | 1 |

زیرمجموعه {S* = {B, D, F یک پوشش دقیق است:

1
2
3
4
  | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 
B | 1 | 0 | 0 | 1 | 0 | 0 | 0 |
D | 0 | 0 | 1 | 0 | 1 | 1 | 0 |
F | 0 | 1 | 0 | 0 | 0 | 0 | 1 |

هر ستون دقیقاً یک عدد 1 در همه ردیف‌های منتخب دارد.

الگوریتم X

طرز کار الگوریتم X چنین است:

اگر ماتریس A هیچ ستونی نداشته باشد، راه‌حل جزئی فعلی یک راه‌حل معتبر است.
با موفقیت کار را خاتمه می‌دهیم، در غیر این صورت یک ستون C را انتخاب کنید (رویکرد قطعیتی).
یک ردیف r را چنان انتخاب کنید که Ar, c = 1 (غیر قطعیتی) یعنی همه احتمال‌ها را بررسی کنید.
ردیف r را در راه‌حل جزئی بگنجانید.
برای هر ستون j که رابطه Ar, j = 1 برقرار باشد، برای هر ردیف r که Ai, j = 1 برقرار باشد:
ردیف i را از ماتریس A حذف کنید و ستون j را از ماتریس A حذف کنید.
الگوریتم را به صورت بازگشتی روی ماتریس کاهش یافته A تکرار کنید.

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

مسئله پوشش دقیق

ستون‌ها نماینده تخته هستند (9 × 9) که در تعداد قیدها ضرب شده‌اند. همچنین سه قید نیز تعریف کرده‌ایم:

هر ردیف تنها یک عدد از یک نوع خواهد داشت.
هر ستون تنها یک عدد از یک نوع خواهد داشت.
هر زیرمجموعه تنها یک عدد از یک نوع خواهد داشت.

به علاوه قید صریح چهارمی نیز وجود دارد:

در هر سلول تنها یک عدد می‌تواند قرار بگیرد.

بدین ترتیب در مجموع چهار قید داریم و از این رو در ماتریس پوشش دقیق، 4 × 9 × 9 ستون وجود دارند:

1
2
3
4
5
6
7
private static int BOARD_SIZE = 9;
private static int SUBSECTION_SIZE = 3;
private static int NO_VALUE = 0;
private static int CONSTRAINTS = 4;
private static int MIN_VALUE = 1;
private static int MAX_VALUE = 9;
private static int COVER_START_INDEX = 1;

1
2
3
4
private int getIndex(int row, int column, int num) {
    return (row - 1) * BOARD_SIZE * BOARD_SIZE 
      + (column - 1) * BOARD_SIZE + (num - 1);
}

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
private boolean[][] createExactCoverBoard() {
    boolean[][] coverBoard = new boolean
      [BOARD_SIZE * BOARD_SIZE * MAX_VALUE]
      [BOARD_SIZE * BOARD_SIZE * CONSTRAINTS];
 
    int hBase = 0;
    hBase = checkCellConstraint(coverBoard, hBase);
    hBase = checkRowConstraint(coverBoard, hBase);
    hBase = checkColumnConstraint(coverBoard, hBase);
    checkSubsectionConstraint(coverBoard, hBase);
     
    return coverBoard;
}
 
private int checkSubsectionConstraint(boolean[][] coverBoard, int hBase) {
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row += SUBSECTION_SIZE) {
        for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column += SUBSECTION_SIZE) {
            for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++, hBase++) {
                for (int rowDelta = 0; rowDelta < SUBSECTION_SIZE; rowDelta++) {
                    for (int columnDelta = 0; columnDelta < SUBSECTION_SIZE; columnDelta++) {
                        int index = getIndex(row + rowDelta, column + columnDelta, n);
                        coverBoard[index][hBase] = true;
                    }
                }
            }
        }
    }
    return hBase;
}
 
private int checkColumnConstraint(boolean[][] coverBoard, int hBase) {
    for (int column = COVER_START_INDEX; column <= BOARD_SIZE; c++) {
        for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++, hBase++) {
            for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row++) {
                int index = getIndex(row, column, n);
                coverBoard[index][hBase] = true;
            }
        }
    }
    return hBase;
}
 
private int checkRowConstraint(boolean[][] coverBoard, int hBase) {
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; r++) {
        for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++, hBase++) {
            for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column++) {
                int index = getIndex(row, column, n);
                coverBoard[index][hBase] = true;
            }
        }
    }
    return hBase;
}
 
private int checkCellConstraint(boolean[][] coverBoard, int hBase) {
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row++) {
        for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column++, hBase++) {
            for (int n = COVER_START_INDEX; n <= BOARD_SIZE; n++) {
                int index = getIndex(row, column, n);
                coverBoard[index][hBase] = true;
            }
        }
    }
    return hBase;
}

سپس باید تخته ذخیره ایجاد شده را به‌روزرسانی کنیم تا طرح‌بندی اولیه معما ایجاد شود:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
private boolean[][] initializeExactCoverBoard(int[][] board) {
    boolean[][] coverBoard = createExactCoverBoard();
    for (int row = COVER_START_INDEX; row <= BOARD_SIZE; row++) {
        for (int column = COVER_START_INDEX; column <= BOARD_SIZE; column++) {
            int n = board[row - 1][column - 1];
            if (n != NO_VALUE) {
                for (int num = MIN_VALUE; num <= MAX_VALUE; num++) {
                    if (num != n) {
                        Arrays.fill(coverBoard[getIndex(row, column, num)], false);
                    }
                }
            }
        }
    }
    return coverBoard;
}

گره رقصان

1
2
node.prev.next = node.next
node.next.prev = node.prev

گره را حذف می‌کند و همزمان:

1
2
node.prev = node
node.next = node

گره را بازیابی می‌کند.

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
class DancingNode {
    DancingNode L, R, U, D;
    ColumnNode C;
 
    DancingNode hookDown(DancingNode node) {
        assert (this.C == node.C);
        node.D = this.D;
        node.D.U = node;
        node.U = this;
        this.D = node;
        return node;
    }
 
    DancingNode hookRight(DancingNode node) {
        node.R = this.R;
        node.R.L = node;
        node.L = this;
        this.R = node;
        return node;
    }
 
    void unlinkLR() {
        this.L.R = this.R;
        this.R.L = this.L;
    }
 
    void relinkLR() {
        this.L.R = this.R.L = this;
    }
 
    void unlinkUD() {
        this.U.D = this.D;
        this.D.U = this.U;
    }
 
    void relinkUD() {
        this.U.D = this.D.U = this;
    }
 
    DancingNode() {
        L = R = U = D = this;
    }
 
    DancingNode(ColumnNode c) {
        this();
        C = c;
    }
}

گره ستون

کلاس ColumnNode ستون‌ها را به هم لینک می‌کند:

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
class ColumnNode extends DancingNode {
    int size;
    String name;
 
    ColumnNode(String n) {
        super();
        size = 0;
        name = n;
        C = this;
    }
 
    void cover() {
        unlinkLR();
        for (DancingNode i = this.D; i != this; i = i.D) {
            for (DancingNode j = i.R; j != i; j = j.R) {
                j.unlinkUD();
                j.C.size--;
            }
        }
    }
 
    void uncover() {
        for (DancingNode i = this.U; i != this; i = i.U) {
            for (DancingNode j = i.L; j != i; j = j.L) {
                j.C.size++;
                j.relinkUD();
            }
        }
        relinkLR();
    }
}

حل‌ کننده

در این مرحله باید یک شبکه متشکل از اشیای DancingNode و ColumnNode خود بسازیم:

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
private ColumnNode makeDLXBoard(boolean[][] grid) {
    int COLS = grid[0].length;
 
    ColumnNode headerNode = new ColumnNode("header");
    List<ColumnNode> columnNodes = new ArrayList<>();
 
    for (int i = 0; i < COLS; i++) {
        ColumnNode n = new ColumnNode(Integer.toString(i));
        columnNodes.add(n);
        headerNode = (ColumnNode) headerNode.hookRight(n);
    }
    headerNode = headerNode.R.C;
 
    for (boolean[] aGrid : grid) {
        DancingNode prev = null;
        for (int j = 0; j < COLS; j++) {
            if (aGrid[j]) {
                ColumnNode col = columnNodes.get(j);
                DancingNode newNode = new DancingNode(col);
                if (prev == null) prev = newNode;
                col.U.hookDown(newNode);
                prev = prev.hookRight(newNode);
                col.size++;
            }
        }
    }
 
    headerNode.size = COLS;
 
    return headerNode;
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
private ColumnNode selectColumnNodeHeuristic() {
    int min = Integer.MAX_VALUE;
    ColumnNode ret = null;
    for (
      ColumnNode c = (ColumnNode) header.R; 
      c != header; 
      c = (ColumnNode) c.R) {
        if (c.size < min) {
            min = c.size;
            ret = c;
        }
    }
    return ret;
}

در نهایت می‌توانیم به صورت بازگشتی به دنبال پاسخ بگردیم:

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
private void search(int k) {
    if (header.R == header) {
        handleSolution(answer);
    } else {
        ColumnNode c = selectColumnNodeHeuristic();
        c.cover();
 
        for (DancingNode r = c.D; r != c; r = r.D) {
            answer.add(r);
 
            for (DancingNode j = r.R; j != r; j = j.R) {
                j.C.cover();
            }
 
            search(k + 1);
 
            r = answer.remove(answer.size() - 1);
            c = r.C;
 
            for (DancingNode j = r.L; j != r; j = j.L) {
                j.C.uncover();
            }
        }
        c.uncover();
    }
}

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

مقایسه راه‌ حل‌ها

سخن پایانی

منبع: فرادرس

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

0 نظر

ساختاردهی فرم های 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 نظر

332
1
...
50
51
صفحه 52
53
54
...
67

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

ابر برجسب

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

بایگانی

جستجو

ساخت برنامه حل سودوکو در جاوا — از صفر تا صد

معمای سودوکو

تخته تست

تخته حل‌ شده

الگوریتم پس‌گرد

مقدمه

راه‌حل

لینک‌های رقصنده

پوشش دقیق

الگوریتم X

مسئله پوشش دقیق

گره رقصان

گره ستون

حل‌ کننده

مقایسه راه‌ حل‌ها

سخن پایانی

ساخت برنامه حل سودوکو در جاوا — از صفر تا صد

معمای سودوکو

تخته تست

تخته حل‌ شده

الگوریتم پس‌گرد

مقدمه

راه‌حل

لینک‌های رقصنده

پوشش دقیق

الگوریتم X

مسئله پوشش دقیق

گره رقصان

گره ستون

حل‌ کننده

مقایسه راه‌ حل‌ها

سخن پایانی

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

پیش‌نیازها

عنصر <form>

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

عنصر <label>

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

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

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

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

سخن پایانی

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

پیش‌نیازها

فرم HTML چیست؟

طراحی فرم HTML

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

عنصر <form>

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

عنصر <button>

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

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

سخن پایانی

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

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

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

ترمینال

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

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

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

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

سخن پایانی