$show=/label

HTML Forms - <form> Tag Examples

SHARE:

A quick guide to HTML forms with examples. HTML form is used to collect the user input using

tag.

1. Overview


In this tutorial, We'll learn about how to use <form> tag and what is the importance of it. We will talk about a few examples where <form> tag usage is appropriate.

The HTML <form> element defines a form that is used to collect user input. Below is the format of the form tag.

<form>
...
...
form inside elements
...
...
</form>

HTML-Forms


<form> tag is used in all registration or log in pages. Because the user provides the data and pushed to the server for persistence.



2. <form> elements


<form> elements can be any input accepting elements such as text fields, checkboxes, radio buttons, submit buttons, and more.

input elements tag is <input> and it has a attribute 'text'. This attribute value will change based on our input type choice.

<input type="text">: Defines a one-line text input field
<input type="radio">: Defines a radio button (for selecting one of many choices)
<input type="submit">: Defines a submit button (for submitting the form)

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
</form>


As of now, we have seen the input accepting elements. But these are optional.

Important is <form> tag should have one submit button that takes the values and passes to the action. We will talk about the action in the next section of this article.

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
  <input type="submit" value="Submit">
</form>

3. <form> tag attributes


<form> tag mainly has three attributes.

a) action
b) target
c) method

3.1 action attribute


The action attribute defines the action to be performed when the form is submitted.

Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

<form action='login-form.php'>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
  <input type="submit" value="Submit">
</form>

The best practice is providing the action name. If we do not provide the action then it takes the action to the current page.

3.2 target attribute


Apart from the action attribute, there is another attribute that is target. This tells to the browser to open the next page in the new window or in the same window.

The following are the values for the target attribute.

_blank: Opens in a new tab or browser
_self: Open in the current window.
_parent: Opens the linked document in the parent frame
_top: Opens the linked document in the full body of the window

<form action='login-form.php' target='_blank'>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  Email:<br>
  <input type="text" name="email">
  DOB:<br>
  <input type="text" name="dob">
  <input type="submit" value="Submit">
</form>

3.3 method attribute


The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.

GET Example:

<form action='login-form.php' target='_blank' method='get'>

POST Example:

<form action='login-form.php' target='_blank' method='post'>

The default method type is GET. This is used when there is no sensitive data that is posted on the page because all of the form data is visible in the browser URL.

login-form.php?firstName=Jhon&lastName=Peter

Important points on GET:

Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user wants to bookmark the result
GET is better for non-secure data, like query strings in Google

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

Important points on POST:

POST has no size limitations and can be used to send large amounts of data.
Form submissions with POST cannot be bookmarked


4. Name attribute on <input> tag


By this, you should have got a doubt on how to get the values of form in the action. Because there should be some mapping to the values for input tag.

<input> tag has a name attribute that takes the name to each input field.

Take a look at the following input tags which has name attributes and it has a unique value.

  <input type="text" name="firstname">
  <input type="text" name="lastname">
  <input type="text" name="email">

If we do not provide the name attribute to the input fields then these values will not be sent to the action.

5. <form> tag attributes


We have seen already 3 attributes of form. Apart from them, there are many others as below.

accept-charset: Specifies the charset used in the submitted form (default: the page charset).
action: Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete: Specifies if the browser should autocomplete the form (default: on).
enctype: Specifies the encoding of the submitted data (default: is url-encoded).
method: Specifies the HTTP method used when submitting the form (default: GET).
name: Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate: Specifies that the browser should not validate the form.
target: Specifies the target of the address in the action attribute (default: _self).

6. Conclusion


In this article, We have seen HTML <form> tag and its attributes.

<form> should have submit button and input fields should have 'name' attribute.

Every form tag should have action and method attributes.

If you have a different set of input fields then we can group them using <fieldset> tag.



COMMENTS

BLOGGER

About Us

Author: Venkatesh - I love to learn and share the technical stuff.
Name

accumulo,1,ActiveMQ,2,Adsense,1,API,37,ArrayList,16,Arrays,7,Bean Creation,3,Bean Scopes,1,BiConsumer,1,Blogger Tips,1,Books,1,C Programming,1,Collection,5,Collections,22,Collector,1,Command Line,1,Compile Errors,1,Configurations,7,Constants,1,Control Statements,8,Conversions,6,Core Java,81,Corona India,1,Create,2,CSS,1,Date,3,Date Time API,4,Dictionary,1,Difference,1,Download,1,Eclipse,2,Efficiently,1,Error,1,Errors,1,Exception,1,Exceptions,3,Fast,1,Files,9,Float,1,Font,1,Form,1,Freshers,1,Function,3,Functional Interface,2,Garbage Collector,1,Generics,4,Git,4,Grant,1,Grep,1,HashMap,1,HomeBrew,2,HTML,2,HttpClient,2,Immutable,1,Installation,1,Interview Questions,5,Iterate,2,Jackson API,3,Java,29,Java 10,1,Java 11,5,Java 12,5,Java 13,2,Java 14,2,Java 8,66,Java 8 Difference,2,Java 8 Stream Conversions,2,java 8 Stream Examples,3,Java 9,1,Java Conversions,11,Java Design Patterns,1,Java Files,1,Java Program,2,Java Programs,65,java.lang,5,java.util. function,1,jQuery,1,Kotlin,10,Kotlin Conversions,3,Kotlin Programs,6,Lambda,1,lang,29,Leap Year,1,live updates,1,Logging,1,Mac OS,2,Math,1,Maven,1,Method References,1,Mockito,1,MongoDB,3,New Features,1,Operations,1,Optional,6,Oracle,5,Oracle 18C,1,Partition,1,Patterns,1,Programs,1,Property,1,Python,2,Quarkus,1,Read,1,Real Time,1,Recursion,2,Remove,2,Rest API,1,Schedules,1,Serialization,1,Servlet,1,Sort,1,Sorting Techniques,8,Spring,2,Spring Boot,23,Spring Email,1,Spring MVC,1,Streams,21,String,58,String Programs,9,String Revese,1,Swing,1,System,1,Tags,1,Threads,10,Tomcat,1,Tomcat 8,1,Troubleshoot,16,Unix,2,Updates,3,util,5,While Loop,1,
ltr
item
JavaProgramTo.com: HTML Forms - <form> Tag Examples
HTML Forms - <form> Tag Examples
A quick guide to HTML forms with examples. HTML form is used to collect the user input using
tag.
https://1.bp.blogspot.com/-a0YaWhiiATs/XU7ex-qpkHI/AAAAAAAAB0s/EfqNnVPjlNURmAO4MsnnGzl1B3BX23ghgCLcBGAs/s320/HTML-Forms.png
https://1.bp.blogspot.com/-a0YaWhiiATs/XU7ex-qpkHI/AAAAAAAAB0s/EfqNnVPjlNURmAO4MsnnGzl1B3BX23ghgCLcBGAs/s72-c/HTML-Forms.png
JavaProgramTo.com
https://www.javaprogramto.com/2019/08/html-form-tag.html
https://www.javaprogramto.com/
https://www.javaprogramto.com/
https://www.javaprogramto.com/2019/08/html-form-tag.html
true
3124782013468838591
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content