1 / 31

Web Technologies

Web Technologies. Website Forms / Data Acquisition. Web Forms. What do Web Forms Do?. HTML supports tags that allow you to create forms; it does not have the ability to process the information collected from the form.

elgin
Download Presentation

Web Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Technologies Website Forms / Data Acquisition

  2. Web Forms

  3. What do Web Forms Do? • HTML supports tags that allow you to create forms; it does not have the ability to process the information collected from the form. • When you create a form, the values inside the form are sent to a script. The script then uses the values it has been given to perform the action it was programmed to do.

  4. The Form Block • The form should be enclosed with an opening and closing form tag. • The form block will group the data together to be sent to the script for processing. <form> </form>

  5. The form tag attributes • The form tag contains two required attributes. • action – specifies where the data in the form should be sent for processing • This value is typically a URL or a script file. • method – specifies how the data is to be sent to the script • post – The data is sent through a virtual network pipe to the script; generally more secure. • get – The data is sent through the url and is visible; the data can be cached by the browser and less secure.

  6. The form tag attributes <form method=“post” action=“http://www.myscript.com/process.php”> </form> • The data collected from this form will be sent by post to the address in the action.

  7. Collecting Data • Most data is collected using the input tag. • There are other tags as well that can collect data. • The input tag will create a form field. • The input tag should include the name attribute so the script will know what the data represents. • The input tags in the form must be able to match up with the script.

  8. The input tag • The input tag requires at least two attributes: • name – identifies the data collected in the field • type – specifies which type of field to create

  9. Hands-on Practice • Open a new document in your text editor and enter the following code Sample Code 1 <html><head>  <title>Forms</title></head><body></body></html>

  10. Hands-on Practice • Add the additional text shown in red to your document Sample Code 2 <body><form method=“post” action=“http://www.ieclass.com/jslabs/lab2-1a.php”> </form> </body>

  11. The text field • Text fields are created using the input tag and setting the type to text. • The text field is used to input single lines of information. Sample Code 3 <body><form method=“post” action=“http://www.ieclass.com/jslabs/lab2-1a.php”> Username: <input type=“text” size=“30” name=“user”> </form> </body>

  12. The text field • Save your document as forms.htm and preview it in your web browser. • You should see the following form.

  13. Password Field Sample Code 4 Username: <input type=“text” size=“30” name=“user”> <br /> Password: <input type=“password” size=“10” name=“password”> • Password fields are created using the INPUT tag and setting the TYPE to password. • The password field is used to input single lines of information that need to be masked. • Data is NOT encrypted.

  14. Password Field Resave the document and refresh it in your browser. You should get the following output.

  15. Hidden Fields Sample Code 5 <body><form method=post action=“http://www.ieclass.com/jsforms/lab2-1a.php”> <input type=“hidden” name=“labcode” value=“3287”> Username: <input type=“text” size=“30” name=“user”> • Hidden fields are often used in forms to send additional information that is not entered by the visitor to the processing script. • Hidden fields do not show up on the form… they are hidden, but the information is still sent.

  16. Submit Button • Submit buttons are created using the INPUT tag and setting the TYPE to submit. • The Submit button is used to send data from a form to a processing script. • When the Submit button is clicked, it will automatically send all data entered into the form to the processing script.

  17. Reset Button • The Reset button is used to clear information out of a form. • Reset buttons are created using the INPUT tag and by setting the TYPE to reset.

  18. Submit Button • Add the additional text shown in red to your document. Sample Code 6 <br /> Password: <input type=“password” size=“10” name=“password”> <br /> <input type=“submit” value=“login”> <input type=“reset”> </form>

  19. Checking the Form Resave your document and refresh it in the browser. Enter the following information into your form. Username: student Password: web Click login. If you did everything correctly, you should get a confirmation screen.

  20. Radio Buttons • Radio buttons are created using the INPUT tag and setting the TYPE to radio. • Radio buttons should be grouped by assigning each element the same name, however, each radio button should have a different value.

  21. Radio Buttons • Add the additional text shown in red to your document. Sample Code 7 <input type=“reset”> <br><input type="radio" name="Grade" value="10" />10<br /><input type="radio" name="Grade" value="11" />11<br /><input type="radio" name="Grade" value="12" />12 </form>

  22. Radio Buttons • Resave your document and preview it in your browser. Click on each radio button; you should only be allowed to select one at a time.

  23. Checkboxes • Radio buttons are created using the INPUT tag and setting the TYPE to checkbox. • Checkboxes allow you to select whether or not an option is true or false.

  24. Checkboxes • Add the following code below the radio buttons on your form. Sample Code 8 <input type="radio" name="Grade" value="12" />12<br /> <input type="checkbox" name="Web" />Webmastering<br /> <input type="checkbox" name="BCIS" />BCIS <br /><input type="checkbox" name="Multimedia" />Multimedia

  25. Resave your document. You should see the checkboxes below the radio buttons. You should be able to select multiple checkboxes.

  26. Textarea • The textarea is created by using the <textarea>tag. The Reset button is used to clear information out of a form. • The textarea may be used when large amounts of text should be entered by the visitor. • The attributes COLSandROWSmay also be added to the TEXTAREA tag to specify the size.

  27. The following code will create a text area. Add the following to your forms.htm document below the checkboxes. Sample Code 9 <br /> <textarea cols="30" rows="5“ name=“message”> Web Design </textarea> The textarea is used for entering large blocks of text, such as an email message.

  28. Resave your document. You should see the textarea with the default text written in the field.

  29. Select menu • The select menu, can be created to allow visitors to select an item from a list. • The<select> and</select> tags should surround the entire list. • Each option (item in the list) should be proceeded by the <option> tag. • Only the selected item will be displayed.

  30. Add the following code to forms.htm. The code below will create a dropdown list, or select box. Sample Code 10 <br> <select name="grade" size=“1”><option value="freshman">Freshman</option><option value="sophomore">Sophomore</option><option value="junior" selected>Junior</option><option value="senior">Senior</option></select>

  31. Resave your document. The select box should show Junior as the selected option.

More Related