It's a simple HTML form that we have created, and the data entered is decided to be printed after the user submits it. Our javascript function, which is called with the help of an attribute called handles the 'react' part of an HTML form 'onclick' added to the submit button.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet"href="styles.css">
<body>
<h1 id="title">Registration Form</h1>
<fieldset>
<form id="survey-form">
<label>Enter Your First Name: <input type="text"id="name-label"placeholder="Enter Your Name"required></label>
<label>Enter Your Last Name: <input type="text"id="last-name"placeholder="Enter Your Last Name"required></label>
<label>Enter Your Email: <br> <input type="email-label"id="email"placeholder="Enter Your Email"required></label>
<label>Age(option)<br><input type="number"id="number-label"min="18"max="45"placeholder="Age"required></label>
<label>Select your Country</label>
<select id="dropdown">
<option>India</option>
<option>China</option>
<option>Japan</option>
<option>United Stated(US)</option>
<option>Canada</option>
<option>Australia</option>
</select>
<label>Male<input type="radio"name="bottom"required></label>
<label>Female<input type="radio"name="bottom">
</label>
<label><input type="checkbox"name="checkbox"required>I accept the<a href="https://ammukeshacademic.blogspot.com/" id="mukesh"> terms and conditions</a> apply
Please read the registration form </label>
<textarea placeholder="Please enter your fedback?"id="kumar"></textarea>
<input type="submit"id="submit">
</form>
<fieldset>
</body>
</html>
USE CSS CODE AND LINK THE HTML FILE
body {
width: 100%;
height: 100vh;
margin: 0;
background-color: #274544;
color: #f5f6f7;
font-family: Tahoma;
font-size: 16px;
}
h1{
margin:auto;
padding-bottom:5px;
text-align:center;
background-color:#fca6a2;
margin-left:20%;
margin-right:20%;
border-color:#274544;
border-radius:5px;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}
form {
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
border-bottom: 3px solid #3b3b4f;
}
label {
display: block;
margin: 0.5rem 0;
}
textarea{
margin: 10px 0 0 0;
width: 80%;
min-height: 2em;
}
input{
background-color:#0a0a23;
border: 2px solid #0a0a23;
color: #ffffff;#0a0a23
border-radius:5px;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;
min-width: auto;
border-radius:10px;
}
select{
border-radius:5px;
border-color:black;
border-size:4px;
padding:auto;
width:150px
}
#mukesh{
color:#f7f8fa;
}
#kumar{
height:15%;
background-color:#0a0a23;
border-radius:5px;
border-size:2px;
color:#f7f8fa;
font-size:20px;
}
👉second html page🙋
👉third html page🙋