1 / 32

CREATING WEB PAGE FORM

CREATING WEB PAGE FORM. Faculty of Computer Science & Engineering. INTRODUCTION. Form is used: Email subscriptions Contest registrations Databases Autoresponders User identifications and passwords Feedback . < Form Method =( Post, Get ) Action=script.url> input elements < /Form >.

minya
Télécharger la présentation

CREATING WEB PAGE FORM

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. CREATING WEB PAGE FORM Faculty of Computer Science & Engineering

  2. INTRODUCTION • Form is used: • Email subscriptions • Contest registrations • Databases • Autoresponders • User identifications and passwords • Feedback <FormMethod=(Post, Get) Action=script.url> input elements </Form> Faculty Computer Science Engineering

  3. INTRODUCTION • Method - Determines which http method will be used to send the form's information to the web server. • “GET” - This method will append all of the information from a form on to the end of the URL being requested. • “POST” - This method will transmit all of the information from a form immediately after the requested URL. This is the preferred method. • Action - The URL of the form processing script that resides on the server. This script will process the form's information. Faculty Computer Science Engineering

  4. FORM ELEMENTS • Button • Text boxes • Hidde • Password • Checkbox • Radio button • Submit • Image submit • Reset Faculty Computer Science Engineering

  5. WORKING WITH INPUT BOXES Textbox Radio Textarea Submit Reset Checkbox Faculty Computer Science Engineering

  6. WORKING WITH INPUT BOXES • The <INPUT> tagbe used for several other types of fields on form. The general syntax of the <INPUT> tag is: <INPUTTYPE= option NAME= text> • Option: is the type of input field. • Text: is the name assigned to the input field. • To use the <INPUT>tag for the many different kinds of form elements, you change the value of the TYPE property. • The NAME property is required with with the <INPUT> tag. Faculty Computer Science Engineering

  7. WORKING WITH INPUT BOXES • Controlling the size of an Input Box • By default, the browser made all of the input box in the form the same size 20 character wide. • The syntax for changing the size of an input box is: <INPUT SIZE=value> Example: <Input name= Username size =30> Faculty Computer Science Engineering

  8. WORKING WITH INPUT BOXES • Setting the maximun length for Text Input: <INPUT MAXLENGTH=value> Value: is the maximum character number • Setting a default value for an input box: <INPUT VALUE=value> Value: is the default text or number appear in the field. Faculty Computer Science Engineering

  9. WORKING WITH INPUT BOXES • Text fields <Input Type=”Text” Name=”name” size=n maxlength=n> Example: <form action=""> First name: <input type="text" name="firstname“><br> Last name: <input type="text" name="lastname"> </form> Faculty Computer Science Engineering

  10. WORKING WITH INPUT BOXES • Password Field: <Input Type=”password” Name=”name” size=n maxlength=n> Example: <form> Username: <input type="text" name="user“><br> Password: <input type="password" name="password"> </form> Faculty Computer Science Engineering

  11. WORKING WITH INPUT BOXES • Checkbox: <Input Type=”Checkbox” Name=”Name” Value=”Value” Checked> Label • Checked - Default button or box selection Example: <form> <Input Type='Checkbox' Name='st' Value='nhac' Checked>Music<br> <Input Type='Checkbox' Name='st' Value='film‘> Film<br> <Input Type='Checkbox' Name='st' Value='thethao'> Sport </form> Faculty Computer Science Engineering

  12. WORKING WITH INPUT BOXES • Radio button: <input type="radio" name="name“ value="Value" checked> Label <form> <input type='radio' name=use value=home>Home<br> <input type='radio' name=use value=bus>Business<br> <input type='radio' name=use value=gov>Government<br> <input type='radio' name=use value=ed>Educational Institution<br> <input type='radio' name=use value=other>Other<br> </form> Faculty Computer Science Engineering

  13. WORKING WITH INPUT BOXES Faculty Computer Science Engineering

  14. WORKING WITH INPUT BOXES • Submit Button <Input Type=”Submit” Value=”Submit Message” Name=”Name”> • NAME - Name of the variable to be processed by the form processing script. • VALUE - Specifies the text to be displayed on the submit button. Faculty Computer Science Engineering

  15. WORKING WITH INPUT BOXES <form name="input" action="html_form_action.asp" method="get"> Type your first name: <input type="text" name="FirstName" value="Mickey" size="20"> <br>Type your last name: <input type="text" name="LastName" value="Mouse" size="20"> <br> <input type="submit" value="Submit"> </form> Faculty Computer Science Engineering

  16. WORKING WITH INPUT BOXES • Reset Button: Enables users to clear a form if necessary <Input Type=”reset” Value=”Reset Message” Name=”Name”> • TYPE – Reset • VALUE - Specifies the text to be displayed on the reset button. Faculty Computer Science Engineering

  17. WORKING WITH INPUT BOXES • Image Field: Inline images can act like Submit buttons so that when the user clicks the image, the form is Submited. <Input Type=”Image” Value=”Text” SRC= URL Name=”Text”> • NAME - Name of the variable to be processed by the form processing script. • SRC - Image URL. Faculty Computer Science Engineering

  18. WORKING WITH INPUT BOXES • Button: Defines a clickable button (mostly used with a JavaScript to activate a script). <input type="button" name="Button" value="Button"> Example: <body> <form action=""> <input type="button" value="Click me" onclick="msg()" /> </form> </body> Faculty Computer Science Engineering

  19. WORKING WITH INPUT BOXES • Hidden: Used to send information to the form processing script that you don't want your visitors to see. Nothing will show through the browser. <Input Type=”Hidden” Value=”Text” Name= ”Text”> • NAME - Name of the variable to be processed by the form processing script. • VALUE: The value of the hidden name expected by the form processing script. Faculty Computer Science Engineering

  20. SELECTION LIST • The <select> tag is used to create a select list (drop-down list). • The <option> tags inside the select element define the available options in the list. <Select Name=”Name” Size=n Multiple> <Option Value=”Value” selected>Option 1 <Option Value=”Value” > Option 2 … </Select> Faculty Computer Science Engineering

  21. SELECTION LIST • Select Attributes • NAME - Name of the variable to be processed by the form processing script. • SIZE - Specifies the number of visible selections. • MULTIPLE - Enables users to select multiple selections. • Option Attributes • SELECTED - Specifies a default selection. • VALUE - Specifies the value of the variable in the select element. Faculty Computer Science Engineering

  22. SELECTION LIST Example: <body><form> <select Name=Product> <option value=1>ScanMaster <option value=3>ScanMaster II <option value=4>LaserPrint 1000 <option value=5> LaserPrint 5000 <option value=6>Print/scan 150 <option value=7> Print/scan 250 </Select> </form></body> Faculty Computer Science Engineering

  23. SELECTION LIST <form> <select Name=Product size=5 Multiple> <option value=1>ScanMaster <option value=3>ScanMaster II <option value=4>LaserPrint 1000 <option value=5> LaserPrint 5000 <option value=6>Print/scan 150 <option value=7> Print/scan 250 </Select> </form> Faculty Computer Science Engineering

  24. SELECTION LIST • OPTGROUP: is used to group the elements in selection list <SELECT name= “Text”> <OPTGROUP> <OPTION value= “value1”>option1 <OPTION value= “value2”> option2 …. </OPTGROUP> … </SELECT> Faculty Computer Science Engineering

  25. SELECTION LIST <SELECT name= ‘course’> <OPTGROUP> <OPTION value= “Internetintro”>Introduction to the Internet <OPTION value= “Introhtml”>Introduction to HTML <OPTION value= “Introweb”>Introduction to the web page designing </OPTGROUP> <OPTGROUP> <OPTION value= “vbintro”>Visual Basic – An Introduction <OPTION value= “vbdev”>Visual Basic – Application Development </OPTGROUP> </SELECT> Faculty Computer Science Engineering

  26. optgroup SELECTION LIST Faculty Computer Science Engineering

  27. TEXTAREA • TextArea: is the Text box that user can input multi line. <TextArea Name=”name” Rows=n Cols=m Wrap>Default text </textarea> • Textarea Attributes • NAME - Name of the variable to be processed by the form processing script. • COLS - The number of columns within the text area. • ROWS - The number of rows within the text area. • Wrap: virtual,physical Faculty Computer Science Engineering

  28. TEXTAREA Example: <form> Comments ? <textarea rows=4 cols=50 name=comments> </textarea> </form> Faculty Computer Science Engineering

  29. FIELDSET • The <fieldset> Group related elements in a form. • The <fieldset>tag draws a box around the related form elements. <Fieldset> <Legend Align=”left, right”>Chú thích </Legend> The elements in group </Fieldset> • The <legend> tag defines a caption for the fieldset element. Faculty Computer Science Engineering

  30. FIELDSET <FORM > <FIELDSET> <LEGEND>Position</LEGEND> Application for the post of: <INPUT name= 'name' type= 'text' tabindex= '1'> </FIELDSET> <FIELDSET> <LEGEND>Educational Qualifications</LEGEND> <INPUT name= 'qualif' type='radio' value= 'grad' tabindex= '5'> Graduate <INPUT name= 'qualif' type='radio' value='postgrad' tabindex='5'> Postgraduate </FIELDSET></FORM> Faculty Computer Science Engineering

  31. Faculty Computer Science Engineering

  32. KEYBOARD ATTRIBUTES • Accesskey: Specifies a keyboard shortcut to access an element. • Create: Accesskey= character. • Used: Alt+ character • Tabindex: Specifies the tab order of an element. Tabindex= number Faculty Computer Science Engineering

More Related