session ten
agenda
- form basics
- creating a form shell
- form elements
- submit/reset buttons
- form processing
- readings & resources
form basics
- 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
creating a form shell
- 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
- form tag which includes the url of the script that will process the form:
- more on form basics
selected form elements
- 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.
- The
submit/reset buttons
- 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"
form processing
- 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
assignment six
objective: Write, test, and publish a well-styled, semantic HTML page that includes a form.
readings & resources
- 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)