Basic HTML Forms

What is an HTML Form?

An HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

Basic form elements

  • text input — a simple text box that allows input of a single line of text (an alternative, password, is used for security purposes, in which the characters typed in are invisible or replaced by symbols such as *)
  • checkbox — a check box
  • radio — a radio button
  • file — a file select control for uploading a file
  • reset — a reset button that, when activated, tells the browser to restore the values to their initial values.
  • submit — a button that tells the browser to take action on the form (typically to send it to a server)
  • textarea — much like the text input field except a textarea allows for multiple rows of data to be shown and entered
  • select — a drop-down list that displays a list of items a user can select from

Source: Wikipedia

Basic Form elements examples
http://www.w3schools.com/html/html_forms.asp

The basic steps

  • Step one: The basic code
  • Step two: Adding structure and behaviour
  • Step three: Adding semantics, style and a bit more structure

Step 1: The basic code

<form>
  Name: <input type="text" name="name" id="name" value="" />
  Email: <input type="text" name="email" id="email" value="" />
  Comments: <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
  <input type="submit" value="submit" />
</form>

When rendered in a browser, this form looks as shown below.
Form1


Step 2: Adding structure and behavior

<form id="contact-form" action="script.php" method="post">
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" />
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" />
        </li>
        <li>
            <label for="comments">Comments:</label>
            <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
        </li>
        <li>
            <input type="submit" value="submit" />
            <input type="reset" value="reset" />
        </li>
    </ul>
</form>

When rendered in a browser, this form looks as shown below.
Form2


Step 3: Adding semantics, style and a bit more structure

Now I’ll finish off what I started at the beginning of the article, with the following final version of my example form:

<form id="contact-form" action="script.php" method="post">
  <fieldset>
    <legend>Contact Us:</legend>
    <ul>
      <li>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name" value="" />
      </li>
      <li>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email" value="" />
      </li>
      <li>
        <label for="comments">Comments:</label>
        <textarea name="comments" id="comments" cols="25" rows="3"></textarea>
      </li>
      <li>
       <label for="mailing-list">Would you like to sign up for our mailing list?</label>
       <input type="checkbox" checked="checked" name="mailing-list" value="Yes, sign me up!" />
      </li>
      <li>
        <input type="submit" value="submit" />
        <input type="reset" value="reset" />
      </li>
    </ul>
  </fieldset>
</form>

When rendered in a browser, this form looks as shown below.
basic-form

To see this form live in a browser and play with it, following this link to the form on a separate page.

The last two major elements added to this form are fieldset and legend. Both of these elements are not mandatory, but are very useful for more complex forms and for presentation.

The fieldset element allows you to organize the form into semantic modules. In a more complex form, you could for example use different fieldsets to contain address information, billing information, customer preference information, and so on. The legend element allows you to name each fieldset section.

A little bit of CSS is applied to this form, to style the structural markup. This is applied to the third form example using an external stylesheet—click on this link to see the styles. The two most important tasks I wanted the basic CSS to do is add margins to line up the labels and input boxes, and get rid of the unordered list’s bullet points. Here is the CSS that resides in the external stylesheet:

#contact-form fieldset {width:40%;}
#contact-form li {margin:10px; list-style: none;}
#contact-form input {margin-left:45px; text-align: left;}
#contact-form textarea {margin-left:10px; text-align: left;}

What happens when you add this?

#contact-form input[type=submit] {margin-left:-10px;}

To style specific input types read this:
http://css-tricks.com/styling-texty-inputs-only/

2 thoughts on “Basic HTML Forms”

  1. Malcolm Bungcayao says:

    Hi Jamie,

    I was wondering if you had any advice on creating a secure (non-wordpress) form with php. If you could refer me to any articles or tutorials on how to create a secure form, it would be a gigantic help. 

    Thank you much,
    Malcolm

  2. tutorialsplane says:

    Thanks for Share this !!!!

Leave a Reply

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