কম্পিউটার

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ইনলাইন ফর্ম তৈরি করবেন?


CSS −

দিয়ে একটি রেসপন্সিভ ইনলাইন ফর্ম তৈরি করার কোড নিচে দেওয়া হল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
   font-family: Arial, Helvetica, sans-serif;
}
* {
   box-sizing: border-box;
}
form {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
}
form label {
   margin: 5px 10px 5px 0;
}
form input {
   margin: 5px 10px 5px 0;
   padding: 10px;
}
form button {
   padding: 10px 20px;
   font-size: 20px;
   background-color: rgb(39, 22, 141);
   border: 1px solid #ddd;
   color: white;
   cursor: pointer;
   font-weight: bolder;
   border-radius: 4px;
}
form button:hover {
   background-color: rgb(113, 65, 225);
}
@media (max-width: 800px) {
   form input {
      margin: 10px 0;
   }
   form {
      flex-direction: column;
      align-items: stretch;
   }
}
</style>
</head>
<body>
<h1>Responsive Inline Form Example</h1>
<form>
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter email" name="email" />
<label for="pass">Password:</label>
<input type="password" id="pass" placeholder="Enter password" name="pass"/>
<button type="submit">Submit</button>
</form>
</body>
</html>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ইনলাইন ফর্ম তৈরি করবেন?

ব্রাউজার উইন্ডোর আকার পরিবর্তন করার সময় উপাদানগুলি নিম্নরূপ রিফ্লো হবে -

কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ইনলাইন ফর্ম তৈরি করবেন?


  1. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল টাইপোগ্রাফি তৈরি করবেন?

  2. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল ভাসমান উপাদান তৈরি করবেন?

  3. কিভাবে CSS দিয়ে প্রতিক্রিয়াশীল প্রশংসাপত্র তৈরি করবেন?

  4. কিভাবে CSS দিয়ে একটি প্রতিক্রিয়াশীল ব্লগ লেআউট তৈরি করবেন?