Workshop Seven - 7.5 Dropbox Create A Survey Form Introduction and Alignment For
ID: 3795497 • Letter: W
Question
Workshop Seven - 7.5 Dropbox
Create A Survey Form
Introduction and Alignment
Forms on the web are used in many different ways. One common use of forms is for a survey. For this assignment you will create a survey form that has the following input attributes: text, radio button, and check box group. The form must also have a text area element as well as a select box. Last of all, the form will need submit and reset buttons. A table should be used to organize the form.
Upon completion of this assignment you should be able to:
Create a web page that has a form
Use CSS to style a form
Resources
Textbook: Web Development and Design Foundations with HTML5
Background Information
Survey forms are a way for visitors to interact with a site. There are many types of input elements that can be used to collect the data from the user. Text inputs allow the user to enter free text items such as a name or email address. Radio buttons are for single selection choices. Check box groups allow the user to select multiple options.
Select lists provide a list of items that the user can scroll through to make a selection. Text areas hold text that requires multiple lines rather than a single line.
Forms always need a submit button. When users press this button the form is submitted to the web server. A reset button allows the user to reset the form in case of a mistake. All of the elements and attributes on a form work together to format data that can be sent back to the server for processing.
Figure 9.34
Instructions
Complete #5 in the ‘Hands-On Exercises’ on pp. 437-438 of Chapter 9.
Review the example in Figure 9.34 which is shown above, to get you started.
Complete the form per the instructions.
Put your web page survey form into a zip file. If you used an external style sheet for your form, then include it in the zip file.
Do Not attach the web page without putting it into zip file as your code will be stripped out of it.
When you have completed your assignment, save a copy for yourself and submit your zip file to your instructor using the Dropbox by the end of the workshop.
Assessment Criteria
Assessed Item
Points
Create a Survey Form – 2 points per requirement
Textboxes for name and email
Scrolling textbox 60 characters wide and 3 rows high
A radio button group with at least three choices
A check box group with at least three choices
A select box that initially shows three items, but contains at least four
A submit button
A reset button
Use a table to organize the form
Use CSS to style the form
Form is accessible to users with disabilities
0-20
Code formatted correctly
Tags are opened and closed correctly, no broken links or syntax errors
No spelling errors and your name is in comments at top of page
0-5
Total Points
25
Assessed Item
Points
Create a Survey Form – 2 points per requirement
Textboxes for name and email
Scrolling textbox 60 characters wide and 3 rows high
A radio button group with at least three choices
A check box group with at least three choices
A select box that initially shows three items, but contains at least four
A submit button
A reset button
Use a table to organize the form
Use CSS to style the form
Form is accessible to users with disabilities
0-20
Code formatted correctly
Tags are opened and closed correctly, no broken links or syntax errors
No spelling errors and your name is in comments at top of page
0-5
Total Points
25
Explanation / Answer
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Survey Form</title>
<style type="text/css">
.form-style-1 {
margin:10px auto;
max-width: 400px;
padding: 20px 12px 10px 20px;
font: 13px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.form-style-1 li {
padding: 0;
display: block;
list-style: none;
margin: 10px 0 0 0;
}
.form-style-1 label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form-style-1 input[type=text],
.form-style-1 input[type=date],
.form-style-1 input[type=datetime],
.form-style-1 input[type=number],
.form-style-1 input[type=search],
.form-style-1 input[type=time],
.form-style-1 input[type=url],
.form-style-1 input[type=email],
textarea,
select{
box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
cols="60";
rows="3";
outline: none;
}
.form-style-1 input[type=text]:focus,
.form-style-1 input[type=date]:focus,
.form-style-1 input[type=datetime]:focus,
.form-style-1 input[type=number]:focus,
.form-style-1 input[type=search]:focus,
.form-style-1 input[type=time]:focus,
.form-style-1 input[type=url]:focus,
.form-style-1 input[type=email]:focus,
.form-style-1 textarea:focus,
.form-style-1 select:focus{
-moz-box-shadow: 0 0 8px #88D5E9;
-webkit-box-shadow: 0 0 8px #88D5E9;
box-shadow: 0 0 8px #88D5E9;
border: 1px solid #88D5E9;
}
.form-style-1 .field-divided{
width: 49%;
}
.form-style-1 .field-long{
width: 100%;
}
.form-style-1 .field-select{
width: 100%;
}
.form-style-1 .field-textarea{
height: 100px;
}
.form-style-1 input[type=submit], .form-style-1 input[type=button]{
background: #4B99AD;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style-1 input[type=submit]:hover, .form-style-1 input[type=button]:hover{
background: #4691A4;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.form-style-1 input[type=reset], .form-style-1 input[type=button]{
background: #2699AD;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style-1 input[type=reset]:hover, .form-style-1 input[type=button]:hover{
background: #2691A4;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.form-style-1 .required{
color:red;
}
</style>
</head>
<body><h1 align="center"> Survey Form </h1>
<form>
<ul class="form-style-1">
<li><label>Full Name <span class="required">*</span></label><input type="text" name="field1" class="field-divided" placeholder="First" /> <input type="text" name="field2" class="field-divided" placeholder="Last" /></li>
<li class="button-section"><label>Sex</label>
<input type="radio" name="Sex" vaue="Male" />Male<br>
<input type="radio" name="Sex" vaue="Female" />Female<br>
<input type="radio" name="Sex" vaue="Not to be disclosed" />Not to be disclosed<br>
</li>
<li>
<label>Email <span class="required">*</span></label>
<input type="email" name="field3" class="field-long" />
</li>
<li>
<label>Subject</label>
<select name="field4" class="field-select" size="3">
<option value="Advertise">Advertise</option>
<option value="Partnership">Partnership</option>
<option value="General Question">General</option>
<option value="General ">Question</option>
</select>
</li>
<li>
<label>Your Message <span class="required">*</span></label>
<textarea cols="60" rows="3" name="field5" id="field5" class="field-textarea"></textarea>
</li>
<li class="button-section">
<span class="privacy-policy">
<input type="checkbox" name="field7">You agree to our Terms and Policy.<br>
<input type="checkbox" name="field7">All information above is correct.<br>
<input type="checkbox" name="field7">You would like to get promotional calls from us.<br>
</span>
</li>
<li>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</li>
</ul>
</form>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.