Pin Me

How to Build Forms in HTML

written by: Maureen Cutajar•edited by: Michele McDonough•updated: 5/19/2010

HTML forms can be considered as an area that is created within your HTML document which will specifically contain HTML code for your online forms.

  • slide 1 of 2

    HTML Code for Online Forms

    The HTML code for your online forms will contain form elements that will enable the end user to enter the required information online. These form elements can include text boxes such as a text area or text fields. Alternatively the information entered by the end user can be controlled by including radio-buttons, drop-down menus and checkboxes. All these form elements can easily be included in your online forms via proper HTML code.

    To create a form in an HTML document the <form> tag is used. The form elements are defined with the <input> tag. The latter tag defines the type of input to be used in the form by including the type attribute code for the specific input.

    Some examples of input types are the following:

    Text Fields

    In online forms, text fields are used when the user is required to type his or her name or telephone numbers. In other words these text fields are not limited to a number of replies.

    To insert a text field in a form the following code is used:

    <form>

    First name: <input><br />

    Initial: <input><br />

    Last name: <input>

    </form>

    Radio Buttons

    Radio buttons are used when the end user is required to select one choice from a specified list.

    To insert a list with radio buttons used the following code:

    <form>

    <input value="20-29"> 20-29 <br />

    <input value="30-35"> 30-35 <br />

    <input value="36-40"> 36-40

    </form>

    Checkboxes

    Check boxes are similar to radio buttons; however with check boxes can select more than one item from the specified list.

    <form>

    Weekdays <input value="Weekdays" /><br />

    Saturday <input value="Saturday" /><br />

    Sunday <input value="Sunday" />

    </form>

  • slide 2 of 2

    Submitting your Form

    The information that is collected in an online form is sent to an identified server when the user clicks on the Submit button. This process is defined by the HTML form’s “action” attributes which defines the name of the server where the form data is sent. We also need to tell the browser how to send the form data to the server and this process is defined via the “method” attributed. The “method” attribute specifies how the data is send by using either the “get” or the “post” commands.

    The “get” method is only used when the data collected does not exceed 255 characters, in addition this method is not secure and is thus not recommended when confidential data is being collected. In all other cases the “post” method is used.

    The below code illustrates how to specify the form’s action and method attributes by specifying an email address. In the below example the data submitted in a form will be received by email.

    <form action="server_action.aspx" method="get">

    Email: <input><br />

    Comment: <input><br />

    <input value="Submit">

    </form>

HTML Web Page Coding

This series will guide users through a number of articles that explain basic HTML web page coding starting from the basic elements of an HTML document to advanced HTML coding that includes how to insert a table and build forms in a web page with HTML code.
  1. The Structure of an HTML Document
  2. Basic Formatting Codes in HTML
  3. Advanced Formatting in HTML
  4. How to Build Forms in HTML