I need html coding in notepad++ according to the requirments those are listed in the pictures....

Question

Question

The purpose of this assignment is to figure out the designing and development of HTML forms with CSS and interaction between

2. Use CSS to give an appropriate style and structure on the form. Different formstyle might be used 3. Add to countries into

I need html coding in notepad++ according to the requirments those are listed in the pictures.
The project submission Instructions: 1. Create a folder with a name as CourseName-Section-AS3-GroupName, and add the project

The project submission Instructions: 1. Create a folder with a name as CourseName-Section-AS3-GroupName, and add the project

Student Registration Form Please fill in this form to register a student. First Name Enter First Name Last Name Last Name Ema

2. Use CSS to give an appropriate style and structure on the form. Different form style might be used 3. Add two countries in

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

html code:-

--------------------------------------------------------
form.html
--------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Registration</title>
<link href="form.css" rel="stylesheet" type="text/css" />
</head>
<body onload="resetSelection()">

<h1>Student Registration Form</h1>
<p>Please fill in this form to register a student</p>

<div>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your First name" required>

<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name" required>
<label for="lname">Email</label>
<input type="text" id="lname" name="lastname" placeholder="Email" required>
<label for="lname">Email Confirmation</label>
<input type="text" id="lname" name="lastname" placeholder="Email Confirmation" required>

<label for="country">Country</label>
<select id="countrySelect" size="1" onchange="makeSubmenu(this.value)" placeholder="Country" required>
<option value="" disabled selected>Country</option>
<option>India</option>
<option>USA</option>
</select>
<label for="city">City</label>
<select id="citySelect" size="1" disabled required>
<option value="" disabled selected>City</option>
<option></option>
</select>
<label for="course">Course List:</label>
<select id="course" required>
<option>ABCD</option>
<option>ASQW</option>
<option>XYZZ</option>
<option>QWER</option>
</select>
<br><br>
<button id="Add">Add Course</button>
<br>
<label for="list">Selected Course List:</label>
<select id="list" name="list" multiple required>

</select>
<button id="Remove">Remove Course</button>
<input type="submit" value="Registration">
</form>
</div>
<script src="form.js"></script>
</body>
</html>

CSS code:-

--------------------------------------------------------
form.css
--------------------------------------------------------
input[type=text], select , option {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type=submit] {
width: 100%;
background-color: #382fbb;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#Add, #Remove{
width: 20%;
background-color: #9e9abd;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer; }
label
{
font-weight: bold;
}

div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}

Javascript code:-

--------------------------------------------------------
form.js
--------------------------------------------------------
var countryBycity = {
India: ["Bhubaneswar","Puri","Cuttack", "Mumbai"],
USA: [,"New York","Chicago","Los Angeles","Houston"],
}
function makeSubmenu(value) {
if(value.length==0)
document.getElementById("citySelect").innerHTML = "<option></option>";
else {
document.getElementById("citySelect").disabled = false;
var citiesOptions = "";
for(cityId in countryBycity[value]) {
citiesOptions+="<option>"+countryBycity[value][cityId]+"</option>";
}
document.getElementById("citySelect").innerHTML = citiesOptions;
}
}

function resetSelection() {
document.getElementById("countrySelect").selectedIndex = 0;
document.getElementById("citySelect").selectedIndex = 0;
}
const btnAdd = document.getElementById('Add');
const btnRemove = document.getElementById('Remove');
const sb = document.getElementById('list');
const course = document.getElementById('course');

btnAdd.onclick = (e) => {
e.preventDefault();

// create a new option
const option = new Option(course.value, course.value);
// add it to the list
sb.add(option, undefined);
};

btnRemove.onclick = (e) => {
e.preventDefault();

// save the selected option
let selected = [];

for (let i = 0; i < sb.options.length; i++) {
selected[i] = sb.options[i].selected;
}

// remove all selected option
let index = sb.options.length;
while (index--) {
if (selected[index]) {
sb.remove(index);
}
}
};

Output:-

Add a comment

Answer 2

I need html coding in notepad++ according to the requirments those are listed in the pictures....

Homework Answers

Add Answer to:
I need html coding in notepad++ according to the requirments those are listed in the pictures....

Post as a guest

Earn Coins

given below are the project description and their Html and css files i need javascript according to the project and other files!

Consider the attached Registration form. Use jQuery to: 1) Change the "Search" link on the left...

NEED HELP with HTML with Javascript embedding for form validation project below. I have my code...

Need help!!! I need two programs that use one common database.. One program using a Visual...

given below are the project description and their Html and css files i need javascript according...

Form Processing HTML One of the most ubiquitous uses of JavaScript is validating form data on...

The purpose is to serve as a bridge between your existing knowledge of HTML/JS and the...

This is a website picture The html and css code is as follow And my problem is as follow use the php and mysql Northwind Customer Database Search List Records All Records CustomerName v CustomerName...

I need help writting a Javascript function that does the following its for a HTML/CSS Shopping...

URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

I need html coding in notepad++ according to the requirments those are listed in the pictures....

Homework Answers

Add Answer to: I need html coding in notepad++ according to the requirments those are listed in the pictures....

Post as a guest

Earn Coins

Add Answer to:
I need html coding in notepad++ according to the requirments those are listed in the pictures....