CODEWITHSUNDEEP
javascripthtml
user5109370
user5109370

Reputation:

What is the benefit for using "form" tag?

I don't understand what is the benefit of using <form> tag.

Look at the following code:

<html>
<head>
<script>
function check(browser) {
    document.getElementById("answer").value=browser;
}
</script>
</head>
<body>

<p>What's your favorite browser ?</p>

<form>
<input type="radio" name="browser" onclick="check(this.value)" value="Internet Explorer">Internet Explorer<br>
<input type="radio" name="browser" onclick="check(this.value)" value="Firefox">Firefox<br>
<input type="radio" name="browser" onclick="check(this.value)" value="Opera">Opera<br>
<input type="radio" name="browser" onclick="check(this.value)" value="Google Chrome">Google Chrome<br>
<input type="radio" name="browser" onclick="check(this.value)" value="Safari">Safari<br>
<br>
Your favorite browser is: <input type="text" id="answer" size="20">
</form>

</body>
</html>

If I'm removing the tags: "form" and "/form" I'm getting the same results. so what is the different ?

Thanks

Upvotes: 5

Views: 3236

Answers (4)

Royi Namir
Royi Namir

Reputation: 148524

If I'm removing the tags: "form" and "/form" I'm getting the same results

Yes. At client site.

Try to post it to a server. You won't be able to read anything at the server side.

In other words , if you add : 

<input type="submit" />

The server won't know how to read those values.

Form posts its inputs values (+ select , textarea etc...) to a server. Then you can read those values at the server side.

Other benefits/features

  • Giving a name to a form allows you to access its child inputs via their name : alert(myForm.myUserInputName)
  • You can cause the post to yield its result/response in other iframe/location using target property.
  • You can cause the page to post itself via GET and not via POST , which will cause all input values to be as QueryString.

Upvotes: 7

Benjamin Sch&#252;ller
Benjamin Sch&#252;ller

Reputation: 2189

First of all you can set the calling action as an attribute in the form tag.

Then there is another attribute "method" which decides if it is an get- or post-request.

You may also have multiple forms on your website and just want to sent the data within the form tag.

<form id="form1" action="http://localhost/urlone" method="get">
    <input type="text" name="field1" />
    <input type="submit" />
</form>

<form id="form2" action="http://localhost/urltwo" method="post">
    <input type="text" name="field2" />
    <input type="submit" />
</form>

If you click the first submit button form1 will be send with the field1 as a get request. If you click the second button. form2 will be sent as an post request.

Hope it helps to understand.

Upvotes: 1

Ani Agarwal
Ani Agarwal

Reputation: 257

Form tags are used to 'submit' data to the application that is controlling the form behaviour: for example, if you had a registration form, you would have a back-end language that would 'accept' the data from the form and then store it in a database.

For the language to be able to accept the data, form tags are required because they have the 'action' attribute.

Also, when you have form tags, the user can press Enter to submit it.

And as Kevin P. said, they are also semantically useful.

Upvotes: 0

Kevin P.
Kevin P.

Reputation: 401

It's used to provide meaning to the browser and the developer

http://www.w3schools.com/html/html5_semantic_elements.asp

Semantics is the study of the meanings of words and phrases in language.

Semantic elements are elements with a meaning.

It's also used when you want to "submit" the form as GET/POST for example, to save data to a database.

Upvotes: 1

Related Questions