همانطور که میدانید می توان ظاهر فرم های HTML را، مانند عناصر دیگر HTML، با استفاده از CSS بسیار زیباتر نشان داد. کد زیر یک فرم عادی 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
|
<!DOCTYPE html>
<html>
<body>
<h3>Using CSS tostyle an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text"id="fname"name="firstname"placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lastname"placeholder="Your last name..">
<label for="country">Country</label>
<select id="country"name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit"value="Submit">
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید ظاهر این فرم بسیار زشت است اما اگر به کدهای بالا کمی استایل 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
|
<!DOCTYPEhtml>
<html>
<style>
input[type=text], select {
width:100%;
padding:12px20px;
margin:8px0;
display:inline-block;
border:1pxsolid#ccc;
border-radius:4px;
box-sizing:border-box;
}
input[type=submit] {
width:100%;
background-color:#4CAF50;
color:white;
padding:14px20px;
margin:8px0;
border:none;
border-radius:4px;
cursor:pointer;
}
input[type=submit]:hover {
background-color:#45a049;
}
div {
border-radius:5px;
background-color:#f2f2f2;
padding:20px;
}
</style>
<body>
<h3>Using CSS tostyle an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text"id="fname"name="firstname"placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lastname"placeholder="Your last name..">
<label for="country">Country</label>
<select id="country"name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit"value="Submit">
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مقاله میخواهیم برخی از مواردی را که میتواند ظاهر فونت ها را اینچنین زیبا کند به شما نشان دهیم.
استایل دهی Input ها
همانطور که میدانید از خصوصیت width برای تعیین عرض عناصر استفاده می شد. از طرفی یکی از دلایل زشتی فرم های پیش فرض کوچک بودن input هایشان است بنابراین ما می توانیم به این input ها width مناسب بدهیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input {
width:100%;
}
</style>
</head>
<body>
<p>Afull-width input field:</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در کد بالا این مقدار را 100 درصد تعیین کرده ایم تا تمام عرض صفحه گرفته شود. همچنین به نوع سلکتورمان دقت کنید؛ این سلکتور تمام <input> ها را هدف میگیرد. اگر بخواهیم به جای هدف گرفتن تمام input ها، فقط input های خاصی هدف گرفته شوند می توانستیم از کد هایی مانند کد های زیر استفاده کنیم:
- سلکتور
[input[type=text: تنها فیلد های متنی را انتخاب می کند
- سلکتور
[input[type=password: تنها فیلد های مربوط به رمز کاربری را انتخاب می کند
- سلکتور
[input[type=number: تنها فیلد های عددی را انتخاب می کند
یکی دیگر از مشکلات ظاهری فرم های پیش فرض این است که آن ها به متن داخلشان میچسبند و جای تنگی دارند. برای حل این مشکل می توانیم از padding استفاده کنیم:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
box-sizing:border-box;
}
</style>
</head>
<body>
<p>Padded text fields:</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که میبینید فیلد های مربوطه بزرگ تر و جا دار تر شده اند اما هنوز مشکلی هست! دو فیلدی که پشت سر هم گذاشته ایم به هم چسبیده اند بنابراین می توانیم به آن ها یک margin نیز اضافه کنیم تا از هم کمی فاصله بگیرند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
}
</style>
</head>
<body>
<p>Padded text fields:</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
سوال: دلیل اضافه کردن خاصیت box-sizing به کد بالا چیست؟
پاسخ: در قسمت های قبلی همین دوره توضیح داده ایم که اگر خاصیت box-sizing روی مقدار border-box تنظیم نشده باشد باعث بروز مشکلی می شود؛ با زیاد شدن padding عرض عنصر نیز زیاد می شود! در CSS خصوصیتی به نام box-sizing وجود دارد و باعث می شود عناصر عرض خود را ثابت نگه دارند. اگر از box-sizing با مقدار border-box استفاده کنید و سپس مقدار padding را افزایش دهید به جای زیاد شدن عرض، فضای content کمتر می شود.
از مشکلات دیگر فرم های پیش فرض، زیبا نبودن مرز دور هر فیلد است. برای رنگی کردن و مشخص تر کردن این مرز ها می توان از خاصیت border استفاده کرد. همچنین برای آنکه فیلد هایمان زیبا تر شوند و زاویه ی دور آنها گِرد باشد می توانیم از خاصیت border-radius نیز استفاده کنیم:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
border:2pxsolidred;
border-radius:4px;
}
</style>
</head>
<body>
<p>Text fields with borders:</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حتما دیده اید که برخی از فرم ها تنها مرز پایین دارند. برای طراحی چنین فیلدی می توانید از خصوصیت border-bottomاستفاده کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
border:none;
border-bottom:2pxsolidred;
}
</style>
</head>
<body>
<p>Text fields with onlyabottom border:</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
البته باید ذکر کنیم که شما می توانید با استفاده از background-color به فیلد ها رنگ نیز بدهید. همچنین با استفاده از خاصیت color میتوانیم رنگ متن درون آن فیلد را مشخص کنیم. به طور مثال به کد زیر دقت کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
border:none;
background-color:#3CBC8D;
color:white;
}
</style>
</head>
<body>
<p>Colored text fields:</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname"value="John">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname"value="Doe">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حالت focus
خیلی از طراحان front end به درستی نمی دانند که حالت focus (در لغت به معنی «تمرکز» و «مرکز توجه») در عناصر به چه صورت است. به زبان ساده می توان گفت که هر عنصری با کلیک کردن یا شروع تعامل با آن به حالت focus در می آید؛ یعنی توجه شما و مرورگر روی آن عنصر است. ما می توانیم از این خاصیت برای زیباسازی فرم هایمان استفاده کنیم.
یکی از رفتار های پیش فرض مرورگر ها در مواجهه با فرم های HTML این است که دور فیلد هایمان یک خط آبی اضافه می کنند. اگر شما از این خاصیت خوشتان نمی آید می توانید از دستور ;outline: none استفاده کنید. همچنین استفاده ازfocus: نیز می تواند بسیار به نفع ما باشد.
مثال اول: در این مثال به مرورگر گفته ایم که هنگام focus شدن یک عنصر باید به فیلد ما رنگ پس زمینه ی آبی اضافه کند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
border:1pxsolid#555;
outline:none;
}
input[type=text]:focus {
background-color:lightblue;
}
</style>
</head>
<body>
<p>Inthisexample,we usethe:focus selector toaddabackground color tothe text field when it gets focused(clicked on):</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname"value="John">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname"value="Doe">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
مثال دوم: در این فیلد کار جالب تری انجام داده ایم. به مرورگر گفته ایم زمانی که فیلد به حالت focus در می آید رنگ border آن را پر رنگ تر کن تا کاربر متوجه فعال بودن فیلد بشود:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
border:3pxsolid#ccc;
outline:none;
}
input[type=text]:focus {
border:3pxsolid#555;
}
</style>
</head>
<body>
<p>Inthisexample,we usethe:focus selector toaddablack border color tothe text field when it gets focused(clicked on):</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname"value="John">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname"value="Doe">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
حتی می توانیم این فیلد را از این هم بهتر کنیم! می توانیم با اضافه کردن خاصیت transition به آن حالت انیمیشن بدهیم:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
padding:12px20px;
margin:8px0;
box-sizing:border-box;
border:3pxsolid#ccc;
-webkit-transition:0.9s;
transition:0.9s;
outline:none;
}
input[type=text]:focus {
border:3pxsolid#555;
}
</style>
</head>
<body>
<p>Inthisexample,we usethe:focus selector toaddablack border color tothe text field when it gets focused(clicked on):</p>
<p>Note that we have added the CSS transition propertytoanimate the border color(takes0.5seconds tochange the color on focus).</p>
<form>
<label for="fname">First Name</label>
<input type="text"id="fname"name="fname"value="John">
<label for="lname">Last Name</label>
<input type="text"id="lname"name="lname"value="Doe">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
همانطور که می بینید هنگامی که روی فیلد مورد نظر کلیک کنید پر رنگ شدن border به آرامی انجام می شود و حالت انیمیشن گونه ای دارد. در دوره ی CSS پیشرفته با دستوراتی مانند transition آشنا خواهیم شد.
اضافه کردن آیکون و انیمیشن
حتما مشاهده کرده اید که برخی از فیلد ها (مانند فیلد های جست و جو در سایت) دارای آیکون خاصی هستند. برای اضافه کردن آن ها می توانید از خصوصیت background-image استفاده کرده و سپس آن را با background-positionموقعیت دهی کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:100%;
box-sizing:border-box;
border:2pxsolid#ccc;
border-radius:4px;
font-size:16px;
background-color:white;
background-image:url('https://www.w3schools.com/css/searchicon.png');
background-position:10px10px;
background-repeat:no-repeat;
padding:12px20px12px40px;
}
</style>
</head>
<body>
<p>Input with icon:</p>
<form>
<input type="text"name="search"placeholder="Search..">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در کد بالا باید توجه داشته باشید که padding از سمت چپ را زیاد داده ایم تا نوشته ی جست و جو روی آیکون نوشته نشود! حالا نوبت انیمیشن است. ساده ترین حالت ایجاد انیمیشن در فیلد ها این است که عرض آن ها را کوتاه قرار دهید و سپس در کد ها به مرورگر بگویید اگر فیلد وارد حالت Focus شد عرض اش را زیاد کن و در عین حال به آن خاصیتtransition را نیز بدهیم:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=text] {
width:130px;
box-sizing:border-box;
border:2pxsolid#ccc;
border-radius:4px;
font-size:16px;
background-color:white;
background-image:url('https://www.w3schools.com/css/searchicon.png');
background-position:10px10px;
background-repeat:no-repeat;
padding:12px20px12px40px;
-webkit-transition:width0.4sease-in-out;
transition:width0.4sease-in-out;
}
input[type=text]:focus {
width:100%;
}
</style>
</head>
<body>
<p>Animated search input:</p>
<form>
<input type="text"name="search"placeholder="Search..">
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
با کلیک کردن روی فیلد جست و جو تغییر زیبا را مشاهده می کنید!
استایل دهی textarea
فرم های HTML تنها از فیلد های متنی تشکیل نشده اند بلکه برخی اوقات از نوع textarea هستند. البته پیچیدگی خاصی ندارند و می توانیم آن ها را دقیقا مانند فیلد ها استایل دهی کنیم اما یکی از ویژگی های textarea ها این است که قابل resize شدن هستند بنابراین کاربر می تواند اندازه شان را برای خودش تغییر دهد. این قابلیت به شما ضرر نمی زند بلکه ممکن است کاربران آن را دوست داشته باشند اما اگر به هر دلیلی خواستید جلوی این کار را بگیرید باید از خاصیت resizeاستفاده کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
textarea {
width:100%;
height:150px;
padding:12px20px;
box-sizing:border-box;
border:2pxsolid#ccc;
border-radius:4px;
background-color:#f8f8f8;
font-size:16px;
resize:none;
}
</style>
</head>
<body>
<p><strong>Tip:</strong>Usethe resize propertytoprevent textareas from being resized(disable the"grabber"inthe bottom right corner):</p>
<form>
<textarea>Some text...</textarea>
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
استایل دهی Select Menu
منو های SELECT از مواردی هستند که می توانند استایل دهی شوند. به این منو نگاه کنید:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
select {
width:100%;
padding:16px20px;
border:none;
border-radius:4px;
background-color:#f1f1f1;
}
</style>
</head>
<body>
<p>Astyled select menu.</p>
<form>
<select id="country"name="country">
<option value="au">Australia</option>
<option value="ca">Canada</option>
<option value="usa">USA</option>
</select>
</form>
</body>
</html>
|
مشاهده ی خروجی در JSBin
استایل دهی دکمه ها
دکمه ها نیز قابل استایل دهی هستند:
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
|
<!DOCTYPEhtml>
<html>
<head>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color:#4CAF50;
border:none;
color:white;
padding:16px32px;
text-decoration:none;
margin:4px2px;
cursor:pointer;
}
</style>
</head>
<body>
<p>Styled input buttons.</p>
<input type="button"value="Button">
<input type="reset"value="Reset">
<input type="submit"value="Submit">
</body>
</html>
|
مشاهده ی خروجی در JSBin
فرم های واکنش گرا
در دوره ی CSS پیشرفته یاد خواهیم گرفت که با استفاده از media query ها فرم هایمان را واکنش گرا کنیم تا در گوشی های همراه نیز به خوبی نمایش داده شوند:
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
116
117
118
119
120
|
<!DOCTYPEhtml>
<html>
<head>
<style>
* {
box-sizing:border-box;
}
input[type=text], select, textarea {
width:100%;
padding:12px;
border:1pxsolid#ccc;
border-radius:4px;
resize:vertical;
}
label {
padding:12px12px12px0;
display:inline-block;
}
input[type=submit] {
background-color:#4CAF50;
color:white;
padding:12px20px;
border:none;
border-radius:4px;
cursor:pointer;
float:right;
}
input[type=submit]:hover {
background-color:#45a049;
}
.container {
border-radius:5px;
background-color:#f2f2f2;
padding:20px;
}
.col-25 {
float:left;
width:25%;
margin-top:6px;
}
.col-75 {
float:left;
width:75%;
margin-top:6px;
}
/* Clear floats after the columns */
.row:after {
content:"";
display:table;
clear:both;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width:100%;
margin-top:0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window tosee the effect.When the screen isless than600pxwide,make the two columns stack on top of eachother instead of next toeachother.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text"id="fname"name="firstname"placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text"id="lname"name="lastname"placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country"name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject"name="subject"placeholder="Write something.."style="height:200px"></textarea>
</div>
</div>
<div class="row">
<input type="submit"value="Submit">
</div>
</form>
</div>
</body>
</html>
|
مشاهده ی خروجی در JSBin
امیدوارم از این قسمت لذت برده باشید.
منبع: روکسو
چطور از فشرده ساز Winrar استفاده کنیم؟