Scribd
Upload
6 views4 pages

Build A Survey Form

Uploaded by

alex.palomares.rodriguez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
6 views4 pages

Build A Survey Form

Uploaded by

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

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="header">
<h1 id="title" class="text-center">Form</h1>
<p id="description" class="description text-center">In this survey you
will help us to improve our form</p>
</header>
<form id="survey-form">
<div class="form-group">
<label id="name-label" for="name"> Name </label>
<input id="name" class="form-control" type="text"
placeholder="Enter your name" required>
</div>
<div class="form-group">
<label id="email-label" for="email"> Email</label>
<input class="form-control" id="email" type="email"
placeholder="Enter your email" required>
</div>
<div class="form-group">
<label id="number-label" for="number"> Age</label>
<input class="form-control" id="number" type="number"
placeholder="Age" min="15" max="90" required>
</div>
<div class="form-group">
<p>What do you think we should improve?</p>
<select class="form-control" id="dropdown" required>
<option disabled selected value>Select an option</option>
<option value="types of questions">types of questions</option>
<option value="grammar">grammar</option>
<option value="privacy">privacy</option>
</select>
</div>
<div class="form-group">
<p>Do you think is alright asking for personal information in a
survey?</p>
<label><input class="input-radio" name="opinion" value="Sure"
type="radio"> Sure</label>
<label><input class="input-radio" name="opinion" value="Must be
anonymous" type="radio"> Must be anonymous</label>
<label><input class="input-radio" name="opinion" value="Not sure"
type="radio"> Not sure</label>
</div>
<div class="form-group">
<p>Do you like how our website looks?</p>
<span class="clue">(Please Answer Carefully)</span>
<label><input class="input-checkbox" name="choose" value="It could
be better" type="checkbox"> It could be better</label>
<label><input class="input-checkbox" name="choose" value="It's
fantastic!" type="checkbox"> It's fantastic!</label>
<label><input class="input-checkbox" name="choose" value="I do not
like it" type="checkbox"> I do not like it</label>
</div>
<div class="form-group">
<p>Any comments or suggestions?</p>
<textarea class="input-textarea" name="suggestions"
placeholder="Enter the comments here..."></textarea>
</div>
<div>
<button class="submit-button" type="submit" id="submit">
Submit</button>
</div>
</form>
</div>
</body>
</html>

** end of undefined **

** start of undefined **

body {
font-family: Calibri, Consolas;
font-size: 1rem;
line-height: 1.9;
color: white;
background-color: rgb(0, 150, 150);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}

h1 {
font-weight: 600;
line-height: 1.2;
margin-top: 0;
}

p {
font-size: 1.125rem;
margin-bottom: 0.5rem;
}

button {
border: 0;
}

.clue {
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}

input, button, select, textarea {


margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}

.description {
font-style: italic;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

label {
display: block;
font-size: 1.125rem;
margin-bottom: 0.5rem;
}

.container {
background-color: rgb(40, 35, 90);
padding: 20px;
border-radius: 10px;
width: 100%;
max-width: 600px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin: auto;
}

.header {
margin-bottom: 1.875rem;
text-align: center;
}

.text-center {
text-align: center;
}

form {
padding: 1.5rem;
}

.form-control {
display: block;
width: 100%;
color: #495057;
height: 2.375rem;
padding: 0.375rem 0.75rem;
background-color: #fff;
background-clip: padding-box;
border-radius: 0.6rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
margin-bottom: 1rem; /* Añadido para uniformidad */
}

.form-control:focus {
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-group {
margin-bottom: 1.25rem; /* Añadido para uniformidad */
}
.input-radio,
.input-checkbox {
display: inline-block;
margin-right: 0.625rem;
width: 1.25rem;
height: 1.25rem;
min-height: 1.25rem;
min-width: 1.25rem;
vertical-align: middle; /* Alineación vertical */
}

.input-textarea {
min-height: 120px;
width: 100%;
padding: 0.625rem;
resize: vertical;
margin-bottom: 1rem; /* Añadido para uniformidad */
}

.submit-button {
display: block;
width: 100%;
padding: 0.75rem;
background: var(--color-green);
color: inherit;
border-radius: 2px;
cursor: pointer;
background-color: #28a745; /* Ajustado para mejorar el color */
}

.submit-button:hover {
background: #45a049;
}

** end of undefined **

You might also like