How to Create a Simple Form in HTML Complete with Images

You must be familiar with the term “form”. A form is a table of contents which is one of the most popular interactive displays on the internet. This form or checklist is used to request information from the user which will then be processed. In general, form processing is done using server-side scripts.

For certain purposes, you will of course need to use the forms on your website, for example, forms for surveys, biodata forms, registration forms, login forms, and others. Forms allow users to interact with text, graphics, or anything else that is displayed in the browser. In this discussion, I will explain about how to create a form in HTML. For more details, let’s see the explanation below:

Tags Form

Tags

is a tag used to define a form. So, a form is formed by tag pairs

…..

. On tags

There are two attributes, namely the method and action attributes, which have the following functions:

Attribute	Function
Method	Used to determine how to send user-entered data to the web server (form processing method). Where there are two methods, namely GET and POST. The POST method sends all data from a separate form to the URL. Meanwhile, the GET method sends data to the server by placing it at the end of the URL.
Action	Used to specify the location or URL of the file that will be used to process the form.

The following is an example of using the . tag

:

 ………………………………… 

Input Tags

Tags is a tag that is used to create elements that are used to request information from the user or create text box controls such as checkboxes, textboxes, buttons, radio buttons, and others. The use of this tag also does not require a closing tag. Next, tag has the following common attributes:

Attribute	Function
name	Defines the name of the input element. You must write this attribute on all elements except elements of type clear and submit.
maxlength	Specifies the maximum number of characters that can be entered in an input element.
value	Specifies a default value for an input element. For textbox, specify the text that is written. For checkboxes or radios, specify the value of the selected item to be sent to the server. Meanwhile, for submit and reset buttons, this attribute is used to determine the text written on the button.
size	Specifies the width of the input element in pixels where the default size is 20 pixels.
checked	Only used in checkbox and radio types to indicate an item is selected or not (Explanation of the checked attribute will be discussed in the next material).
type	Determine the type of input to be used such as text, radio and others.

Of course there are other attributes that have not been mentioned above, because the ones above are only the most common attributes. For the future I will explain the attributes that I mean.

Attribute type=”text”

In general, there are several types that exist in the type attribute, but in this material what will be discussed is the type attribute with a value or text type, while the other types will be explained in the next tutorial. The text type is used to create a text box that allows the user to enter data in text form.

The following is an example of writing code and using the tag in HTML:

       
Isilah formulir dibawah ini dengan baik dan benar ! 
  
   
    NIM :  

    Alamat Rumah :  

    Email :  

    No.Telepon :  

             
 

After the above code is executed in the browser it will appear as shown below:

From the picture above, you can see the difference in the use of the size attribute for each textbox, some are 11px, 40px and no size is set so they have a width with a default value of 20px. And also in the “NIM” textbox the maxlength attribute is set which is worth 9, while in other textboxes it is not set so that it is infinite.

Furthermore, the list does not only consist of a text box (textbox) but also submit and reset buttons. The discussion about the submit and reset buttons will be explained in the next material. That’s the material on how to make a simple form in HTML, I hope you can understand this material well.

“If you’re doing your best, you won’t have any time to worry about failure.” H. Jackson Brown, Jr.

Share :