Our blog today will create a very simple form to take input from users. In the course of this blog we will learn the use of simple Radio buttons and Check boxes. We also use submit button which can be used to submit all the form details to a web service. So let get started, We will be using <form> to create a form today
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SAMPLE FORM</title>
</head>
<body>
<form action="" method="get" name="Form">
Name:
<input type="text" name="NAME" />
<br /><br />
//In this part of code we defined a Input field with Label as “Name:” with type
as a TEXT.We can change it to password type,number type or else.
//<br> is used to provide line break.
Address:
<textarea name="Adress"></textarea>
<br /><br/>
Age: <input type="number" name="age" /> <br />
In the code above we have started by creating a simple HTML code with title Simple Form. In the body we have created a form action which is currently empty as we have not submitting it to any web service/page. The HTTP method we are using in our example is “Get”. Get is generally used when we are requesting data from a specified source. It can also be POST which is primarily used to submit data to a specified resource. We are calling the form by the name “Form”. In the lines below we create “NAME” and “ADDRESS” input fields.
<p>JUST ANSWER SOME SIMPLE QUESTIONS PLZ:<br /><br />
Que:1 Select your gender.<br />
<label>
<input type="radio" name="Que1" value="male" id="Que1_0" />
MALE</label>
<br />
<label>
<input type="radio" name="Que1" value="female" id="Que1_1" />
FEMALE</label>
//in this part of code we designed the radio buttons.Two radio buttons are designed one with label as “Male” and other as “Female”.
<br />
</p>
<p>Que:2 Select your martial status.<br />
<label>
<input type="radio" name="que2" value="radio" id="que2_0" />
Married</label>
<br />
<label>
<input type="radio" name="que2" value="radio" id="que2_1" />
Unmarried</label>
<br />
</p>
<p> Que:3 Which one best describe you? <br />
<label>
<input type="radio" name="que3" value="std" id="que3_0" />
Student</label>
<br />
<label>
<input type="radio" name="que3" value="dev" id="que3_1" />
Developer</label>
<br />
</p>
<p> Que:4 Click on the items you have.<br/>
<label>
<input type="checkbox" name="multi" value="mob" id="multi_0" />
Mobile</label>
<br />
<label>
<input type="checkbox" name="multi" value="lap" id="multi_1" />
Laptop</label>
<br />
<label>
<input type="checkbox" name="multi" value="des" id="multi_2" />
Desktop</label>
<br />
<label>
<input type="checkbox" name="multi" value="not" id="multi_3" />
Notebook</label>
<br />
</p>
<p>Que:5 Select the languages you like to work on.<br />
<label>
<input type="checkbox" name="box2" value="checkbox" id="box2_0" />
c++</label>
<br />
<label>
<input type="checkbox" name="box2" value="checkbox" id="box2_1" />
C</label>
<br />
<label>
<input type="checkbox" name="box2" value="checkbox" id="box2_2" />
Java</label>
//in this part of code we defined checkboxes.We can define as many as check boxes as we want.
Id: id is used when we use scripting language to process the data.
<br />
</p>
<p>Que:6 Select the social network you already joined.<br/>
<label>
<input type="checkbox" name="Box3" value="fb" id="Box3_0" />
facebook</label>
<br />
<label>
<input type="checkbox" name="Box3" value="twt" id="Box3_1" />
Twitter</label>
<br />
<label>
<input type="checkbox" name="Box3" value="g+" id="Box3_2" />
Google+</label>
<br />
</p>
<input name="Submit" type="submit" />
//this is used to designe a submit button.
</form>
</body>
</html>
In the above code we start with radio buttons inquiring gender from the user. It uses input type as radio. The check boxes are used for questions like languages and Social network. We use input type as “checkbox” If we render this HTML is a browser it will show
OUTPUT
We hope you understood the use of form and other input types with this post.
About the Author
Hi, I followed and loved the course HTML5 from scratch.
I have a couple of questions:
How can i make the fields in a form required fields, so everybody has to fill in thos fields before submitting the form
and how can I use the form in an existing website
Regards,
Marcel
You need to use javascript or jquery to do that. A basic google search will give you lot many answers.