कैसे करें - रजिस्टर फॉर्म
CSS के साथ रजिस्टर फॉर्म बनाने का तरीका जानें।
रजिस्टर करें
खाता बनाने के लिए कृपया इस फॉर्म को भरें।
एक खाता बनाकर आप हमारी शर्तों और गोपनीयता से सहमत होते हैं ।
क्या आपके पास पहले से एक खाता मौजूद है? साइन इन करें
रजिस्टर फॉर्म कैसे बनाएं
चरण 1) HTML जोड़ें:
इनपुट को प्रोसेस करने के लिए <form> एलीमेंट का इस्तेमाल करें। आप इसके बारे में हमारे PHP ट्यूटोरियल में अधिक जान सकते हैं । फिर प्रत्येक फ़ील्ड के लिए इनपुट (मिलान लेबल के साथ) जोड़ें:
उदाहरण
<form action="action_page.php">
<div
class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email"
id="email" required>
<label for="psw"><b>Password</b></label>
<input type="password"
placeholder="Enter Password" name="psw" id="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input
type="password" placeholder="Repeat Password" name="psw-repeat"
id="psw-repeat" required>
<hr>
<p>By creating an account you agree to
our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already
have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
चरण 2) सीएसएस जोड़ें:
उदाहरण
* {box-sizing: border-box}
/* Add padding to containers */
.container {
padding: 16px;
}
/* Full-width input fields */
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Overwrite default styles of hr */
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a
style for the submit/register button */
.registerbtn {
background-color:
#04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover
{
opacity:1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the
text of the "sign in" section */
.signin {
background-color:
#f1f1f1;
text-align: center;
}
युक्ति: HTML प्रपत्रों के बारे में अधिक जानने के लिए हमारे HTML प्रपत्र ट्यूटोरियल पर जाएँ।
टिप: तत्वों को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए हमारे सीएसएस फॉर्म ट्यूटोरियल पर जाएं।