Scribd
Upload
21 views

Task 1

This document shows the code for building an HTML survey form with different input fields like text, email, number, dropdown, radio buttons, checkboxes and textarea. The HTML code defines the form structure and labels for each field. The CSS code styles the form with colors, padding and positions the elements on the page. The form allows users to enter their name, email, age and select options from dropdowns, radio buttons and checkboxes, and leave additional comments in a textarea.

Uploaded by

Muhd Abdullahi
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
21 views

Task 1

This document shows the code for building an HTML survey form with different input fields like text, email, number, dropdown, radio buttons, checkboxes and textarea. The HTML code defines the form structure and labels for each field. The CSS code styles the form with colors, padding and positions the elements on the page. The form allows users to enter their name, email, age and select options from dropdowns, radio buttons and checkboxes, and leave additional comments in a textarea.

Uploaded by

Muhd Abdullahi
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Build a Survey Form

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1 id="title">Survey Form</h1>
</header>

<p id="description">
A short survey to gather feedback
</p>

<form id="survey-form">
<label for="name" id="name-label">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required>

<label for="email" id="email-label">Email:</label>


<input type="email" id="email" name="email" placeholder="Enter your email"
required>

<label for="number" id="number-label">Age:</label>


<input type="number" id="number" name="age" placeholder="Enter your age"
min="18" max="100" required>

<label for="dropdown">Choose one option:</label>


<select id="dropdown" name="dropdown">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>

<fieldset>
<legend>Choose one option:</legend>
<label><input type="radio" name="radio-group" value="option1"> Option
1</label>
<label><input type="radio" name="radio-group" value="option2"> Option
2</label>
</fieldset>

<fieldset>
<legend>Choose multiple options:</legend>
<label><input type="checkbox" name="checkbox1" value="checkbox1"> Option
1</label>
<label><input type="checkbox" name="checkbox2" value="checkbox2"> Option
2</label>
<label><input type="checkbox" name="checkbox3" value="checkbox3"> Option
3</label>
</fieldset>
<label for="comments">Additional Comments:</label>
<textarea id="comments" name="comments" rows="4" placeholder="Enter your
comments"></textarea>

<button type="submit" id="submit">Submit</button>


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

CSS:

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
}

#title {
text-align: center;
}

#description {
text-align: center;
margin-top: 20px;
}

form {
max-width: 600px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}

select {
appearance: none;
}

button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #555;
}

You might also like