Using HTML to Fill Out Forms

By Nikhil Abraham

Forms allow you to capture input from your website visitors. Capturing input from visitors allows you to modify existing content on the page. For example, price and date filters on airline websites allow for finding a desired flight more quickly. You also can store the input for later use.

For example, a website may use a registration form to collect your email, username, and password information to allow you to access it at a later date.

Understanding how forms work

Forms pass information entered by a user to a server by using the following process:

  1. The browser displays a form on the client machine.

  2. The user completes the form and presses the submit button.

  3. The browser submits the data collected from the form to a server.

  4. The server processes and stores the data and sends a response to the client machine.

  5. The browser displays the response, usually indicating whether the submission was successful.

For now, all you need to know is that server-side programming languages such as Python, PHP, and Ruby are used to write scripts that receive and store form submissions.

Forms are very flexible, and can record a variety of user inputs. Input fields used in forms can include free text fields, radio buttons, checkboxes, drop-down menus, range sliders, dates, phone numbers, and more. Additionally, input fields can be set to initial default values without any user input.

Selected Form Attributes
Attribute name Possible values Description
type checkbox
email
submit
text
password
radio
(a complete list of values has been omitted here for brevity)
Defines the type of input field to display in the form. For
example, text is used for free text fields, and submit is used to
create a submit button.
value text The initial value of the input control.

Creating basic forms

You create a basic form by

  1. Defining a form with the form element.

    Start by adding an opening <form> tag and closing </form> tag.

  2. Using the action attribute, specify in the form element where to send form data.

    Add an action attribute to your opening <form> tag and set it equal to the URL of a script that will process and store the user input.

  3. Using the method attribute, specify in the form element how to send form data.

    Add a method attribute to your opening <form> tag and set it equal to POST.

    The method attribute is set equal to GET or POST. In general, POST is used for storing sensitive information (such as credit card numbers), whereas GET is used to allow users to bookmark or share with others the results of a submitted form (such as, for example, airline flight listings).

  4. Providing a way for users to input and submit responses with the input element.

    Between the opening <form> and closing </form> tags, create one <input> tag.

    Your form will have only one opening and closing <form> tag; however, you will have at least two <input> tags to collect and submit user data.

  5. Specify input types using the type attribute in the input element.

    For this example, set the type attribute equal to “text”.

    The <input> tag does not have a closing tag, which is an exception to the “close every tag you open” rule. These tags are called self-closing tags.

  6. Finally, create another <input> tag and set the type attribute equal to submit.

The following example code shows the syntax for creating the form shown.

image0.jpg

<form action="mailto:nikhil.abraham@gmail.com" method="POST">
   <input type="text" value="Type a short message here">
   <input type="submit">
</form>

The action attribute in this form is set equal to mailto, which signals to the browser to send an email using your default mail client (such as Outlook or Gmail). If your browser is not configured to handle email links, then this form won’t work. Ordinarily, forms are submitted to a server to process and store the form’s contents, but in this example form the contents are submitted to the user’s email application.