1. صفحه اصلی
  2. مقالات
  3. استایل دهی فرم ها در CSS

استایل دهی فرم ها در CSS

امیر زوارمی امیر زوارمی
09 خرداد 1398
درسنامه درس 29 از سری صفر تا صد CSS
CSS-form-styling

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

همانطور که میدانید می توان ظاهر فرم های HTML را، مانند عناصر دیگر HTML، با استفاده از CSS بسیار زیباتر نشان داد. کد زیر یک فرم عادی HTML بدون استایل دهی است:

<!DOCTYPE html>
<html>
<body>

<h3>Using CSS to style 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 اضافه کنیم می توانیم چنین کد زیبایی را پدید بیاوریم:

<!DOCTYPE html>
<html>
<style>
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  width: 100%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  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 to style 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 مناسب بدهیم:

<!DOCTYPE html>
<html>
<head>
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>

<p>A full-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 استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  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 نیز اضافه کنیم تا از هم کمی فاصله بگیرند:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  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 نیز استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid red;
  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 استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: none;
  border-bottom: 2px solid red;
}
</style>
</head>
<body>

<p>Text fields with only a bottom 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 میتوانیم رنگ متن درون آن فیلد را مشخص کنیم. به طور مثال به کد زیر دقت کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  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 شدن یک عنصر باید به فیلد ما رنگ پس زمینه ی آبی اضافه کند:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid #555;
  outline: none;
}

input[type=text]:focus {
  background-color: lightblue;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a background color to the 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 آن را پر رنگ تر کن تا کاربر متوجه فعال بودن فیلد بشود:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a black border color to the 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 به آن حالت انیمیشن بدهیم:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.9s;
  transition: 0.9s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>

<p>In this example, we use the :focus selector to add a black border color to the text field when it gets focused (clicked on):</p>
<p>Note that we have added the CSS transition property to animate the border color (takes 0.5 seconds to change 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 موقعیت دهی کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

در کد بالا باید توجه داشته باشید که padding از سمت چپ را زیاد داده ایم تا نوشته ی جست و جو روی آیکون نوشته نشود! حالا نوبت انیمیشن است. ساده ترین حالت ایجاد انیمیشن در فیلد ها این است که عرض آن ها را کوتاه قرار دهید و سپس در کد ها به مرورگر بگویید اگر فیلد وارد حالت Focus شد عرض اش را زیاد کن و در عین حال به آن خاصیت transition را نیز بدهیم:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
  width: 130px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  background-image: url('https://www.w3schools.com/css/searchicon.png');
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-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 استفاده کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
textarea {
  width: 100%;
  height: 150px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-size: 16px;
  resize: none;
}
</style>
</head>
<body>

<p><strong>Tip:</strong> Use the resize property to prevent textareas from being resized (disable the "grabber" in the bottom right corner):</p>

<form>
  <textarea>Some text...</textarea>
</form>

</body>
</html>

مشاهده ی خروجی در JSBin

استایل دهی Select Menu

منو های SELECT از مواردی هستند که می توانند استایل دهی شوند. به این منو نگاه کنید:

<!DOCTYPE html>
<html>
<head>
<style> 
select {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 4px;
  background-color: #f1f1f1;
}
</style>
</head>
<body>

<p>A styled 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

استایل دهی دکمه ها

دکمه ها نیز قابل استایل دهی هستند:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=button], input[type=submit], input[type=reset] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  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 ها فرم هایمان را واکنش گرا کنیم تا در گوشی های همراه نیز به خوبی نمایش داده شوند:

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  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 to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</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

امیدوارم از این قسمت لذت برده باشید.

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

CSS چیست؟

1

Selector ها در زبان CSS

2

افزودن کدهای CSS به سند HTML

3

قالب های رنگی در CSS

4

Background (پس زمینه) در CSS

5

حاشیه ها (Borders) در زبان CSS

6

Margin ها در زبان CSS

7

کار با Padding ها در CSS

8

Outline ها در زبان CSS

9

استایل دهی به متن ها در زبان CSS

10

کار با فونت ها در زبان CSS

11

آیکون ها و لینک ها در CSS

12

استایل دهی لیست ها در CSS

13

استایل دهی جداول در CSS

14

خاصیت display در زبان CSS

15

انواع position در زبان CSS

16

ویژگی overflow در زبان CSS

17

چطور با float و clear در CSS کار کنیم؟

18

روش های ترازبندی عناصر

19

سلکتورهای پیشرفته CSS

20

شبه کلاس ها (Pseudo-class) در CSS

21

شبه عناصر (Pseudo-element) در CSS

22

آشنایی با مفهوم opacity در CSS

23

ساخت انواع منو در CSS

24

منوهای آبشاری (Drop Down) در CSS

25

ایجاد گالری تصاویر در CSS

26

کار با Sprite ها در CSS

27

سلکتورهای Attribute در CSS

28

استایل دهی فرم ها در CSS

29

شمارنده ها و واحدهای اندازه گیری در CSS

30

بررسی مفهوم Specificity در زبان CSS

31
نویسنده شوید
دیدگاه‌های شما (5 دیدگاه)

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

hadis
10 تیر 1401
بسیار عالی ممنون از شما مشکلم حل شد

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

روکسو
11 مرداد 1401
خوشحالیم که این مقاله به رفع مشکلتون کمک کرده.

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

امیر عباس
25 فروردین 1401
عالی ممنون

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

روکسو
12 اردیبهشت 1401
قدردان حمایت شما هستیم.

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

رضا
20 شهریور 1399
سلام یه سوالی داشتم اگر بخوایم استایل کل فورم های سایتو عض کنیم باید چکار کنیم

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

رضا
20 شهریور 1399
سلام

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

روکسو
11 مرداد 1401
سلام به شما

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

یوسف
20 شهریور 1399
عالییییییی.........

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

روکسو
11 مرداد 1401
ممنونیم

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

دوره‌های آموزشی مرتبط
VIP
آموزش HTML و CSS از صفر تا صد + پروژه محور
آموزش HTML و CSS از صفر تا صد + پروژه محور
265000 تومان
مقالات مرتبط
ویژگی z-index چیست و چگونه کار می کند؟
ساخت لودینگ فقط با CSS
ساخت لودینگ فقط با CSS
15 اردیبهشت 1401
طراحی ریسپانسیو با CSS
آموزش جامع و کامل کار با CSS Grid
CSS با طعم تاکو؛ آموزش ساخت ساندویچ تاکو با HTML و CSS
آخرین سوالات کاربران
alidniry در 8 ماه قبل پرسیده:
خطای مسیردهی در HTML و css
ما را دنبال کنید
اینستاگرام روکسو تلگرام روکسو ایمیل و خبرنامه روکسو