Scribd
Upload
35 views

Formeventspdf

The document contains HTML and JavaScript code for a registration form with fields for name, email, phone, and password and styles the form and inputs with CSS.

Uploaded by

kanchangarad048
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Formeventspdf

The document contains HTML and JavaScript code for a registration form with fields for name, email, phone, and password and styles the form and inputs with CSS.

Uploaded by

kanchangarad048
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Program

<html>
<head>
<style>
input[type="text"],
input[type="password"],
select {
border: 1px solid red;
border-radius: 5px;
padding: 5px;
margin: 5px;
}
form {
background-color: #f1f1f1;
width: 40%;
padding: 20px;
}
input[type="submit"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: green;
color: white;
font-size: 14;
}
input[type="reset"] {
border-radius: 5px;
padding: 5px;
margin: 5px;
background-color: red;
color: white;
font-size: 14;
}
</style>
<script>
function input(e) {
e.style.backgroundColor = "yellow";
}
function reset1(e) {
e.style.backgroundColor = "white";
}
function fullName() {
var f = document.getElementById("fname").value;
var m = document.getElementById("mname").value;
var l = document.getElementById("lname").value;
document.getElementById("sname").value = f + " " + m + " " + l;
}
</script>
</head>
<body>
<form>
<h1>Registration Form</h1>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="fname" placeholder="Enter first name"
onclick="input(this)"
onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Middle Name</td>
<td><input type="text" id="mname" placeholder="Enter middle
name" onclick="input(this)"
onblur="reset1(this)" oninput="fullName()" /></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="lname" placeholder="Enter last name"
onclick="input(this)"
onblur="reset1(this)" oninput="fullName()" /></td>
</tr>

<tr>
<td>Email</td>
<td>
<input type="text" name="email" />
</td>
</tr>
<tr>
<td>Phone</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input type="password" name="password1" />
</td>
</tr>
<tr>
<td>Comfirm Password</td>
<td>
<input type="password" name="password2" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit"
/>&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Cancel" />
</td>
</tr>
</table>
</form>

</body>
</html>

Output:

You might also like