HTML Forms and attributes

HTML Forms and attributes
Nikhil
Published on 2021-07-02 02:52:10

HTML forms and attributes examples and also submitting of forms

Attribute Description
accept-charset Specifies the character encodings that are to be used for the form submission.
action Specifies where to send the form data when a form is submitted.
autocomplete Specifies whether a form should have autocompleted on or off.
enctype Specifies how the form data should be encoded when submitting it to the server (only for
method="post").
method Specifies the HTTP method to use when sending form data (POST or GET).
name Specifies the name of a form.
validate Specifies that the form should not be validated when submitted.
target Specifies where to display the response that is received after submitting the form

In order to group input elements and submit data, HTML uses a form element to encapsulate input and submission elements. These forms handle sending the data in the specified method to a page handled by a server or handler. This topic explains and demonstrates the usage of HTML forms in collecting and submitting input data.

 

HTML Form Submitting


The Action Attribute

The action attribute defines the action to be performed when the form is submitted, which usually leads to a script that collects the information submitted and works with it. if you leave it blank, it will send it to the same file

<form action="action.php">

The Method Attribute

The method attribute is used to define the HTTP method of the form which is either GET or POST.

<form action="action.php" method="get">
<form action="action.php" method="post">

The GET method is mostly used to get data, for example, to receive a post by its ID or name, or to submit a search query. The GET method will append the form data to the URL specified in the action attribute.

www.example.com/action.php?firstname=Mickey&lastname=Mouse

The POST method is used when submitting data to a script. The POST method does not append the form data to the action URL but sends using the request body. To submit the data from the form correctly, a name attribute name must be specified.

As an example let's send the value of the field and set its name to lastname:

<input type="text" name="lastname" value="Mouse">

More attributes

<form action="action.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
<!-- form elements --></form>

 

HTML Target attribute in form tag


The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The target attribute defines a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame). From Tag with a target attribute:

<form target="_blank">

 

Attribute Values
Value Description
_blank The response is displayed in a new window or tab
_self The response is displayed in the same frame (this is the default)
_parent The response is displayed in the parent frame
_top The response is displayed in the full body of the window
framename The response is displayed in a named iframe

 

Note: The target attribute was deprecated in HTML 4.01. The target attribute is supported in HTML5. Frames and framesets are not supported in HTML5, so the _parent, _top, and frame name values are now mostly used with iframes.

 

HTML Form Uploading Files


Images and files can be uploaded/submitted to the server by setting enctype attribute of the form tag to multipart/formdata. enctype specifies how form data would be encoded while submitting to the server.

Example

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <form method="post" enctype="multipart/form-data" action="upload.php">
    <input type="file" name="pic" />
    <input type="submit" value="Upload" />
  </form>
</body>
</html>

 

HTML Form Grouping a few input fields


While designing a form, you might like to group a few input fields into a group to help organize the form layout. This can be done by using the tag. Here is an example of using it.

For each fieldset, you can set a legend for the set using the tag LEGEND TEXT

Example

<!DOCTYPE html>
<html>
<head>
  <title>Atutorialhub demo title</title>
</head>
<body>
  <form>
    <fieldset>
      <legend>1st field set:</legend>
      Field one:<br>
      <input type="text"><br>Field two:<br>
      <input type="text"><br>
    </fieldset><br>
    <fieldset>
      <legend>2nd field set:</legend>
      Field three:<br>
      <input type="text"><br>
      Field four:<br>
      <input type="text"><br>
    </fieldset><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

 

output:

1st field set: Field one:

Field two:

 

2nd field set: Field three:

Field four:


 

Browser Support

Chrome, IE, Edge, Firefox, Safari, and Opera's latest versions also support the tag

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website