Scribd
Upload
26 views4 pages

Formeve 1

The document contains HTML and JavaScript code to create a basic information form with fields for first name, middle name, last name, gender, mobile number, and email. Styling is applied to make the form fields stand out visually. JavaScript functions are used to concatenate the full name, highlight inputs on focus, reset highlights on blur, and reset the form fields.

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
26 views4 pages

Formeve 1

The document contains HTML and JavaScript code to create a basic information form with fields for first name, middle name, last name, gender, mobile number, and email. Styling is applied to make the form fields stand out visually. JavaScript functions are used to concatenate the full name, highlight inputs on focus, reset highlights on blur, and reset the form fields.

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/ 4

<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>Basic Information 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>
</table>
Gender:<br>
<input type="radio" value="male">Male
<input type="radio" value="female">Female
<br><br>
Mobile no:<br>
<input type="text" name="mobile.no" placeholder="Enter your Mobile
no.">
<br><br>
Email:<br>
<input type="text" name="email" placeholder="Enter your Email">
<br><br>
<input type="button" value="Submit">
<input type="button" value="Reset">

</form>
</body>
</html>

You might also like