Sunday, March 06, 2011

HTML Forms Quick Reference

THE FORM TAG

  • Encloses a given form.
  • There can be multiple forms on a page.
  • Requires an action attribute: <form action="myform.php">
  • The action determines what URL will be used for submitting the form to the server
  • Also requires a method attribute: <form action="myform.php" method="post">
  • The method determines whether HTTP GET or HTTP POST will be used for sending the form data to the server.
  • You'll almost always use method="post"

INPUT TAGS

  • Used for several different purposes including: single line text, checkboxes, radio buttons, submit buttons, file upload buttons, passwords, and hidden data.
  • The type attribute determines which type of UI element it will be, for example: type="text", type="checkbox"
  • The name attribute is also very important: <input type="text" name="username">
  • The name attribute is sent to the server along with the value the user enters. Without it, the server won't know what the data is for.
  • Yet another important attribute is: value. It holds the current value of the input field: <input type="text" name="username" value="Eastwood">

INPUT A SINGLE LINE OF TEXT

  • For a single line of text use: <input type="text" name="username">
  • Often you will want to initialize the input with an existing value. Using PHP that would look like this: <input type="text" name="username" value="<?php echo $username?>">
  • Or, using PHP short tags (which I prefer): <input type="text" name="username" value="<?=$username?>">
  • If the text is a password it's just like a single line of input text, except the browser will show asterisks instead of the password: <input type="password" name="password" value="<?=$password?>">

TEXT AREAS

  • For multiple lines of text, use the <textarea> tag instead.
  • Specify rows and columns to control the size:
    <textarea rows="5" cols="50" name="mytext">
    Some text
    </textarea>
  • Looks like this:


HIDDEN DATA

  • Many situations arise where you need to put some hidden data in a form. Often this is a database key value
  • Just use an input tag with type="hidden", and set the value attribute to hold the data: <input type="hidden" value="somevalue" name="my_hidden_data">
  • You do also need to give it a name attribute so the server will know what this data is for.

SELECT TAG

  • Select lets you have a pull down input element:
    <select name="mySelect">
        <option>Cat</option>
        <option selected="1">Dog</option>
        <option>Rabbit</option>
        <option>Turtle</option>
      </select>
    
  • Produces this:
  • Notice how the default value was selected using the selected attribute.
  • Later I will describe doing a select where you can select multiple options.

SUBMITTING THE FORM

  • When the input is a submit button, the value attribute determines what is written on the button.
  • Submit buttons always need a value: <input type="submit" name="Save" value="Save">
  • Submit buttons can be represented by an image instead of a normal button. In that case type must be set to "image" instead of "submit", and the src attribute points to the image: <input type="image" name="Save" src="path/to/image.jpg">

RESET

  • A 'reset' button clears all the form fields back to the state they were in when the page loaded.
  • A reset button is coded as follows: <input type="reset">

Later I'll talk about how forms can be submitted with Javascript so that you can submit the form without leaving or reloading the current page.

1 comments:

Tips dan Trik blogger said...

I really feel happy visiting here, because I could hardly find a tutorial css blogger, thank you.

Post a Comment