Home / Articles / Programming languages / Markup languages / HTML & CSS / Adding a form to a page in HTML

Adding a form to a page in HTML

Adding a form to a page in HTML
 
Adding a form to a page in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


The forms are designed for data exchange between the user and the server. Using forms is not limited to sending data to the server. With scripts you can have access any element of the form, to modify and apply it by your judgment.

To specify to the browser where is the beginning and end of the form, use the tag form (example 1). Between the opening and closing tags <form> and </form> you can input any necessary HTML tags. This allows you to add form elements to cells, and also to use images. A document may contain multiple forms, but they shouldn't be placed within one another.

Example 1. Adding form to a document.

<form>
  This is the place for form elements
</form>

Any kind of form contains several parameters:

  1. Form elements, that contain fields to input information.
  2. Buttons to send form data to the server.
  3. Address of the program on the web server that processes the content of the form.

Two parameters are being used to specify to the browser where and how to send the data:

  • action - address of CGI-program, which receives the data from the form.
  • method - the method of sending the data in the form, from the browser to the web server. Can have two values: GET and POST.

When using GET method, form data are sent in the URL-query and listed after the character - question mark (?). For example, the query string can have this form:
http://www.example.com/cgi-bin/program.cgi?name=Basil&lastname=Pumpkin

When using the method POST, data is sent to a web server inside the body of a query, and the date size can be quite large (example 2).

Example 2. Form with the specified parameters action and method.

<form action="/cgi-bin/program.cgi" method="POST">
  This is the place for form elements
</form>

GET method is used in the browser by default, so when choosing a method of sending data to the server, the parameter method="GET" can be omitted.

When you place the form into a cell, additional spacings are added at the top and bottom. To remove them, add style parameter margin to the tag form. The parameter must have zero value (example 3).

Example 3. Using styles to set margins in a form.

<form style="margin: 0px">
  ...
</form>

 

Read also

Text field in HTML

Text field in HTML

Buttons in HTML

Buttons in HTML

Form elements in HTML

Form elements in HTML

Checkboxes in HTML

Checkboxes in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation