BrodScholl
☰
Responsive Registration Form By using HTML,CSS & Javascript
Hello friend, I hope you are doing great. Today you will learn how to create an Responsive Registration Form using HTML CSS and Javascript.
The interesting thing about this form is that when the user moves ahead without filling any field, it gives an alert message saying 'Field This Field'
And in this, when the cursor is moved on the button, the background color of the button automatically changes.
Basic Style
Shape : The shape of this box is a slightly rounded rectangle, giving it a soft and modern look. Color : This button uses white backgroun color .
Output
Other
HTML
< !DOCTYPE html>
< html lang ="en" >
< head>
< meta charset ="UTF-8" >
< meta name ="viewport" content
="width=device-width, initial-scale=1.0" >
< title> Image Slider </title>
< /head>
< body>
<div class ="container" >
<form id ="registrationForm" onsubmit ="return validateForm()" >
<h2> Registration Form</h2>
<div class ="form-group" >
<label for ="username" >Username:</label>
<input type ="text"id ="username" name ="username" required >
<span class ="error"id ="usernameError" ></span>
</div >
<div class ="form-group" >
<label for ="email" > Email:</label>
<input type ="email"id ="email" name ="email" required >
<span class ="error"id ="emailError" ></span>
</div >
<div class ="form-group" >
<label for ="password" > Password:</label>
<input type ="password"id ="password" name ="confirmPassword" required >
<span class ="error"id ="confirmPasswordError" ></span>
</div >
<button type ="submit" >Submit </button>
</form >
</div >
</body>
</html>
CSS
/*Style the box items */
body {
backgroun-color : #f4f4f4 ;
height : 100vh ;
font-family : sans-serif ;
margin : 0 ;
align-items : center ;
display : flex ;
justify-content : center ;
}
container {
background-color : #fff ;
width : 320px ;
padding : 20px ;
overflow : hidden ;
box-shadow : 0px 5px 12px rgba(0, 0, 0, 0.2) ;
border-radius : 9px ;
}
h2 {
text-align : center ;
}
form-group {
margin-bottom : 15px ;
}
label {
display : block ;
margin-bottom : 5px ;
}
input {
width : 90% ;
padding : 10px ;
border-radius : 5px ;
border : 1px solid #ccc ;
}
error {
color : red ;
font-size : 12px ;
}
button {
width : 100% ;
padding : 10px ;
backgroun-color : #5cb85c ;
color : #fff ;
cursor : pointer ;
border-radius : 5px ;
}
Javascript
/*JavaScript*/
<script>
function nextSlide() {
let isValid=true ;
document.getElementById('usernameError' ).textContent = '' ;
document.getElementById('emailError' ).textContent = '' ;
document.getElementById('passwordError' ).textContent = '' ;
document.getElementById('confirmPasswordError' ).textContent = '' ;
const username document.getElementById ('username' ) .value.trim() ;
const email document.getElementById ('email' ) .value.trim() ;
const password document.getElementById ('password' ) .value.trim() ;
const confirmPassword document.getElementById ('confirmPassword' ) .value.trim() ;
}
if ('username.length < 3' ) {
document.getElementById('usernameError' ).textContent = 'Username must be at least 3 characters long.' ;
inValid=false ;
}
</script>
if ('password.length < 6' ) {
document.getElementById('passwordError' ).textContent = 'Password must be at least 6 characters long.' ;
inValid=false ;
}
if ('password !== confirmPassword' ) {
document.getElementById('confirmPasswordError' ).textContent = 'Passwords do not match.' ;
inValid=false ;
}
</script>
Download Files
BrodSchool
Jagatpur,Amresh Kumar (Founder ) Phone: +91 9198 26 3500Email: suportucracker@gmail.com
