HTML FORMS element

•Forms are a vital tool for the webmaster to receive information from the web surfer, such as: their name, email address, credit card, etc. A form will take input from the viewer and depending on your needs, you may store that data into a file, place an order, gather user statistics, register the person to your web forum, or maybe subscribe them to your weekly newsletter.

 Text Fields

•Before we teach you how to make a complete form, let's start out with the basics of forms. Input fields are going to be the KEY THINGS on your form's needs. The <input> has a few attributes that you should be aware of:-

–type - Determines what kind of input field it will be. Possible choices are text, submit, and password.

–name - Assigns a name to the given field so that you may reference it later.

–size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.

–maxlength - Dictates the maximum number of characters that can be entered.

•Example of html code for input forms

<form method="post" action="mailto:youremail@email.com">

Name: <input type="text" size="10" maxlength="40" name="name"> <br /> Password: <input type="password" size="10" maxlength="10" name="password">
</form> 

HTML Form Email

•Now we will add the submit functionality to your form. Generally, the button should be the last item of your form and have its name attribute set to "Send" or "Submit". Name defines what the label of the button will be. Here is a list of important attributes of the submit:

•In addition to adding the submit button, we must also add a destination for this information and specify how we want it to travel to that place. Adding the following attributes to your <form> will do just this.

•method - We will only be using the post functionality of method, which sends the data without displaying any of the information to the visitor.

•action - Specifies the URL to send the data to. We will be sending our information to a fake email address.

HTML Code:

•<form method="post" action="mailto:youremail@email.com">

•Name: <input type="text" size="10" maxlength="40" name="name"> <br />

•Password: <input type="password" size="10"

•maxlength="10" name="password"><br />
<input type="submit" value="Send">

•</form>

•HTML Radio Buttons

–Radio buttons are a popular form of interaction. You may have seen them on quizzes, questionnaires, and other web sites that give the user a multiple choice question. Below are a couple attributes you should know that relate to the radio button.

•value - specifies what will be sent if the user chooses this radio button. Only one value will be sent for a given group of radio buttons (see name for more information).

•name - defines which set of radio buttons that it is a part of. Below we have 2 groups: shade and size.

•Example of HTML code for radio button

<form method="post" action="mailto:youremail@email.com">

 What kind of shirt are you wearing? <br />

Shade:
<input type="radio" name="shade" value="dark">Dark <input type="radio" name="shade" value="light">Light <br />

Size:
<input type="radio" name="size" value="small">Small <input type="radio" name="size" value="medium">Medium <input type="radio" name="size" value="large">Large <br /> <input type="submit" value="Email Myself">

</form>

•Check boxes allow for multiple items to be selected for a certain group of choices. The check box's name and value attributes behave the same as a radio button.

–Example of HTML code for check box

–HTML Code:

–<form method="post" action="mailto:youremail@email.com"> Select your favorite cartoon characters.

  <input type="checkbox" name="toon" value="Goofy">Goofy <input type="checkbox" name="toon" value="Donald">Donald <input type="checkbox" name="toon" value="Bugs">Bugs Bunny <input type="checkbox" name="toon" value="Scoob">Scooby Doo <input type="submit" value="Email Myself">

</form>

HTML Drop Down Lists

•Drop down menues are created with the <select> and <option> tags. <select> is the list itself and each <option> is an available choice for the user.

–Example of HTML code for drop down lists

–<form method="post" action="mailto:youremail@email.com"> College Degree?

–<select name="degree">

–<option>Choose One</option>

–<option>Some High School</option>

–<option>High School Degree</option>

–<option>Some College</option>

–<option>Bachelor's Degree</option>

–<option>Doctorate</option>

–<input type="submit" value="Email Yourself">

–</select>

–</form>

make love

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.