• form basics
• creating a form shell
• form elements
• submit/reset buttons
• form processing
• readings & resources

• HTML Forms are used to gather data from users and send it to a server for processing:
  • give feedback
  • leave a comment on a page
  • vote in a poll or survey
  • register for workshop
• there are two basic parts to a form:
  • the shell which is used to show the form controls for the user to input data (fields, labels and buttons)
  • a server-side processing script that takes user-submitted data and does something useful with it
• the shell part is fairly easy and similar to creating other parts of a web page, allowing you to create:
  • text boxes
  • larger text areas
  • radio buttons
  • check boxes
  • drop-down menus

• three important parts:
  • form tag which includes the url of the script that will process the form:

    <form method="post" action="script.url">

  • the form elements (fields, text areas)
  • submit button which sends the data to the script for processing
• more on form basics

• text boxes
  • contain one line of text
  • typically used for names, addresses, email, etc.
  • <input type="text" name="title" id="title" size="n" maxlength="n">
  • default value for size attribute is 20, but visitors can add more text than fits in the box up to the value defined for "maxlength"
• check boxes
  • visitor can select as many as they like
  • linked by the value of the "name" attribute
  • <input type="checkbox" name="title" id="title" value="value">
  • the above used for each check box in the set
• radio buttons
  • can only select one from a group
  • e.g., i live in canada or australia, not both
  • <input type="radio" name="set" id="radio1" value="data">
  • "data" is the text that will be sent to server
• note that the above, and other elements, are all put in place with the <input> element
• more on input elements
• larger text areas
  • used in cases where you want to give the visitor more room to write
  • common uses include comments and survey answers
  • <textarea name="name" id="name" rows="n" cols="n">default text</textarea>
  • visitors can enter up to 32,700 characters in a text area
  • more on the textarea element
• select menu
  • can select as may as they like, however one selection is the norm
  • normally used as select menus for countries, state, province etc
  • <select name="cars">
<option value="audi"></option>
  • "audi" is the text that will be sent to server
  • more on the select/option element
• hidden elements
  • used by the web designer (you) to store information from earlier forms or to send pre-determined variables to the cgi script
  • <input type="hidden" name="name" value="value">
• label elements
  • The <label> tag defines a label for an <input> element.
  • The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control.
  • The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

• forms are pretty much useless without a way to let the user send the information to you/the server
  • <input type="submit" value="submit message">
  • default submit message is "submit query"
• should also give visitors an easy way to clear the form and start over
  • <input type="reset" value="reset message">
  • default submit message is "reset"

• each element on a form has a name and a value associated with it
• the name identifies the data that is being sent (e.g., visitor_name)
• the value is the data itself (e.g., dave)
• the value can come from the web designer (you) or from the visitor who enters data into a field
• when submit button is clicked, the name-value pair for each element (visitor_name=dave) is sent to the server
• script takes all the name value pairs and separates them out into something a human (or database) can understand
• two ways to send information to the server:
  • get: appends name value to the end of an url (redirection, customization)
  • post: sends a data file with the name-value pairs to the server (feedback, purchasing)
• a script is executable - not a static file that does nothing, but rather, responds to input
• more on form processing

objective: Write, test, and publish a well-styled, semantic HTML page that includes a form.

See detailed requirements.

• HTML Forms (w3schools)
• How to structure a web form
• Form best practices — the Do’s and Don’ts in form design
• Checkboxes or radio buttons?
• Best Practices For Mobile Form Design
• Form accessibility: a practical guide
• HTML form templates
• Learn to Style HTML Input Forms
• You Suck at Form Design (Probably) (video)
• Simple Form Layout Design with Flexbox (video)