JavaScript Coder

The HTML Form Tag

form html form html form tag

The HTML form tag <form> and </form> is to create a form in your web page. All the input elements should go between the <form> and </form> tags.

You can have more than one HTML forms in a single page. However, do not nest HTML forms ( Don’t put one form in another form)! The general syntax of the form tag is given below:

<form action="server-script-url-here" method="GET or POST" >

...Input elements go here...

</form>

The following are the attributes you can have in the form tag:

Action

The HTML form action attribute points to the URL to which the form submission is sent. This will normally be a server side script written in a scripting language like Perl or PHP.

Example 1, Absolute URL:

<form action="http://someserver/cgi-bin/handle-data.pl">

If the form handling script is in the same website, you can give the relative URL:

Example 2, Relative URL:

<form action="/cgi-bin/handle-data.pl">

Learn about dynamically changing action field: Switching form action field dynamically

Method

Method of sending data to the action URL. The value is either ‘get’ or ‘post’. In the GET method, the form data is sent as part of the URL like:

handle-data.pl?name=john&email=john@server.com

GET method is suitable for small forms like a search form. For larger forms, use the POST method. Default is the GET method.

Enctype

The ‘Enctype’ attribute is for specifying the MIME type to be used for encoding the form data.

Some examples are: enctype="text/plain" data is sent as plain text enctype="multipart/form-data" used when files are uploaded

Target

Specifies the window to be used to load the response of the form submission. You can use the name of a window, frame or any of the following reserved keywords:

  • _blank Opens in a new window
  • _self The response is loaded in the same window that contains the form
  • _parent Loads in parent window. Used when the form is in a frame. The response is loaded in the parent frame
  • _top Loads in the top most window. Used when the form is in a frame. If the Target field is not mentioned, the response is loaded in the current window itself.

Opening the response of a form in a new window

If you want to open the response of the form in a new window, you can use _blank for the target field. The example below loads the results of a search in a new window:

<form action="../javascript-form/submit-form.html" target="_blank"> 
Query: <input type="text" name='query'/> 
<input type="submit" value="submit" /> 
</form>

See the code above at work: HTML Form Target Field Example

The ‘id’ attribute

The ‘id’ attribute is used to give identification to the form. For example, if you are using the JavaScript Form Validator, you will need the ‘id’ of the form to specify the form validations.

You can find more on HTML Forms in the HTML Form Tutorial.

See Also

Categories