Basic HTML Forms and input


Hi friends,
Today I have come up with a new topic of forms in HTML.
We have studied only static design elements till now, but today we will learn elements which can interact with users.
So let us learn more about forms:

  • What are Web Forms:
  • HTML web forms let website become interactive by allowing user input.
  • Forms have front-end and back-end processing.
  • HTML takes care of the front-end and another language takes care of the back-end, such as PHP or ASP.
  • HTML can create forms, but HTML alone is not enough to process forms.
  • To create different input elements on form, it contains a series of HTML input tags and other elements.

Let’s see some of the tags important to create a form and its contents:

  • form tag:
  • The form tag wraps around the entire form. It means, starting form tag and ending form tag are used to create a form on webpage.
  • Some common attributes of form tag are:
    • action: This specifies the page or script used to process the form on the server-side. In other words you can say that; all the input entered in the form by the user, is carried to a server through the url specified in action attribute of form, where it is processed.
    • method: This specifies how the form gets processed. It defines the security of the data being transferred through the “action” attribute of form. This attribute has two values “get” and “post”. When “get” value of method attribute is used, you can see all the input entered by the user, in the URL in address bar of the browser, thus violating security. But when you use “post” value, you cannot see the input in the URL in address bar, thus maintaining security.

  • This was the form tag; now to create some input fields in the form we need input tag. So let’s see input tag.
  • input tag:
  • It is a very important element of the form tag.
  • The input tag specifies an input field where a user can enter data.
  • There are many input fields viz: textfield, checkbox, radiobutton, password etc.
  • Some common attributes are:
    • type: This specifies which input field we want to place on the form.
      Eg: if we need textbox on the form we will use type attribute with value “text”. If we need radiobutton, we will use “radio” value of “type” attribute and so on.

      <input type=”text”>
    • name: This attribute specifies a name for the element. It is nothing but the identity of the element. It is more useful when the form is being processed at server-side and/or client-side.
    • size: It specifies the width of the input element in characters.
    • max: It specifies the maximum amount of characters that could be entered in the input element.
      Eg: If a textfield (a textbox) has max=25, it means you can enter only 25 characters in it, not more than that.

  • Other than input tag there are many other tags to take input from user in form. These are as follows:
  • textarea tag:
  • The textarea tag is for large blocks of text.
  • You can use it to accept user address, any message etc.
  • It is made up of rows and columns.
  • Some common attributes are:
    • name: It specifies a name/identity for the element. It is used in server-side and/or client-side processing.
    • rows: It specifies the visible number of horizontal lines it will enclose.
    • cols: It specifies the visible width, i.e. the number of vertical lines it will enclose.
    • maxlength: It specifies the maximum number of characters allowed in the textarea. It is same as the “max” attribute of input tag.
  • select tag:
  • The select tag is used to create a dropdown list.
  • It can store number of items (data) in it.
  • You can select single or multiple items from a dropdown list at a time.
  • It includes starting option tag and ending option tag to specify each item in the list.
  • Some common attribute:
    • name: This attribute is common to all elements. It specifies a name for the element, which is then used in server-side and/or client-side processing.
    • multiple: It specifies if the list field can contain multiple values. It means, it allows the user to select multiple values or a single value as specified.
    • size: It specifies the maximum number of visible options.
      Eg: If you have given size=4, the dropdown list will have such a height that shows only 4 values at a time. You can scroll up and down to see other values.
  • label tag:
  • Label is a form element but not the user input element. This means, it is not designed to take any input. It just shows you some message or instructs you about something.
  • The label tag is used to associate a field heading with the input field.
  • For example: If you have 2 textfields (textboxes) on your form and you want the user to enter his/her first name in first textfield and last name in second textfield, you will instruct the user about it by placing the label before the textfields with headings ”First Name” and “Last Name”.
  • Some common attributes:
    • for: It specifies which form element the label is bound to. It matches up with the name attribute of the input element.
      Due to this, if we click on the text within the label element, the input element associated with it toggles.
  • fieldset tag:
  • This tag does not take any input.
  • It is used to group together certain fields.
  • It draws a box around the elements.
  • Some common attributes:
    • name: It is same as the other entire elements name attribute, specifies the name/identity for the fieldset element.
    • form: It specifies the name of the form to which it belongs.
    • disabled: It disables all the input elements within that particular fieldset.

fig 1

  • In the above figure, “Name” and “Sports” are the fieldsets that had enclosed number of input elements in it.

Here we finished with the theory regarding forms; we will now try it practically in next chapter.