Govind Marriage website : http://govindtanu.blogspot.com
The <form> tag is used to create a form. All of a form's elements go in between the <form> and</form> tags.
Attributes of the <form> tag:
name - denotes the name of the form.
action - denotes the page where the form data will be sent to.
Example:
<form name="regForm" action="register.php"> <!-- form content goes here --> </form>
Form elements
Most form elements are created with the <input> tag. The form element to display is specified by the <input> tag's type attribute.
NOTE: The <input> tag has no end tag.
Attributes of the <input> tag:
type - denotes the type of form element that will be used
name - Specifies the name of the form element
value - Specifies the text that will appear on the form element
size - Sets the width of the form element
maxlength - Sets the maximum number of characters that can be entered into a form element
Textboxes
Textboxes are used to input small, relatively simple data from the user. Textboxes are created by using the <input> tag and setting its type attribute to "text".
Example:
<form> Name: <input type="text" name="name" size="23" maxlength="21" /> <br /> E-mail: <input type="text" name="email" size="23" /> </form>
Output:
Name: E-mail:
Password fields
Password fields are simply textboxes that will display a special character (usually asteriks) instead of the text that is actually typed. Password fields are created by using the <input> tag and setting its type attribute to "password".
NOTE:> While password fields hide data, this data is not encrypted and will be sent as regular text unless the protocol used for transmission is HTTPS and/or the data is encrypted through a scripting language.
Example:
<form> Username: <input type="text" name="name" /> <br /> Password: <input type="password" name="password" /> </form
Output:
Username: Password:
Hidden fields
You can use hidden fields to store data that should not be displayed on a webpage but might have something to do with the individual user (such as in a membership website), or might affect the way a page is displayed (such as the width of a new window)
Hidden fields are created by using the <input> tag and setting its type attribute to "hidden".
NOTE: While hidden fields are not visible on a webpage, they can be seen within the source code for a webpage (along with whatever value they store).
Example:
<form> Name: <input type="text" name="name" /> <br /> E-mail: <input type="text" name="email" /> <br /> <input type="hidden" name="firstTimeVisit" value="Yes" /> </form>
Output:
Name: E-mail:
Buttons
Buttons are created by using the <input> tag and setting its type attribute to "button". Another attribute that can be used with buttons is the value attribute. The value given to the valueattribute is what appears on the button.
Example:
<form> <input type="button" value="Click here for a message" /> </form>
Output:
<!--[endif]-->
Textareas
Textareas overcome the textboxes limits by allowing more than a single line of text, and its width and height can be changed as well. Textareas are created by using the <textarea> tag.
Attributes of the <textarea> tag
name - specifies the name of the textarea
rows - specifies the number of rows in the textarea
cols - specifies the number of columns in the text are.
Example:
<form> <textarea name="textarea1" rows="5" cols="20"></textarea> </form>
Output:
Radio buttons
Radio buttons get their name from older car radios where if you pushed one button, the dial moved. When you pushed another button, the first button would pop out and the dial moved to your new choice. Radio buttons act in a similar way. Radio buttons act as a group where only one value can be selected.
Radio buttons are created by using the <input> tag and setting its type attribute to "radio". When using radio buttons, you are giving the user a choice of two or more different values, therefore radio buttons should be placed within the same category. This is done by giving a group of radio buttons the same name using the name attribute, but different values. After the tag for the radio button, you place the text that you want to appear next to it on the page.
Example:
Which web browser do you use?
<form>
<input type="radio" name="browser" value="Firefox" />Firefox
<input type="radio" name="browser" value="Opera" />Opera
<input type="radio" name="browser" value="Chrome" />Chrome
<input type="radio" name="browser" value="Safari" />Safari
<input type="radio" name="browser" value="Internet Explorer" />
Internet Explorer <input type="radio" name="browser" value="Other" />Other </form>
Output:
Which web browser do you use?
Firefox
Opera
Chrome
Safari
Internet Explorer
Other
Checkboxes
Checkboxes are similar to radio buttons, but with checkboxes you can select more than one option at a time.
Checkboxes are created by using the <input> tag and setting its type attribute to checkbox. Just as with radio buttons, when using checkboxes, you are giving the user a choice of two or more different values, therefore checkboxes should be placed within the same category. This is done by giving a group of checkboxes the same name using the name attribute, but different values. After the tag for the checkbox, you place the text that you want to appear next to it on the page.
NOTE: The difference between checkboxes and radio buttons is that the user can select more than one of the checkboxes in a checkbox group while with radio buttons the user can select just one of the radio buttons in a radio button group.
Example:
Which genre(s) of books do you like?
<form>
<input type="checkbox" name="genre" value="Science_Fiction" />Science Fiction <input type="checkbox" name="genre" value="Adventure" />Adventure
<input type="checkbox" name="genre" value="Comedy" />Comedy
<input type="checkbox" name="genre" value="Mystery" />Mystery
<input type="checkbox" name="genre" value="Suspense" />Suspense
</form>
Output:
Which genre(s) of books do you like?
Science Fiction
Adventure
Comedy
Mystery
Suspense
Drop-down lists
The drop-down list is a box which looks like a textbox but is much more powerful. The drop-down list stores a list of items from which an item can be selected.
The drop-down list is created using the <select> tag, and items are added to it using the <option>tag. The value attribute of the <option> tag sets the value of a particular option in a drop-down list.
The name of a drop-down list is specified using the name attribute of the<select> tag.
Example:
<form>
<select name="objects">
<option value="Chair">Chair</option>
<option value="Box">Box</option>
<option value="Door">Door</option>
<option value="Ladder">Ladder</option>
</select> </form>
Output:
Try to select an item from the above drop-down list.You can also group a related set of choices in a drop-down using the <optgroup> tag.
Example:
<form>
<select name="languages">
<optgroup label="Client Side">
<option>HTML</option>
<option>CSS</option>
<option>Javascript </optgroup>
<optgroup label="Server side">
<option>PHP</option>
<option>PERL</option>
<option>ColdFusion </optgroup>
<optgroup label="Software">
<option>C</option>
<option>C++</option>
<option>FORTRAN</option> </optgroup> </select>
</form>
Output <!--[if !vml]-->
<!--[endif]-->
<!--[endif]-->
What if you want an item in the drop-down list to be selected by default? This is achieved by using theselected attribute in the <option> tag and setting it to "selected".
Example:
<form>
<select name="objects">
<option>Chair</option>
<option>Box</option>
<option selected="selected">Door</option>
<option>Ladder</option> </select>
</form>
Output:
NOTE: Without specifying anything, the first item in a drop-down will be selected by default.
Listboxes
The drop-down list lets you see just one choice in the list at a item, but you can overcome this limitation by turning the drop-down list to a listbox. To do this, thesize attribute is used to specify how many items in the drop-down list can be seen at once.
Example:
<form>
<select name="objects" size="3">
<option>Chair</option>
<option>Box</option>
<option>Door</option>
<option>Ladder</option> </select>
</form>
Output:
In the above example, we have specified that three items in the drop-down list can be seen at once and the drop-down list has become a listbox.
You can take it a step further and make it possible to select more than one item at a time from a listbox by using the multiple attribute and setting its value to"multiple".
Output:
To select multiple items from the above drop-down list, press and hold the Ctrl key and select as many items as you need to select.
You can have multiple items selected in a listbox by default by using the selected attribute in the <option> tag and setting it to "selected".
Example:
<form>
<select name="objects" size="4" multiple="multiple">
<option >Chair</option>
<option selected="selected">Box</option>
<option selected="selected"> Door</option>
<option selected="selected">Ladder</option> </select>
</form>
Output:
File upload buttons
File upload buttons allow the user to upload files such as images, sounds, videos, text documents, etc. File upload buttons are created by using the <input> tag and setting its type attribute to "file".
Example:
<form> <input type="file" /> </form>
Output: <!--[if !vml]-->
<!--[endif]-->
<!--[endif]-->
Notice how the file upload button automatically displays a textbox to the left of it. This textbox will display the absolute path (from the hard drive such as C:\Windows\file.txt) of a file that the user tries to upload.
Try clicking the File upload button in the above example. It should automatically pop up a box allowing you to choose a file from your hard drive to upload.
Setting form elements to be read-only
Sometimes you want to include form elements on your pages, but you don't want people editing the content within them. This is achieved by using the readonlyattribute and setting it to "readonly".
Example:
<form>
<input type="text" name="text1" value="Try to edit me....." readonly="readonly />
<textarea rows="5" cols="20" readonly="readonly"> I am the phantom of the night..the uneditable textarea! </textarea> </form>
Output:
Resetting a form
Resetting a form refers to setting all the fields of a form to their default values (usually blank). To be able to reset a form, you have to create a reset button. Reset buttons are created by using the <input> tag and setting its type attribute to "reset". Another attribute used with reset buttons is the value attribute. The value given to this attribute will be what appears on the reset button.
Example:
<form> Name: <input type="text" name="name" /> <br /> E-mail: <input type="text" name="email" /> <br /> <input type="reset" value="Reset" /> </form>
Output:
Name: E-mail:
Enter some data into the form files and click the "Reset" button. The form should then be reset.
Submitting a form
To be able to submit a form, you have to create a submit button. Submit buttons are created by using the<input> tag and setting its type attribute to "submit". Another attribute used with submit buttons is the value attribute. The value given to this attribute will be what appears on the submit button.
Example:
<form name="data" action="form_process.php”> <input type="text" name="text" /> <br /><br /> <input type="submit" value="Submit" /> </form>
Output:
Instead of a button, you can alternatively display an image that will submit a form when it is clicked.
Example:
<form name="data" action="form_process.php"> <input type="text" name="text" value="Click on the apple to get nutritious!" size="35" /> <br /><br /> <input type="image" src="/images/apple.jpg" /> </form>
Output:
To have an image instead of a submit button, set the type attribute of the <input> tag to "image", and the src attribute to the path of the image.
But what happens to all that data when the form gets submitted?
First of all, there is another important attribute in the<form> tag which decides in which way the form will be submitted. This attribute is the method attribute. The method attribute can take the value of either "post" or "get".
The difference between these two methods is that the post method puts the values from a form into the headers of an HTTP communication, while the get method puts the values from a form right into the URL.
After the data is sent, it gets processed however you specify it to process. Meaning, it can go into a database, it can validate against another set of data, it can be sent by email, and many other possibilities.
The logistics and mechanisms by which form data is submitted and processed are outside the scope of this tutorial (and actually, outside the scope of HTML). For details about those things you should learn a server-side language like PHP.If you want to learn about data submission and processing right away, visit our PHP forms tutorial.
No comments:
Post a Comment