చిత్రపై ఫారమ్ ఎలా సృష్టించాలి:

పూర్తి వెడల్పు చిత్రానికి ఫారమ్ జోడించడానికి ఎలా నేర్చుకోండాం.

చిత్రానికి ఫారమ్ జోడించడానికి ఎలా?

మొదటి చర్య - హైల్టెక్స్ జోడించండి:

<div class="bg-img">
  <form action="/action_page.php" class="container">
    <h1>Login</h1>
    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>
    <label for="psw"><b>పాస్వర్డ్</b></label>
    <input type="password" placeholder="పాస్వర్డ్ ప్రవేశపెట్టు" name="psw" అవసరం>
    <button type="submit" class="btn">లాగిన్</button>
  </form>
</div>

రెండవ చర్య - సిఎస్ఎస్ జోడించు:

బాడీ, హైటమ్ల్ {
  హైగ్త్: 100%;
}
* {
  బాక్స్-సైజింగ్: బార్డర్-బాక్స్;
}
.bg-img {
  /* ఉపయోగించే చిత్రం */
  బ్యాక్గ్రౌండ్-ఇమేజ్: url("img_nature.jpg");
  /* చిత్రం పొడవును నియంత్రించడం */
  మిన్-హైగ్త్: 380px;
  /* చిత్రాన్ని మధ్యకొలపడం మరియు తగినంతగా స్కేల్ చేయడం */
  బ్యాక్గ్రౌండ్-పోసిషన్: సెంటర్;
  బ్యాక్గ్రౌండ్-రిపీట్: నాన్-రిపీట్;
  బ్యాక్గ్రౌండ్-సైజ్: కవర్;
  పోసిషన్: రెలేటివ్;
}
/* ఫార్మ్ కంటైనర్ను స్టైల్స్ జోడించు */
.container {
  పోసిషన్: ఆబ్సూల్యూట్;
  రెయ్ట్: 0;
  మార్జిన్: 20px;
  మాక్స్-వెడల్పు: 300px;
  ప్యాడింగ్: 16px;
  బ్యాక్గ్రౌండ్-కలర్: వెండి;
}
/* పూర్తి వెడల్పు ఇన్‌పుట్ ఫీల్డ్స్ */
  input[type=text], input[type=password] {
  వెడల్పు: 100%;
  ప్యాడింగ్: 15px;
  మార్జిన్: 5px 0 22px 0;
  బార్డర్: నాన్;
  బ్యాక్గ్రౌండ్: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
  బ్యాక్గ్రౌండ్-కలర్: #ddd;
  ఆఉట్లైన్: నాన్;
}
/* సమర్పణ బటన్ను స్టైల్స్ అమర్చు */
.btn {
  బ్యాక్గ్రౌండ్-కలర్: #04AA6D;
  రంగు: వెండి;
  ప్యాడింగ్: 16px 20px;
  బార్డర్: నాన్;
  కర్సర్: పాయింటర్;
  వెడల్పు: 100%;
  opacity: 0.9;
}
.btn:hover {
  opacity: 1;
}

亲自试一试