HTML Forms and Input Elements: Creating Interactive Web Pages, Slides of Computer Science

Download HTML Forms and Input Elements: Creating Interactive Web Pages and more Slides Computer Science in PDF only on Docsity!

HTML Forms

What are forms?

• is just another kind of HTML tag
• HTML forms are used to create (rather primitive) GUIs on Web

pages

• Usually the purpose is to ask the user for information
• The information is then sent back to the server
• A form is an area that can contain form elements
• The syntax is: ...form elements...
• Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc
• Other kinds of HTML tags can be mixed in with the form elements
• A form usually contains a Submit button to send the information in he form elements to the server
• The form’s parameters tell JavaScript how to send the information to the server (there are two different ways it could be sent)
• Forms can be used for other things, such as a GUI for simple programs

The tag

• The ... tag encloses form

elements (and probably other HTML as well)

• The arguments to form tell what to do with the user input
  • action=" url " (required)
    • Specifies where to send the data when the Submit button is clicked
  • method="get" (default)
    • Form data is sent as a URL with ?form_data info appended to the end
    • Can be used only if data is all ASCII and not more than 100 characters
  • method="post"
    • Form data is sent in the body of the URL request
    • Cannot be bookmarked by most browsers
  • target=" target "
    • Tells where to open the page sent as a result of the request
    • target = _blank means open in a new window
    • target = _top means use the same window

The tag

• Most, but not all, form elements use the input tag, with a

type="..." argument to tell which kind of element it is

• type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image
• Other common input tag arguments include:
• name: the name of the element
• value: the “value” of the element; used in different ways for different values of type
• readonly: the value cannot be changed
• disabled: the user can’t do anything with this element
• Other arguments are defined for the input tag but have meaning only for certain values of type

Buttons

• A submit button:

• A reset button:

• A plain button:

   - submit: send data - reset: restore all form elements to their initial state - button: take some action as specified by JavaScript 

• Note that the type is input, not “button”

Checkboxes

• A checkbox:

• type: "checkbox"
• name: used to reference this form element from JavaScript
• value: value to be returned when element is checked
• Note that there is no text associated with the checkbox— you have to supply text in the surrounding HTML

Drop-down menu or list

• A menu or list:

• Additional arguments:
• size: the number of items visible in the list (default is "1")
• multiple: if set to "true", any number of items may be selected (default is "false")

Hidden fields

<-- right there, don't you see it?

• What good is this?
  • All input fields are sent back to the server, including hidden fields
  • This is a way to include information that the user doesn’t need to see (or that you don’t want her to see)
  • The value of a hidden field can be set programmatically (by JavaScript) before the form is submitted

The End