Scribd
Upload
9 views6 pages

SWE 4001 - Assignment 2

The document is an HTML code for a form that includes various form elements such as text fields, password fields, email fields, number inputs, date inputs, radio buttons, checkboxes, a dropdown menu, a textarea, and a file upload option. The form is styled with CSS for better presentation and includes a submit and reset button. The form is designed to collect user information including name, password, email, age, date of birth, gender, hobbies, country, message, and resume.

Uploaded by

ramcharan M
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views6 pages

SWE 4001 - Assignment 2

The document is an HTML code for a form that includes various form elements such as text fields, password fields, email fields, number inputs, date inputs, radio buttons, checkboxes, a dropdown menu, a textarea, and a file upload option. The form is styled with CSS for better presentation and includes a submit and reset button. The form is designed to collect user information including name, password, email, age, date of birth, gender, hobbies, country, message, and resume.

Uploaded by

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

SWE 4001 – Assignment 2

Write a html code for form tag with all form elements
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form with All Elements</title>
<style>
form {
width: 50%;
margin: 20px auto;
padding: 20px;
border: 1px solid #060606;
border-radius: 10px;
background-color:white;
}
label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.form-group label {
margin-right: 10px;
font-weight: bold;
}

.form-group input[type="radio"],
.form-group input[type="checkbox"] {
margin-right: 5px;
margin-left: 10px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="submit"],
input[type="reset"] {
width: 48%;
padding: 10px;
margin-top: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type="submit"]:hover,
input[type="reset"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>

<h2 style="text-align: center;">Form</h2>

<form action="/submit" method="post" enctype="multipart/form-data">

<label for="fname">First Name:</label>


<input type="text" id="fname" name="firstname" placeholder="Enter your first name" required>

<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password" placeholder="Enter your password"
required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="120">

<label for="dob">Date of Birth:</label>


<input type="date" id="dob" name="dob">

<div class="form-group">
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>

<div class="form-group">
<label>Hobbies:</label>
<input type="checkbox" id="sports" name="hobbies" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="hobbies" value="music">
<label for="music">Music</label>
<input type="checkbox" id="reading" name="hobbies" value="reading">
<label for="reading">Reading</label>
</div>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="australia">India</option>
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
<option value="australia">Australia</option>
</select>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" placeholder="Enter your
message"></textarea>

<label for="resume">Upload Resume:</label>


<input type="file" id="resume" name="resume">

<input type="submit" value="Submit">


<input type="reset" value="Reset">

</form>

</body>
</html>
Output:

You might also like