نوشتن نظر کلیک کنید

CSS – فرم‌ها (Forms)

آخرین بروزرسانی: ۴ فروردین ۱۴۰۳

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

CSS می‌تواند برای زیباسازی فرم‌ها استفاده شود. شما می‌توانید از CSS برای تغییر ظاهر عناصر فرم مانند فیلدهای متنی، چک باکس‌ها، دکمه‌های رادیویی، منوهای انتخاب و دکمه‌های ارسال استفاده کنید.

بخش‌های زیر به بررسی برخی از روش‌های متداول CSS برای زیباسازی فرم‌ها می‌پردازد:

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

<form>
   <input type="text" id="username" name="username" placeholder="Username">
   <input type="password" id="password" name="password" placeholder="password">
   <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
   <input type="submit" value="Submit">
</form>

در زیر روش‌ها و ویژگی‌های متداول CSS که برای زیباسازی فرم‌های HTML می‌توانید استفاده کنید آمده است:

Font and Text Styling

در این بخش، توضیح داده می‌شود که چگونه می‌توان از ویژگی‌های CSS مانند font-family، font-size، color و text-align برای استایل دادن به متن داخل عناصر فرم استفاده کرد.

به عنوان مثال، در کد زیر نشان داده شده است که چگونه می‌توان از این ویژگی‌ها برای استایل دادن به فیلدهای متنی (input[type=”text”] و input[type=”password”]) و تکست‌آریا (textarea) استفاده کرد:

input[type="text"],
input[type="password"],
textarea {
   font-family: Arial, sans-serif;
   font-size: 16px;
   color: blue;
}

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

در ادامه، یک مثال نشان داده شده است که این استایل‌ها را بر روی یک فرم HTML اعمال می‌کند:

<html>
<head>
<style>
   input[type="text"],
   input[type="password"],
   textarea {
      font-family: Arial, sans-serif;
      font-size: 16px;
      color: blue;
   }
   label{
      color:brown;
   }
   form{
      display: grid;
   }
</style>
</head>
<body>
   <h2>Font and Text Styling</h2>
   <form>
      <input type="text" id="username" name="username" placeholder="Username">
      <input type="password" id="password" name="password" placeholder="password">
      <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
      <input type="submit" value="Submit">
   </form>   
</body>
</html>

در این مثال، فونت، اندازه فونت و رنگ متن فیلدها و تکست‌آریا تعیین شده و برچسب‌ها با رنگ قهوه‌ای استایل داده شده‌اند. همچنین، از ویژگی CSS display: grid برای استایل‌دهی به بخش‌های فرم استفاده شده است.

Styling Element Borders and Backgrounds

در این بخش، توضیح داده می‌شود که چگونه می‌توان با استفاده از ویژگی‌های CSS مانند border، background-color و border-radius، حاشیه‌ها و پس‌زمینه‌های عناصر فرم را کنترل کرد.

input[type="text"],
input[type="password"],
textarea {
   border: 1px solid red;
   background-color: antiquewhite;
   border-radius: 5px;
}

در این مثال، حاشیه فیلدها و تکست‌آریا با رنگ قرمز تعیین شده و پس‌زمینه آن‌ها با رنگ antiquewhite استایل شده‌اند. همچنین، با استفاده از ویژگی border-radius، گوشه‌های فیلدها و تکست‌آریا گرد شده‌اند.

در ادامه، یک مثال نشان داده شده است که این استایل‌ها را بر روی یک فرم HTML اعمال می‌کند:

<html>
<head>
<style>
   input[type="text"],
   input[type="password"],
   textarea {
      border: 1px solid red;
      background-color: antiquewhite;
      border-radius: 5px;
   }
   label{
         color:brown;
   }
   form{
      display: grid;
   }
</style>
</head>
<body>
   <h2>Styling Form Element Borders and Backgrounds</h2>
   <form>
      <input type="text" id="username" name="username" placeholder="Username">
      <input type="password" id="password" name="password" placeholder="password">
      <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
      <input type="submit" value="Submit">
   </form>   
</body>
</html>

در این مثال، فیلدها و تکست‌آریا با حاشیه‌های قرمز و پس‌زمینه antiquewhite استایل شده‌اند. همچنین، برچسب‌ها با رنگ قهوه‌ای استایل داده شده‌اند و از ویژگی CSS display: grid برای استایل‌دهی به بخش‌های فرم استفاده شده است.

Using Padding and Margins

در این بخش، توضیح داده می‌شود که چگونه می‌توان از ویژگی‌های CSS مانند padding و margin برای تنظیم فضای داخلی و پیرامونی عناصر فرم استفاده کرد.

ویژگی padding برای تنظیم فضای داخلی عناصر فرم و ویژگی margin برای تنظیم فضای پیرامونی عناصر فرم استفاده می‌شود. در مثال زیر، این ویژگی‌ها بر روی فیلدهای متنی (input[type=”text”] و input[type=”password”]) و تکست‌آریا (textarea) تنظیم شده‌اند:

input[type="text"],
input[type="password"],
textarea {
   border: 1px solid red;
   background-color: antiquewhite;
   border-radius: 5px;
   padding: 10px;
   margin: 5px 0;
}

در این مثال، padding با مقدار 10px برای فضای داخلی عناصر فرم و margin با مقدار 5px برای فضای پیرامونی عناصر فرم تنظیم شده است.

در ادامه، این استایل‌ها را بر روی یک فرم HTML اعمال می‌کنیم:

<html>
<head>
<style>
   input[type="text"],
   input[type="password"],
   textarea {
      border: 1px solid red;
      background-color: antiquewhite;
      border-radius: 5px;
      padding: 10px;
      margin: 5px 0;
   }
   label{
         color:brown;
   }
   form{
      display: grid;
   }
</style>
</head>
<body>
   <h2>Using Padding and Margins In Forms</h2>
   <form>
      <input type="text" id="username" name="username" placeholder="Username">
      <input type="password" id="password" name="password" placeholder="password">
      <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
      <input type="submit" value="Submit">
   </form>   
</body>
</html>

در این مثال، فضای داخلی و پیرامونی فیلدها با استفاده از padding و margin تنظیم شده و به صورت گریدی نمایش داده شده است.

Focus Styles

در این بخش، توضیح داده می‌شود که چگونه می‌توان با استفاده از pseudo-class :focus در CSS، استایل‌های مربوط به زمانی که عناصر فرم در حالت فوکوس قرار می‌گیرند را تعیین کرد.

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

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

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
  border: 2px solid #007bff;
}

در این استایل، زمانی که یک فیلد متنی یا فیلد رمز عبور یا تکست‌آریا در حالت فوکوس قرار می‌گیرد، حاشیه آن با رنگ آبی (با کد HEX #007bff) و با ضخامت 2 پیکسل قرار می‌گیرد.

در ادامه، این استایل را بر روی یک فرم HTML اعمال می‌کنیم:

<html>
<head>
<style>
   input[type="text"],
   input[type="password"],
   textarea {
      border: 1px solid red;
      background-color: antiquewhite;
      border-radius: 5px;
      padding: 10px;
      margin: 5px 0;
   }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
      border: 2px solid #007bff;
   }
   label{
      color:brown;
   }
   form{
      display: grid;
   }
</style>
</head>
<body>
   <h2>Focus Styling In Forms</h2>
   <p>Place the mouse in each of the input fields to see effect of focus styling</p>
   <form>
      <input type="text" id="username" name="username" placeholder="Username">
      <input type="password" id="password" name="password" placeholder="password">
      <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
      <input type="submit" value="Submit">
   </form>   
</body>
</html>

در این مثال، زمانی که به هرکدام از فیلدها کلیک کرده و فوکوس روی آن قرار می‌گیرد، حاشیه آن با رنگ آبی نشان داده می‌شود.

Button Styling

در این بخش، توضیح داده شده است که چگونه می‌توان با استفاده از CSS، استایل دکمه‌های فرم را تغییر داد. می‌توانید رنگ پس‌زمینه دکمه، رنگ متن، و افکت‌های hover را تغییر دهید.

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

input[type="submit"] {
   background-color: #007bff;
   color: #fff;
   padding: 10px 20px;
   border: none;
   cursor: pointer;
}

input[type="submit"]:hover {
   background-color: #0056b3;
}

background-color: رنگ پس‌زمینه دکمه تعیین شده است که در اینجا آبی با کد HEX #007bff است.
color: رنگ متن دکمه تعیین شده است که سفید می‌باشد.
padding: حاشیه داخلی دکمه تعیین شده است.
border: حاشیه دکمه حذف شده است.
cursor: نوع ماوس در حالت hover به pointer تغییر داده شده است.

وقتی موس را روی دکمه می‌برید، رنگ پس‌زمینه دکمه به #0056b3 تغییر می‌کند.

در ادامه، این استایل‌ها را بر روی یک فرم HTML اعمال کرده‌ایم:

<html>
<head>
<style>
   input[type="text"],
   input[type="password"],
   textarea {
      border: 1px solid red;
      background-color: antiquewhite;
      border-radius: 5px;
      padding: 10px;
      margin: 5px 0;
   }
   input[type="submit"] {
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
   }
   
   input[type="submit"]:hover {
      background-color: #0056b3;
   }
   label{
         color:brown;
   }
   form{
      display: grid;
   }
</style>
</head>
<body>
   <h2>Form Button Styling</h2>
   <form>
      <input type="text" id="username" name="username" placeholder="Username">
      <input type="password" id="password" name="password" placeholder="password">
      <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
      <input type="submit" value="Submit">
   </form>   
</body>
</html>

در این مثال، دکمه “Submit” با رنگ پس‌زمینه آبی و متن سفید و با یک حاشیه داخلی پد 10px و حاشیه بیرونی مارجین 5px در هر سمت استایل شده است. همچنین زمانی که موس روی دکمه حرکت می‌کند، رنگ پس‌زمینه آن به آبی تیره تغییر می‌یابد.

Checkbox and Radio Button Styling

در این بخش، توضیح داده می‌شود که چگونه می‌توان با استفاده از CSS، استایل‌دهی به دکمه‌های انتخاب (checkbox) و دکمه‌های رادیویی (radio button) را انجام داد تا زیبایی بصری بیشتری به آن‌ها ببخشیم.

دکمه‌های انتخاب و دکمه‌های رادیویی برای استایل‌دهی نسبتاً دشوار هستند، اما با استفاده از CSS می‌توان آن‌ها را جذاب‌تر نمایان کرد.

در اینجا یک استایل ساده برای دکمه‌های انتخاب و دکمه‌های رادیویی نشان داده شده است:

input[type="checkbox"],
input[type="radio"] {
   margin-right: 5px;
   vertical-align: middle; 
}

این استایل، حاشیه‌ای (margin) به سمت راست اضافه می‌کند تا فاصله مناسبی بین دکمه‌های انتخاب و رادیویی ایجاد شود. همچنین، با استفاده از خاصیت vertical-align، دکمه‌های انتخاب و رادیویی در یک خط قرار می‌گیرند.

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

<html>
<head>
<style>
   form {
      max-width: 300px;
      margin: 0 auto;
   }
   label {
      display: block;
      margin-bottom: 5px;
      font-size: 20px;
      color: red;
   }
   input[type="radio"], input[type="checkbox"] {
      margin-right: 5px;
      vertical-align: middle; 
   }
</style>
</head>
<body>
   <form>
      <label>Radio Buttons: </label>
      <input type="radio" name="gender" value="male"> Male
      <input type="radio" name="gender" value="female"> Female 
      
      <label>Checkboxes:</label>

      <input type="checkbox" name="lang" value="html"> HTML
      <input type="checkbox" name="lang" value="css"> CSS
      <input type="checkbox" name="lang" value="bootstrap"> Bootstrap
   </form>
</body>
</html>

در این مثال، دکمه‌های انتخاب (checkbox) و دکمه‌های رادیویی (radio button) در یک فرم HTML با استفاده از استایل‌های CSS قرار گرفته‌اند.

Form Layout

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

.form-container {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
}

در اینجا توضیحاتی در مورد اجزای CSS کد ارائه شده و نحوه استفاده از آنها در ظاهر فرم آورده شده است:

.form-container: این کلاس برای ظاهر بیرونی فرم استفاده می‌شود. آن‌را با display: grid به یک شبکه تبدیل می‌کند، اینجا می‌توانید از grid-template-columns برای تعیین تعداد و اندازه ستون‌ها و gap برای فاصله بین آنها استفاده کنید.
input[type="text"], input[type="password"]: این استایل‌ها ویژگی‌های مربوط به فیلدهای متنی فرم را تعیین می‌کنند، مانند عرض، حاشیه، و شکل گردی.
button[type="submit"]: این استایل برای دکمه ارسال فرم استفاده می‌شود. آن‌را به طور کامل عرض صفحه کنید و از ویژگی‌هایی مانند رنگ پس زمینه و حاشیه برای ظاهر بهتر استفاده می‌کند. همچنین یک اثر هوور (hover effect) برای زمانی که موس بر روی آن حرکت می‌کند، تعریف شده است.

این CSS و HTML با همکاری، یک فرم ساده اما جذاب و قابل استفاده برای ورود کاربران به وبسایت ایجاد می‌کنند.

<html>
<head>
<style>
   .form-container {
      max-width: 300px;
      margin: 0 auto;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f2c3ee;
   }
   .form-container input[type="text"],
   .form-container input[type="password"] {
      width: 100%;
      padding: 5px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 3px;
   }
   .form-container button[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color: #15a415;
      color: #fff;
      border: none;
      border-radius: 3px;
   }
   .form-container button[type="submit"]:hover {
      background-color: #e62b1e;
   }
   h1 {
      color: #15a415;
      text-align: center;
   }
   h2 {
      color: #e62b1e;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="form-container">
      <h1>Tutorialspoint</h1>
      <h2>Login</h2>
      <form>
         <label for="username">Username:</label>
         <input type="text" id="username" name="username" placeholder="username" required>

         <label for="password">Password:</label>
         <input type="password" id="password" name="password" placeholder="password" required>

         <button type="submit">Login</button>
      </form>
   </div>
</body>
</html>

Box-sizing

این کد HTML و CSS دو نمونه از یک فرم را نشان می‌دهد، یکی با استفاده از ویژگی box-sizing و دیگری بدون استفاده از آن. ویژگی box-sizing به شما امکان می‌دهد تا اندازه کل المان (عرض و ارتفاع) را به‌طور متناسب با همه اجزای آن تعیین کنید، حتی اگر حاشیه‌ها و حاشیه دور آن‌ها وجود داشته باشد.

در اینجا توضیحاتی در مورد نمونه‌های HTML و CSS ارائه شده است:

.box-sizing-element input,textarea,button: این استایل‌ها برای المان‌های فرم داخل .box-sizing-element تعریف شده‌اند. آن‌ها به طور کامل عرض المان‌ها را با width: 100% تنظیم کرده و با padding: 10px فضای داخلی المان‌ها را تنظیم می‌کنند. ویژگی box-sizing: border-box; طول و عرض المان‌ها را با در نظر گرفتن حاشیه و حاشیه‌ها تعیین می‌کند.
.normal-element input,textarea,button: این استایل‌ها نیز برای المان‌های فرم داخل .normal-element تعریف شده‌اند. با این وجود، این المان‌ها از ویژگی box-sizing: border-box; استفاده نمی‌کنند و به‌طور پیش‌فرض مقدار content-box را دارند.
button: این استایل‌ها ویژگی‌های دکمه ارسال فرم را تعیین می‌کنند، از جمله رنگ پس‌زمینه، رنگ متن، حاشیه، و شکل ماوس هنگامی که بر روی آن حرکت می‌کند.

با استفاده از این ویژگی، اندازه المان‌ها در دو نمونه فرم به طور یکسان تنظیم شده‌اند. این کار باعث می‌شود فرم‌ها به طور یکنوا در تمام مرورگرها و بر روی تمام دستگاه‌ها به نمایش درآیند.

<!DOCTYPE html>
<head>
<style>
   .box-sizing-element input,textarea,button  {
      width: 100%;
      padding: 10px;
      margin: 0;
      box-sizing: border-box;
   }
   .normal-element input,textarea,button {
      width: 100%;
      padding: 10px;
      margin: 0;
   }
   button{
      background-color: #04AA6D;
      border: none;
      color: white;
      padding: 16px 32px;
      text-decoration: none;
      margin: 4px 2px;
      cursor: pointer;
   }
</style>
</head>
<body>
   <div class="normal-element">
      <h3>Without box-sizing</h3>
      <form>
         <input type="text" id="name" name="name" placeholder="Enter your name">
         <br>
         <input type="email" id="email" name="email" placeholder="Email id">
         <br>
         <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
         <br>
         <button type="submit" value="Submit">Submit</button>
      </form>
   </div>
   <div class="box-sizing-element">
      <h3>With box-sizing</h3>
      <form>
         <input type="text" id="name" name="name" placeholder="Enter your name">
         <br>
         <input type="text" id="email" name="email" placeholder="Email id">
         <br>
         <textarea id="message" name="message" rows="4" placeholder="Message"></textarea>
         <br>
         <button type="submit" value="Submit">Submit</button>
      </form>
   </div>
</body>
</html>

Fieldset and Legend

این قسمت نشان می‌دهد چگونه می‌توانید عناصر <fieldset> و <legend> را استایل دهید تا فرم‌های شما ظاهر جذاب‌تری داشته باشند.

در این کد HTML و CSS، قسمت‌های <fieldset> و <legend> به صورت زیر استایل شده‌اند:

form: این استایل برای تنظیم عرض فرم و قرارگیری آن در وسط صفحه استفاده شده است.
fieldset: این استایل شامل تنظیم حاشیه دور <fieldset>، شکل گردی گوشه‌ها، و پر کردن داخل آن است. حاشیه‌های <fieldset> کمی از رنگ #ccc و با شکل گردی 5px تعریف شده‌اند.
legend: استایل‌های مربوط به عنصر <legend> شامل تغییرات در فونت (ضخامت متوسط و رنگ) و تراز متن است. در این مثال، متن <legend> با رنگ سبز قرار گرفته است و در وسط قرار گرفته است.

این استایل‌ها باعث می‌شوند عناصر <fieldset> و <legend> در فرم‌های شما با زیبایی و سازماندهی بیشتر نمایش داده شوند.

<html>
<head>
<style>
   form {
      width : 300px;
      margin: 0 auto;
   }
   fieldset {
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
   }
   legend {
      font-weight: bold;
      text-align: center;
      color: rgb(15, 141, 15);
   }
</style>
</head>
<body>
   <form>
      <fieldset>
        <legend>Login</legend>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <br>
    
        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <input type="submit" value="Submit">
      </fieldset>
   </form>    
</body>
</html>

Full Width Input

این بخش نشان می‌دهد چگونه می‌توانید یک فیلد ورودی را به گونه‌ای تنظیم کنید که عرض آن به اندازه کامل از والد خود را بپذیرد. برای این کار، می‌توانید خاصیت width فیلد ورودی را برابر با 100٪ تنظیم کنید، به این ترتیب فیلد ورودی تمام عرض والد خود را اشغال خواهد کرد.

در کد ارائه شده، فیلد ورودی با کلاس full-width-input با استفاده از CSS به عرض 100٪ تنظیم شده است. همچنین اندازه فونت و رنگ متن فیلد ورودی نیز تغییر داده شده‌اند تا با ظاهر کلی فرم سازگار باشند.

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

<html>
<head>
<style>
   input.full-width-input {
      width: 100%;
      font-size: 16px;
      color: #545c53;
   } 
   label {
      font-weight: bold;
      font-size: 20px;
      color: #268219;
   }
</style>
</head>
<body>
   <form>
      <label for="email">Address: </label>
      <input type="text" id="email" name="email" class="full-width-input" placeholder="Enter address..." required>
   </form>
</body>
</html>

Colored Input

در این بخش نحوه افزودن یک رنگ پس زمینه به یک فیلد ورودی با استفاده از خاصیت background-color نشان داده شده است.

در کد ارائه شده، یک فیلد ورودی با کلاس colored-input طراحی شده است. این فیلد ورودی دارای عرض 100٪، اندازه فونت 16 پیکسل، و رنگ متن #545c53 می‌باشد. همچنین، یک حاشیه با ضخامت 3 پیکسل و رنگ مشخص (#22d90e) اطراف فیلد ورودی قرار داده شده است و رنگ پس‌زمینه آن نیز به رنگ #93ea88 تعیین شده است.

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

<html>
<head>
<style>
   input.colored-input {
      width: 100%;
      font-size: 16px;
      color: #545c53;
      padding: 15px;
      border: 3px solid #22d90e;
      background-color: #93ea88;
   } 
   label {
      font-weight: bold;
      font-size: 20px;
      color: #268219;
   }
</style>
</head>
<body>
   <form>
      <label for="add">Address: </label>
      <input type="text" id="add" name="add" class="colored-input" placeholder="Enter address..." required>
   </form>
</body>
</html>

Images In The Inputs

در این بخش، نحوه اضافه کردن یک آیکون به داخل یک فیلد ورودی رمز عبور به کمک خاصیت position در CSS نشان داده شده است.

کد ارائه شده یک فیلد ورودی رمز عبور را با یک آیکون قفل در سمت چپ نشان می‌دهد. این آیکون با استفاده از کلاس fas fa-lock از مجموعه آیکون‌های Font Awesome نمایش داده شده است.

در کد، یک کلاس با نام input-container به فیلد ورودی اضافه شده است که شامل خاصیت position: relative; است. این خاصیت به آیکون امکان قرارگیری دقیق درون فیلد ورودی را می‌دهد.

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

در نهایت، آیکون قفل با استفاده از کلاس password-icon و با اعمال خاصیت position: absolute; به سمت چپ فیلد ورودی قرار داده شده است. این آیکون با استفاده از خاصیت transform: translateY(-50%); به وسیلهٔ خاصیت top: 50%; در میانهٔ ارتفاع فیلد ورودی قرار می‌گیرد.

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
   .input-container {
      position: relative;
      width: 100%;
      margin-bottom: 20px;
   }
   input.password-input {
      width: 100%;
      font-size: 16px;
      color: #545c53;
      padding: 15px 15px 15px 40px;
      border: 2px solid #22d90e;;
   } 
   .password-icon {
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      font-size: 20px;
      color: #22d90e;
   }
</style>
</head>
<body>
   <form class="input-container">
      <i class="password-icon fas fa-lock"></i> 
      <input type="password" id="password" name="password" class="password-input" placeholder="password" required>
   </form>
</body>
</html>

Input With Animation

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

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

در کد، وقتی فیلد ورودی فوکوس می‌شود (input.password-input:focus)، عرض آن به 100% تغییر می‌کند که به این ترتیب عرض آن به صورت انیمیشنی افزایش پیدا می‌کند.

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

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<style>
   .input-container {
      position: relative;
      width: 100%;
      margin-bottom: 20px;
   }
   input.password-input {
      width: 50%;
      font-size: 16px;
      color: #545c53;
      padding: 15px 15px 15px 40px;
      border: 2px solid #22d90e;;
   } 
   input.password-input:focus {
      width: 100%;
   }
   .password-icon {
      position: absolute;
      top: 50%;
      left: 15px;
      transform: translateY(-50%);
      font-size: 20px;
      color: #22d90e;
   }
</style>
</head>
<body>
   <form class="input-container">
      <i class="password-icon fas fa-lock"></i> 
      <input type="password" id="password" name="password" class="password-input" placeholder="password" required>
   </form>
</body>
</html>

Styling Textareas

در این بخش، نحوه استایل دهی به فیلد‌های متنی (Textarea) نشان داده شده است. این فیلدها به کاربران اجازه می‌دهند متن بلندتری را مانند نظرات یا پیام‌ها وارد کنند.

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

width: 100%;: این خاصیت عرض فیلد متنی را به اندازه 100 درصد از پدر آن تعیین می‌کند، به این ترتیب فیلد به طور خودکار عرض کامل پدرش را پر می‌کند.
height: 100px;: این خاصیت ارتفاع فیلد متنی را 100 پیکسل تعیین می‌کند.
font-size: 16px;: اندازه قلم متن در فیلد متنی 16 پیکسل است.
color: #938b8b;: رنگ متن درون فیلد متنی تعیین شده است.
padding: 15px;: پدینگ (فضای داخلی) برای متن درون فیلد تعیین شده است.
border: 3px solid #22d90e;: حاشیه (Border) با رنگ و ضخامت مشخص شده تعیین شده است.

همچنین، وقتی فیلد متنی فوکوس می‌شود (textarea:focus)، یک سایه (box-shadow) به آن اضافه می‌شود تا برجستگی آن را نشان دهد و کاربر را در جلوی فیلد متنی تمرکز قرار دهد.

<html>
<head>
<style>
   textarea {
      width: 100%;
      height: 100px;
      font-size: 16px;
      color:  #938b8b;
      padding: 15px;
      border: 3px solid #22d90e;
   } 
   textarea:focus {
      box-shadow: 0 0 10px #db59ab;  
   }  
</style>
</head>
<body>
   <form>
      <textarea>Enter text here....</textarea>
   </form>
</body>
</html>

Styling Dropdown Menus

در این بخش، نحوه استایل دهی به منوهای کشویی (Dropdown Menus) نشان داده شده است. این منوها به طور پیش فرض پنهان هستند و زمانی که کاربر بر روی عنصر مقداردهی کننده کلیک می‌کند، منوی کشویی باز شده و لیست موارد نمایش داده می‌شود.

کد ارائه شده یک منوی کشویی را نشان می‌دهد که به کاربر امکان می‌دهد یک زبان را انتخاب کند. این منوی کشویی دارای خواص زیر است:

width: 100%;: این خاصیت عرض منوی کشویی را به اندازه 100 درصد از پدر آن تعیین می‌کند، بنابراین منو به طور خودکار عرض کامل پدرش را پر می‌کند.
font-size: 16px;: اندازه قلم متن منوی کشویی 16 پیکسل است.
color: #000000;: رنگ متن داخل منوی کشویی تعیین شده است.
padding: 15px;: پدینگ (فضای داخلی) برای متن داخل منو تعیین شده است.
border: 3px solid #147309;: حاشیه (Border) با رنگ و ضخامت مشخص شده تعیین شده است.
background-color: #93ea88;: رنگ پس‌زمینه منوی کشویی تعیین شده است.

<html>
<head>
<style>
   select {
      width: 100%;
      font-size: 16px;
      color: #000000;
      padding: 15px;
      border: 3px solid #147309;
      background-color: #93ea88;
   }
</style>
</head>
<body>
   <form>
      <select aria-placeholder="Select Language">
         <option value="lang" disabled selected>Select Language</option>
         <option value="html">HTML</option>
         <option value="css">CSS</option>
         <option value="bootstrap">Bootstrap</option>
      </select>
   </form>
</body>
</html>

Responsive Form Layout

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

در اینجا توضیحاتی در مورد اجزای مهم این قالب فرم آورده شده است:

.container: این کلاس برای ایجاد یک ظاهر با حداکثر عرض 400 پیکسل، مرکزی (وسط چین) با padding و border-radius مناسب و سایه‌زنی به‌کار می‌رود.
h1: برای عنوان اصلی فرم استفاده می‌شود و در مرکز قرار داده شده است.
label: برچسب‌ها برای هر فیلد ورودی اضافه می‌شوند و به‌عنوان راهنمایی برای کاربران عمل می‌کنند.
input[type="text"], input[type="email"], select, textarea: فیلدهای مختلف ورودی با padding، border، و background-color مناسب طراحی شده‌اند.
input[type="submit"]: دکمه ارسال فرم که با رنگ پس‌زمینه و متن، padding، border، font-size و border-radius زیبا سازی شده است.
input[type="radio"]: دکمه‌های رادیویی برای انتخاب جنسیت، با حاشیه‌ها و عمودی‌سازی‌های مناسب طراحی شده‌اند.

همچنین، از CSS برای ایجاد تغییرات هنگام هاور کردن بر روی دکمه ارسال (input[type="submit"]:hover) استفاده شده است تا بر روی عملکرد آن تأثیر بگذارد و آن را برجسته کند.

<html>
<head>
<style>
   .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      background-color: #c5e08e;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #34892b;
   }
   label {
      display: block;
      font-weight: bold;
      font-size: 15px;
      margin-bottom: 5px;
      color: #f25820;
   }
   input[type="text"],
   input[type="email"],
   select {
      width: 100%;
      padding: 15px;
      margin-bottom: 15px;
      border: 2px solid #ccc;
      border-radius: 10px;
      background-color: #eff5f5;
   }
   input[type="submit"] {
      width: 100%;
      padding: 10px;
      background-color: #216e2a;
      color: #fff;
      border: none;
      font-size: 20px;
      border-radius: 4px;
      cursor: pointer;
   }
   textarea {
      width: 100%;
      height: 100px;
      padding: 15px;
      margin-bottom: 15px;
      border: 2px solid #ccc;
      border-radius: 10px;
      background-color: #eff5f5;
   }
      input[type="radio"] {
      margin-right: 5px;
      vertical-align: middle; 
      margin-bottom: 10px;
   }
   input[type="submit"]:hover {
      background-color: #44d115;
      color: #000000;
   }
</style>
</head>
<body>
   <div class="container">
      <h1>Registration Form</h1>
      <form>
         <label for="name">Name:</label>
         <input type="text" id="name" name="name" placeholder="Enter Name..." required>

         <label for="email">Email:</label>
         <input type="email" id="email" name="email" placeholder="Enter Email Id..." required>
            
         <label for="email">Address:</label>
         <textarea>Address...</textarea>

         <label>Gender: </label>
         <input type="radio" name="gender" value="male"> Male
         <input type="radio" name="gender" value="female"> Female 
      
         <label for="gender">Langauges:</label>
         <select id="gender" name="gender">
            <option value="lang" disabled selected>Select Gender</option>
            <option value="male">Hindi</option>
            <option value="female">Marathi</option>
            <option value="other">English</option>
         </select>

         <input type="submit" value="Submit">
      </form>
   </div>
</body>
</html>

CSS – فرم‌ها (Forms)

Font and Text Styling

Styling Element Borders and Backgrounds

Using Padding and Margins

Focus Styles

Button Styling

Checkbox and Radio Button Styling

Form Layout

Box-sizing

Fieldset and Legend

Full Width Input

Colored Input

Images In The Inputs

Input With Animation

Styling Textareas

Styling Dropdown Menus

Responsive Form Layout

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

CSS – فرم‌ها (Forms)

Font and Text Styling

Styling Element Borders and Backgrounds

Using Padding and Margins

Focus Styles

Button Styling

Checkbox and Radio Button Styling

Form Layout

Box-sizing

Fieldset and Legend

Full Width Input

Colored Input

Images In The Inputs

Input With Animation

Styling Textareas

Styling Dropdown Menus

Responsive Form Layout

پست های مرتبط

مطالعه این پست ها رو از دست ندین!

Python – محدود کردن داده (MongoDB Limit)

Python – بروزرسانی (MongoDB Update)

Python – حذف کالکشن (MongoDB Drop Collection)

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید