HTML TUTORIAL PART-6 : HTML Form

HTML TUTORIAL PART-6 : HTML Form

What is Form in html?

Image

 

The means of getting information directly from the users of the site is called form. HTML forms are used to collect user information, including login systems, voting systems, and contact forms, especially on dynamic and database-based websites.

After collecting the information of the user / visitor with the form tag, you can process and save it in the database with backend script i.e. ASP, PHP or python etc.

In HTML, <form> – </form> is to be coded with this tag. Different Tags & Attributes have to be used to process information. Let’s see-

Form Attributes

The most common attributes in the <form> tag used to create the form are-

    Action passes data to the backend script through this attribute.

Image

Note: Here the data with the action attribute is passed to the server through process.php.

Method This attribute determines which method the data will be passed to the server, which is usually through the get and post method.

What is the difference between GET and POST?

There are many differences between GET and POST, all of which are discussed in the table below:

Get MethodPost method
Data sent via GET Method can be cached in the browser.Data sent via POST Method cannot be cached in the browser.
Data sent via GET Method is stored in the browser history.Data sent via POST Method is not in the browser history.
Data sent through GET Method can be bookmarked.Data sent via POST Method cannot be bookmarked.
Data sent via GET Method can be seen in the URL of the browser. So any sensitive or confidential information should not be sent through GET Method.Data sent via POST Method does not appear in the URL of the browser. So any sensitive or confidential information can be sent through POST Method.
It is not possible to send more data through GET Method.You can send as much data as you want through POST Method.
The GET Method can send data faster than the comparable POST Method.POST Method is slower than Comparative GET Method.
File cannot be uploaded to the server through GET Method.File can be uploaded to the server through POST Method.
Image

Target This attribute’s job is to specify the result passed in the database to show it in a new tab (window), frame or current window. Its values ​​are _self, _blank, _top and _parent

The job of _self is to show the result in the current window. By default the _self value is, that is, even if you do not use _self, it will show the result in the current window by default. And the job of _blank is to show the result in the new window. That is, if you use this value will show the result in the new tab of the browser. You can also use _top and _parent values, although these are not very common.

Image

Enctype determines how this attribute encodes the data before submitting / sending it to the server. Its possible values ​​are-

    application / x-www-form-urlencoded which is usually used in simple forms. Which is encoded by default.

    multipart / form-data This value encodes the data and uploads it in binary format. Which is usually used in image, word file etc.

  

1<form action=”/process.php” method=”GET” target=”_blank” 2enctype=”mutlipart/form-data”>

3</form>

Form Controls

Visitors have some form control to collect data, where you can determine what kind of data to collect by changing the input type. Let’s see-

  1. Text Input Controls
  2. Checkboxes Controls
  3. Radio Box Controls
  4. Select Box Controls
  5. File Select boxes
  6. Hidden Controls
  7. Clickable Buttons
  8. Submit and Reset Button

There are usually three types of text input controls that you can use in HTML FORM.

  1. Single-line text input controls
  2. Password input controls
  3. Multiple-Line Text Input Controls

Single-line text input controls

This control is used to input only one line from the user. For example, search box, name, etc. And it is created by using the <input> tag of HTML. Let’s look at an example:

Image

What are the attributes of single-line text input controls?

The following attributes are used in Single-line text input controls.

Name of Sr.No attribute and its usage
1 type Used to determine what type of input control. Usually text is set as its value.
2 names The value given in the Input Control is used to determine what name will be given to the server, or what name will be received from the server.
3 value Used to send an initial or default value to the server.
4 size Used to determine the size of the input control based on the characters.
5 maxlength Used to determine the maximum number of characters that can be input in the Text Controle.

Note: In addition to HTML 5 there are many more single line input tags such as: color, date, datetime-local, email, month, number, range, search, tel, time, url, week, etc. See the following example:

Image
Image

Password input controls

This is also a single-line text input, it is used to collect the user’s password, the use of this input control as a result of the user’s input character gula mask that is, the character / characters come as dot which we usually see in the password box. . It is defined with <input type = ”password”>.

Let’s look at an example:

Image

What are the attributes of password input controls?

The following attributes are used in password input controls.

Name of Sr.No attribute and its usage
1 type Used to determine what type of input control. Usually the password is set as its value.
2 names The value given in Password Input Control is used to determine what name will be given to the server, or what name will be received from the server.
3 value Used to send an initial or default value to the server.
4 size Used to determine the size of the input control based on the characters.
5 maxlength Password Input Controle is used to determine the maximum number of characters you can input.
 

Multiple-Line Text Input Controls

This input method is used for input main of multiple lines. It is defined by <textarea> </textarea>.

Let’s look at an example:

Image

What are the attributes of Multiple-Line Text Input Controls?

The following attributes are used in Multiple-Line Text Input Controls.

Name of Sr.No attribute and its usage
1 name The value given in the Input Control is used to determine what name will be given to the server, or what name will be received from the server.
2 rows The input field determines the height equal to the number of rows.
3 cols The input field determines the width equal to the number of columns.

Checkbox Control

It is used to select more than one option from many options.

Let’s look at an example:

Image

What are the attributes of Checkbox Control?

The following attributes are used in Checkbox Control.

Name of Sr.No attribute and its usage
1 type Used to determine what type of input control. The checkbox </b> is usually set as its value.
2 names The value given in the checkbox Input Control is used to determine what name will go to the server, or what name will be received from the server.
3 value Used to send an initial or default value to the server.
4 checked Used to keep the default input control checked.

Radio Button Control

It is used to force only one option from many options. Let’s look at an example:

Image

What are the attributes of radio control?

The following attributes are used in radio control.

Name of Sr.No attribute and its usage  
1 type Used to determine what type of input control. Radio </b> is usually set as its value.
2 names The value given in the radio input control is used to determine what name will be given to the server, or what name will be received from the server.
3 value Used to send an initial or default value to the server.
4 checked Used to keep the default radio input control checked.

Select Box Control

Select Box It is also called dropdown box, it reveals you many options in the form of dropdown list, and you can select one or more lists from that dropdown list. Let’s look at an example:

Image

Note: However, if you want, you can sort the Options of Select group wise through the <optgroup> </optgroup> tag.

See the following example:

Image

Input List and datalist Control

It is used to facilitate searching in the input field. Here you will find two benefits at once. Firstly dropdown list and secondly real time searching facility. See the following example:

Image

What are the attributes of Select Control?

The following attributes are used in Select Control.

Name of Sr.No attribute and its usage
1 name The value given in Select Input Control is used to determine what name will be given to the server, or what name will be received from the server.
2 value Used to send value to server.
3 multiple The opportunity to select multiple options is used for the main.
4 Selected The ability to select one or more options by default is used for the main.

File Upload Box Controls

It is used to allow the user to upload any type of file on the website. It is defined by <input type = ”file”>. Let’s understand with an example:

Image

What are the attributes of File Upload Control?

The following attributes are used in File Upload Control.

Name of Sr.No attribute and its usage
1 type Used to determine what type of input control. The file is usually set as its value.
2 names File Upload Control is used to determine what the file will be called to the server, or what name will be received from the server.
3 accept Determines what type or format of file uploads will allow.
 

Button Controls

The button tag is used to reset the survey from the website, and to take action on various clickable clicks of the html. And this tag can be created in two ways. One is <input type = ”button” /> the other is <button type = ”button”> </button> and the value of this type will work if you submit. And if you reset the value, the reset of the form will work. In addition, you can use the image as a button type, but in this case you have to say the source of the image as the value of src. Let’s take a look at an example of all the buttons:

Image

Hidden Form Controls

Hidden Form Control is used to send any data from the form to the server in a hidden state. HTML Hidden Form Control data is not visible in the browser.

Let’s look at an example:

Image

fieldset and legend

The fieldset tag is used to group the elements of the form, and the legend is used to caption the fieldset. Let’s look at an example:

Image

Output Input Control

The <output> tag is used to show the calculation output of two input fields. However, in this case you have to write a short javascript code in the <form> tag. Let’s look at an example:

Image

Leave a Reply

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