How to Create Online Survey Forms?
Have you ever wondered how a survey form in a website was created? Survey forms have been a mainstay in websites and is used to collect information from users. This information can range from a simple contact information to complex data gathering. These forms can also be used to do a variety of functions, ranging from sending a simple email to a complex workflow, but, is it hard to create a survey form?
Not At All !!!
Let me guide you through the steps of creating a simple survey form. With this as the base, you can create a survey form as complex as you require.
HTML and CSS are the languages which are used in web building. HTML is used for the basic structure and function, while CSS is used to give the structure a better look and feel. We will be using HTML Tags to create a simple survey form today.
An HTML Tag refer to the structure within the web page. Using the tags, various structures can be defined such as forms, tables, labels etc. The tags are enclosed within angled brackets (< >) to showcase the start and the finish of that structure. Today, we will be taking a peak into the HTML element that is used to create the survey forms, aptly named as “form”.
HTML Form Elements
<form> element is used to define HTML forms. Within the <form> element, we are able to create more sub-elements to define different functionalities.
<input> is the mostly used element in HTML forms. There are many ways to display an <input> element. It depends on the “type” attribute. Based on the type, the function and the visual look of the input element can be changed.
HTML form Attributes
An attribute is a subset of an element, which provides more information on the given element. Based on this information, the element’s properties can be managed. Frequently used HTML <form> attributes are listed below and it will give a better understanding of the use of attributes within an element.
- Target Attribute specifies where to display the response that is received after submitting the form.
In order to display the response in a new tab, we write the Target Attribute as<form target = “_blank”>
2. Action Attribute defines the action to be performed when the form is submitted. It describes where the data is sent when the user clicks the submit button. We include the file which contains the server-side script that handles the data. It is mentioned like this<form action=”action.php”>
3. Method Attribute specifies the HTTP method to be used when submitting the form data. There are two types of method attribute. They are GET method and POST method. Both these methods are used to transfer data from the client side to the server side. The main difference in these methods are that in the GET method, the information being sent is appended to the URL while in the POST method, the information is secured within the message body.
POST method is mainly used to send sensitive or personal information. There are no size limitations so it can be used to send large amount of data.
<form action=”action.php” method=post>
GET method is good for non-secure data. The length of the URL is limited (2048 characters)<form action=”action.php” method=get>
Creating a Basic Survey Form
Now, the boring part about knowing all the basic information is done and we are off to the exciting part about creating the forms.
First, we need to define the HTML page. This will act as the basic structure to our form. As we learned earlier, the structure for an HTML page is defined with tags.
Here,
- The DOCTYPE tag refers to the types of document we are creating
- <html> tag informs that the web page starts with this tag, and ends with </html>
- <head> tag separates the header section from the rest of the document
- <body> tag includes all the information we require to do within HTML page
<!DOCTYPE html>
<html>
<head>
<title> Sample Survey Form </title>
</head><body>
<form> </form>
</body>
</html>
Once the structure is defined, we can add in the code to create a simple form. First, let us take a look at a simple form that takes value from a text box.
<!DOCTYPE html>
<html>
<head>
<title> Sample Survey Form </title>
</head><body>
<form action="action.php" method=post>
<h2> This is an example of input fields for text </h2>
<p> Enter your details below!!! </p>
<label for="fname"> First Name: </label>
<input type="text" id="fname" name="fname"><br>
<label for="lname"> LastName: </label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>
<input type=”text”>defines a single-line text input field.- The
<label>tag defines a label name for many form elements. - The
forattribute of the<label>tag should be equal to the id attribute of the<input>element to bind them together. <input type=”submit”>defines a button for submitting form data to a form-handler.- <input type=”reset”> defines a reset button that will reset all form values to their default values.
Now we have our simple form. Finally, let us add in some flavor to the form with some radio buttons and checkboxes as well.
<!DOCTYPE html>
<html>
<head>
<title> Sample Survey Form </title>
</head><body>
<form action="action.php" method=post>
<h2> This is an example of input fields for text </h2>
<p> Enter your details below!!! </p>
<label for="fname"> First Name: </label>
<input type="text" id="fname" name="fname"><br>
<label for="lname"> LastName: </label>
<input type="text" id="lname" name="lname"><br> <h2> This is an example of input fields for radio button </h2>
<p> Select your gender: </p>
<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><h2> This is an example of input fields for checkbox </h2>
<p> Select the vehicle types you have: </p>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Cycle">
<label for="vehicle1"> Bicycle </label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Bike">
<label for="vehicle2"> Bike </label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Car">
<label for="vehicle3"> Car </label><br>
<input type="submit" value="Submit">
<input type="reset">
</form>
</body>
</html>
<input type=”radio”>defines a radio button. It lets a user select ONLY ONE of a limited number of choices.- The
checkboxesare able to transfer information on multiple values selected based on the ID of the input. By using this, multiple selection criteria in a form can be realized.
The final output will be like this,
I hope you all have understood the basics in creating a survey form. Do practice making forms, and I hope to meet you all soon with more exciting content.
