Program Name : Client Side Scripting (22519) Academic Year : 2023-24

Course Name : TYIF Semester : Fifth

A STUDY ON
Survey Form
SUBMITTED ON Nov BY THE GROUP OF 3 STUDENTS

Sr. Roll No. Full Name of Students Enrollment Seat No.

No (Sem-V) No. (Sem-V)

1 02 SAI R KONDA 2109350131

2 04 GOURAV V BHATIA 2109350133

3 07 NAYAN V VISHE 2109350136

UNDER THE GUIDANCE OF

Prof . Shruthi Nandargi

In 3 years , Diploma In Engineering Technology Maharashtra State Board

 Maharashtra State
Board of Technical Education
Certificate

This is to certify that Mr. Sai Konda Roll No.02 of Fourth Semester of Diploma
in Information Technology at institute Shivajirao S Jondhle Polytechnic
Asangaon (Code:-0935) has completed the micro project satisfactorily in
subject Client Side Scripting (22519) for the academic year 2023 to 2024 as
prescribed in the curriculum I Scheme.

Place : Asangaon Enrollment No : 2109350131

Date : Seat No :

Subject Teacher Head Of The Department Principle

Shruthi Nandargi Shweta Chanchlani Dr. Sneha Jondhle

 Maharashtra State
Board of Technical Education
Certificate

This is to certify that Mr. Gourav Bhatia Roll No.04 of Fourth Semester of
Diploma in Information Technology at institute Shivajirao S Jondhle
Polytechnic Asangaon (Code:-0935) has completed the micro project
satisfactorily in subject Client Side Scripting (22519) for the academic year
2023 to 2024 as prescribed in the curriculum I Scheme.

Place : Asangaon Enrollment No : 2109350133

Date : Seat No :

Subject Teacher Head Of The Department Principle

Shruthi Nandargi Shweta Chanchlani Dr. Sneha Jondhle

 Maharashtra State
Board of Technical Education
Certificate

This is to certify that Mr. Nayan Vishe Roll No.07 of Fourth Semester of
Diploma in Information Technology at institute Shivajirao S Jondhle
Polytechnic Asangaon (Code:-0935) has completed the micro project
satisfactorily in subject Client Side Scripting (22519) for the academic year
2023 to 2024 as prescribed in the curriculum I Scheme.

Place : Asangaon Enrollment No : 2109350136

Date : Seat No :

Subject Teacher Head Of The Department Principle

Shruthi Nandargi Shweta Chanchlani Dr. Sneha Jondhle

 Mini Microproject

Index

Sr no. Title Page No

1 Introduction 1

2 Forms 2

3 Form Tags 2 To 7

4 Advantages 7

5 Creating a Basic Form 8 To 15

6 Conclusion 16

 Introduction

I. Forms are always an essential part of any project that is used to

collect user input information.
II. In this article, we are creating a survey form using HTML and CSS.
III. In this form, there are several questions that are asked by users.
IV. Here, we will use HTML to design the basic layout of the form and
CSS will give a beautiful design to our layout like text-decoration,
text color, background color, text alignment, margin, padding, etc.

V. Prerequisite:
 Basic concepts of HTML and CSS like tags, ID , color , margin,
padding, font, text field, checkbox, radio button, etc.

 Forms

I. The <form> element is used to create an HTML form for

user input.
II. Inside the form element, provide different options to the
user like name, email, age, etc.
III. In HTML, we have different input elements for different
tasks.
IV. So, we are providing respective input types according to
the question (email for taking email input, text-area for
taking a large message, name for taking name input,
etc.).
V. We have also used the radio-button (let a user selection
of the provided choices.), check-button (let a user select
zero or more options of the provided choices), and
submit-button (the button for submitting the form data
to a form-handler).

 Form Tags

 <input>
 <textarea>
 <button>
 <select>
 <option>
 <optgroup>
 <fieldset>
 <label>
 <output>
 The <form> tag is used to create an HTML form for user input.

 The <form> element can contain one or more of the following form
elements:

I. <input>

The different input types are as follows:

1. <input type="button">
2. <input type="checkbox">
3. <input type="color">
4. <input type="date">
5. <input type="datetime-local">
6. <input type="email">
7. <input type="file">
8. <input type="hidden">
9. <input type="image">
10. <input type="month">
11. <input type="number">
12. <input type="password">
13. <input type="radio">
14. <input type="range">
15. <input type="reset">
16. <input type="search">
17. <input type="submit">
18. <input type="text">
19. <input type="time">
20. <input type="url">
21. <input type="week">

II. <textarea>

 The <textarea> tag defines a multi-line text input control.

 A text area can hold an unlimited number of characters, and

the text renders in a fixed-width font (usually Courier).
  The size of a text area is specified by the cols and rows
attributes .

 The name attribute is needed to reference the form data after

the form is submitted .

 The id attribute is needed to associate the text area with a

label.

TextArea Attributes :

1. AutoFocus
2. Columns
3. Rows
4. Wrap
5. Name
6. Placeholder
7. Form
8. Readonaly
9. Required
10. Maxlength

III. <button>

 The <button> tag defines a clickable button.

 Inside a <button> element you can put text (and tags like <i>,
<b>, <strong>, <br>, <img>, etc.). That is not possible with a
button created with the <input> element!

Button Attribute :

1. AutoFocus
2. Value
 3. Name
4. Type
5. Disabled
6. FormMethod
7. Form

IV. <select>

 The <select> element is used to create a drop-down list.

 The <select> element is most often used in a form, to collect user input.
 The name attribute is needed to reference the form data after the form
is submitted .
 The id attribute is needed to associate the drop-down list with a label.
 The <option> tags inside the <select> element define the available
options in the drop-down list.

Select Tag Attributes :

1. Form
2. Multiple
3. Size
4. Required
5. Name

V. <Option>

 The <option> tag defines an option in a select list.

 <option> elements go inside a <select>, <optgroup>, or <datalist>

element.
Option Tag Attributes :
1. Disabled
2. Label
3. Selected
4. Values
 VI. <OptionGroup>

 The <optgroup> tag is used to group related options in a <select>

element (drop-down list).

 If you have a long list of options, groups of related options are easier to
handle for a user.

Optgroup Tag Attributes :

1. Disabled
2. Label

VII. <fieldset>

 The <fieldset> tag is used to group related elements in a form.

 The <fieldset> tag draws a box around the related elements.

Fieldset Tag Attributes :

1. Disabled
2. Form
3. Name

4. Name

VIII. <label>

 The <label> tag defines a label for several elements:

1. <input type="checkbox">
2. <input type="color">
3. <input type="date">
4. <input type="datetime-local">
5. <input type="email">
6. <input type="file">
7. <input type="month">
8. <input type="number">
9. <input type="password">
10. <input type="radio">
11. <input type="range">
12. <input type="search">
13. <input type="tel">
14. <input type="text">
15. <input type="time">
16. <input type="url">
17. <input type="week">
18. <meter>
19. <progress>
20. <select>
21. <textarea>

 Benefit :

Screen reader users (will read out loud the label, when the user is
focused on the element)

Users who have difficulty clicking on very small regions (such as

checkboxes) - because when a user clicks the text within the <label>
element, it toggles the input (this increases the hit area).
IX. <output>

 The <output> tag is used to represent the result of a calculation (like one
performed by a script).

Ouput Tag Attributes :

1. For
2. Name
3. Form

 Advantages
  You use the form tag when you want to not use
JavaScript and submit a collection of form fields to a
script on your server.
 In your example the form element would not be needed.
Although you don't have the usual perk of having a
form(easy submit to server), you can still use it to make
your markup semantic.

 Creating a Basic Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>
Build a Survey Form using HTML and CSS
</title>
<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling form-control Class */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
 font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1> Survey Form</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<!-- Input Type Text -->
<input type="text"
id="name"
placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">
Email</label>
<!-- Input Type Email-->
<input type="email"
id="email"
placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">Age</label>
<!-- Input Type Text -->
<input type="text"
id="age" placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>
<!-- Dropdown options -->
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>
Would you Worked In Any Company?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
 <label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>
<div class="form-control">
<label>Languages and Frameworks known
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox"
name="inp">C</input></label>
<label for="inp-2">
<input type="checkbox"
name="inp">C++</input></label>
<label for="inp-3">
<input type="checkbox"
name="inp">C#</input></label>
<label for="inp-4">
 <input type="checkbox"
name="inp">Java</input></label>
<label for="inp-5">
<input type="checkbox"
name="inp">Python</input></label>
<label for="inp-6">
<input type="checkbox"
name="inp">JavaScript</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">React</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">Angular</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">Django</input></label>
<label for="inp-7">
<input type="checkbox"
name="inp">Spring</input></label>
</div>
<div class="form-control">
<label for="comment">
Any comments or suggestions
</label>
<!-- multi-line text input control -->
 <textarea name="comment" id="comment"
placeholder="Enter your comment here">
</textarea>
</div>
<!-- Multi-line Text Input Control -->
<button type="submit" value="submit">
Submit
</button>
</form>
</body>
</html>

Ouput :
 Conclusion

We Succesfully done this project .

While Doing this project we must got so much knowledge of
creating form .
We learn how to create a form using html and css .