Notesale: Turn your study into money

Document Preview

Extracts from the notes are below, to see the PDF you'll receive please use the links above

---

HTML FORMS
CH 8 H T ML F O RMS

LORAINE MUTUNE

introduction
A form will take input from the site visitor and then will post it to a
back-end application such as CGI, ASP Script or PHP script etc
...

There are various form elements available like text fields, textarea
fields, drop-down menus, radio buttons, checkboxes, etc
...


LORAINE MUTUNE

Form
Attributes
Apart from common attributes, following is a list of the
most frequently used form attributes:
Attribute Description
action

Backend script ready to process your passed data
...


method

Method to be used to upload data
...


target

Specify the target window or frame where the result of the script will be displayed
...


enctype

You can use the enctype attribute to specify how the browser encodes the data
before it sends it to the server
...

•mutlipart/form-data - This is used when you want to upload binary data in the
form of files like image, word file etc
...


However, when GET is used, the submitted form data will be visible in
the page address field:

LORAINE MUTUNE

GET method
Appends form-data into the URL in name/value pairs
The length of a URL is limited (about 3000 characters)
Never use GET to send sensitive data! (will be visible in the URL)
Useful for form submissions where a user wants to bookmark the result
GET is better for non-secure data, like query strings in Google

LORAINE MUTUNE

Get method example

The method Attribute

This form will be submitted using the GET method:

First name:




Last name:

After you submit, notice that, unlike the GET method, the form values is NOT visible in
th address bar of the new browser tab
...
They
are created using HTML tag
...
They are also created
using HTMl tag
...
Multi-line input
controls are created using HTML tag<br> ...<br> They are created using HTML <input><br />tag<br> ...<br> <br />Attribute<br /><br />Description<br /><br />type<br /><br />Indicates the type of input control and for text input control it will be set<br />to text<br> ...<br> <br /><br />value<br /><br />This can be used to provide an initial value inside the control<br> ...<br> <br /><br />maxlength<br /><br />Allows to specify the maximum number of characters a user can enter<br />into the text box<br> ...<br> They are also created using HTML <input> tag but type<br />attribute is set to password<br> ...<br> <br /><br />Attribute<br /><br />Description<br /><br />type<br /><br />Indicates the type of input control and for password input control it<br />will be set to password<br> ...<br> <br /><br />value<br /><br />This can be used to provide an initial value inside the control<br> ...<br> <br /><br />maxlength<br /><br />Allows to specify the maximum number of characters a user can<br />enter into the text box<br> ...<br> Multi-line input controls are created using HTML<br /><textarea> tag<br> ...<br> <br />






LORAINE MUTUNE

Attributes
Following is the list of attributes for tag<br> ...<br> <br /><br />rows<br /><br />Indicates the number of rows of text area box<br> ...<br> <br />The <legend> element defines a caption for the <fieldset> element<br> ...<br> </p><br /><form action="/action_page<br> ...<br> They are also created using HTML <input> tag but type<br />attribute is set to checkbox<br> ...<br> <br /><br />Attribute<br /><br />Description<br /><br />type<br /><br />Indicates the type of input control and for checkbox input control it<br />will be set to checkbox<br> ...<br> <br /><br />value<br /><br />The value that will be used if the checkbox is selected<br> ...<br> <br /><br />LORAINE MUTUNE<br /><br />Radio Button Control<br />Radio buttons are used when out of many options, just one option is<br />required to be selected<br> ...<br> <br />Example<br />Here is example HTML code for a form with two radio buttons:<br /><br />LORAINE MUTUNE<br /><br />Attributes<br />Following is the list of attributes for radio button<br> ...<br> <br /><br />name<br /><br />Used to give a name to the control which is sent to<br />the server to be recognized and get the value<br> ...<br> <br /><br />checked<br /><br />Set to checked if you want to select it by default<br> ...<br> The<br />selection list typically displayed in the browser as a pull-down menu (i<br> ...<br> <br />a drop-down list) from which a user can select one or more options<br />depending on its attributes<br> ...<br> <br /><br />LORAINE MUTUNE<br /><br />Attributes<br />Following is the list of important attributes of <select> tag:<br /><br />Attribute<br /><br />Description<br /><br />name<br /><br />Used to give a name to the control which is sent to the<br />server to be recognized and get the value<br> ...<br> <br /><br />multiple<br /><br />If set to "multiple" then allows a user to select multiple<br />items from the menu<br> ...<br> <br /><br />selected<br /><br />Specifies that this option should be the initially selected value<br />when the page loads<br> ...<br> This is also<br />created using the <input> element but type attribute is set to file<br> ...<br> <br /><br />accept<br /><br />Specifies the types of files that the server accepts<br> ...<br> You can<br />also create a clickable button using <input> tag by setting its type<br />attribute to button<br> ...<br> <br /><br />reset<br /><br />This creates a button that automatically resets form controls to their initial<br />values<br> ...<br> <br /><br />image<br /><br />This creates a clickable button but we can use an image as background of the<br />button<br> ...<br> png" /><br /></form><br /></body><br /></html><br /><br />LORAINE MUTUNE<br /><br />Hidden Form Controls<br />Hidden form controls are used to hide data inside the page which later<br />on can be pushed to the server<br> ...<br> For example, following hidden form<br />is being used to keep current page number<br> ...<br> <br /><br />LORAINE MUTUNE<br /><br />example<br /><!DOCTYPE html><br /><br /><html><br /><head><br /><title>File Upload Box</title><br /></head><br /><br /><body><br /><form><br /><p>This is page 10</p><br /><input type="hidden" name="pagename" value="10" /> <input<br />type="submit" name="submit"value="Submit" /> <input type="reset"<br />name="reset" value="Reset" /> </form> </body> </html><br /><br />LORAINE MUTUNE<br /><br /><hr /><div class="preview_top"><b>Title:</b> WEBSITE DEVELOPMENT CHAPTER 8<br/><b>Description:</b> A good study material for any student wishing to learn website development . it includes html and CSS code examples.<br/><div class="noteinfo"><a class="buybasket" href="/buy/265371">Buy These Notes</a><a class="action preview" href="preview/265371">Preview</a></div></div> </div> </div> </div> <div class="container"> <div id="footer"> <ul class="info"> <li><a href="become-a-notesale-ambassador">Become a Notesale Ambassador</a></li> </ul> <ul class="anc"> <li><a href="terms-and-conditions">Ts and Cs</a></li> <li class="last"><a href="contact-us">Contact Us</a></li> </ul> </div> </div> <script type="text/javascript" src="/path.js"></script> <script type="text/javascript" src="/notesale.js"></script> </body> </html>