HTML form

Element

Element determine user input data collection form.


.
các phần tử của form
.

The form in HTML contains form elements - the element types that take input data such as filling in text fields, checkboxes, buttons, submit buttons .

Element

This is the most important element of the form, can be displayed in many ways, depending on the type of attribute. Here are some examples.

  1. type = 'text'> Define a text entry line
  2. type = 'radio'> Define a round button to select one of the answers
  3. type = 'submit'> Button definition to submit / submit forms

Input data is text

Define a text entry line:


Tên:



Họ:

 

HTML form Picture 1
Enter the input data in writing

Note: The form itself does not appear and the field's default width is 20 characters.

Round button to select input data

type = 'radio'> defines a round button for users to select one of the answers.


Nam

Nữ

Khác

HTML form Picture 2
Round button to select 1 of the available answers

Submit form / submit form

type = 'submit'> button definition to submit / submit the form to the form-handler, usually the home page that has the script to handle the input data. Form-handler is specified in the action attribute of the form.


Tên:



Họ:




 

HTML form Picture 3
Images displayed on the browser

Action attribute

The action attribute defines what happens when the form is submitted. Normally, data will be sent to the website on the server when the user clicks on the submit button. In the above example, the data is sent to the '/action_page.php' page . The page containing the server's script will process the data sent.

 

If the action attribute is omitted, the form will be sent to the current page.

Target attribute

The target attribute determines whether the sent result will be displayed on the browser's new tab, in the frame or in the current window. The default value is '_self ', which means that the submitted form opens in the current window.

To display results on another tab, use the value '_blank'

 

Other values ​​can be used as '_parent' and '_top' or a name that represents the name of the iframe.

Method properties

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

 

or

 

When to use GET?

The default method when submitting form data is GET but when using GET, the data in the form will be visible on the address of the page:

 /action_page.php?firstname=Mickey&lastname=Mouse 

Note about GET

  1. The data in the form will be added behind the URL in name / value pairs.
  2. URL length is limited (about 300 characters).
  3. Do not use GET to send sensitive data (visible in the URL).
  4. Useful when users want to bookmark results.
  5. Recommended for non-confidential data, such as query strings in Google.

When to use POST?

Remember to always use POST when the data in the form contains personal, important, sensitive information. POST does not display data on the page address.

Note about POST

  1. POST is not limited to size, can be used to send large amounts of data.
  2. The POST form page cannot be bookmarked.

Name attribute

Each input field must have a name. attribute name. If ignored, that data will not be sent. The example below will only send to 'LastName' because the 'Name' input element has no n a me attribute.


First name:



Last name:




 

Group data in the form by

Element

used to group related data in the form. Element Describe the description for the element

.

 

Thông tin cá nhân:
Tên:



Họ:




 
 

HTML form Picture 4
Group related data by element

Previous article: HTML and XHTML

The following article: Elements of the Form in HTML

4.5 ★ | 2 Vote

May be interested

  • Style properties in HTMLStyle properties in HTML
    the style attribute specifies the style for the html element.
  • Text in HTMLText in HTML
    the element in html is used to define a paragraph of text.
  • How to Use Text Color Tags in HTMLHow to Use Text Color Tags in HTML
    this article explains how to change the font color in html documents. although the html style tag is obsolete in html5, you can use css to color content on an html page. if you use an older version of html, you can use the html text color tag as needed.
  • Format text in HTMLFormat text in HTML
    format elements in html help determine the style and importance of text.
  • Elements in HTMLElements in HTML
    the html element usually goes in pairs, including the opening tag, closing tag, and the content inside the two tags.
  • Symbol - Icon in HTMLSymbol - Icon in HTML
    html has many mathematical, technical and monetary symbols that cannot be used to write.
  • Upload File in PHPUpload File in PHP
    a php script can be used with an html form that allows users to upload files to the server. first these files are uploaded to a temporary directory, then moved to a destination by a php script.
  • Common HTML mistakes that you should avoid for better web programmingCommon HTML mistakes that you should avoid for better web programming
    learning html is not difficult, but when running it in the browser, errors often occur. here are common html errors and how to handle them for better web development.
  • How to insert spaces in HTMLHow to insert spaces in HTML
    this tutorial explains how to insert spaces and line breaks in html. because no matter how many times you type a space, html will display a space so to insert more than one space, you will need to use the html tag.
  • Image img in HTMLImage img in HTML
    when you visit the website, you will often see images of all sizes and positions on the page. images in html web pages will help to enrich the content as well as increase the aesthetics of the page.