Annoying Form Code | Html
- The CSS code: The CSS code sets styles for the form and its elements. It sets the font-family, font-size, borders, width, height, background, line-height, padding, and color for the form. It also sets styles for the form elements such as margin, border-radius, box-shadow, background-color, font-weight, and so on.
- The HTML code: The HTML code creates the structure of the form and its elements. It creates a div with class "outer" as the container for the form. Within this container, it has two paragraphs with labels "Enter User Id" and "Enter Password". It also has two input elements with class "in" and id "a" and "b" for the user to enter their user ID and password.
- The JavaScript code: The JavaScript code provides interactivity to the form. The function "fa()" is called when the mouse enters the submit button. If the user has not entered any value in the input fields, the function adds a red border to the input fields and changes the value of the submit button to "Enter details First😡". If the user has entered values in the input fields, the function adds a green border to the input fields and changes the value of the submit button to "OK YOU CAN SUBMIT NOW!❤👌". The function "f()" is called when the submit button is clicked, it moves the submit button back and forth.
Overall, the code creates a modern-looking login form with some basic interactivity provided by JavaScript.
<html>
<head>
<style>
.outer {
margin: 50px auto;
height: 300px;
width: 400px;
border: 2px solid #333;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
position: relative;
background-color: #f2f2f2;
}
p {
margin-left: 80px;
font-size: 18px;
font-weight: bold;
color: #333;
}
.in {
margin-left: 80px;
padding: 10px;
font-size: 16px;
width: 250px;
border: 2px solid #ddd;
border-radius: 5px;
outline: none;
}
#bt {
margin-top: 20px;
position: absolute;
left: 150px;
padding: 5px 5px;
border-radius: 5px;
background-color: #333;
color: #fff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
#bt:hover {
background-color: #00cc00;
font-size: 20px;
color: #fff;
}
</style>
<script>
function fa(){
if(a.value=="" || b.value==""){
f()
document.getElementById("a").style.border="3px solid red"
document.getElementById("b").style.border="3px solid red"
bt.value="Enter details First😡"
}
else{
document.getElementById("a").style.border="3px solid green"
document.getElementById("b").style.border="3px solid green"
bt.value="OK YOU CAN SUBMIT NOW!❤👌"
bt.style.left="120px";
}
}
flag=1
function f(){
if(flag==1){
bt.style.left="310px"
flag=2
}
else if(flag==2){
bt.style.left="80px"
flag=1
}
}
</script>
</head>
<body>
<div class="outer">
<h1 style="text-align:center">❤🤗😛Annoying Form😜❤🤗</h1>
<p>Enter User Id</p>
<input class="in" type="text" placeholder="Enter id" id="a"/>
<p>Enter Password</p>
<input class="in" type="password" placeholder="Enter password" id="b"/>
<br>
<input type="submit" onmouseenter="fa()" onclick="alert('GOOD HO GYA')" id="bt" />
</div>
</body>
</html>
Annoying Form Download Here
LIVE DISPLAY
❤🤗😛Annoying Form😜❤🤗
Enter User Id
Enter Password
