Web Developer Bootcamp Day Three Part 2

Section 5: HTML: Forms & Tables

• The table element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. Not for layout's like in the 90's!

Forms

The HTML form element represents a document section containing interactive controls for submitting information.

The following attributes control behavior during form submission.

• action
  The URL that processes the form submission.

• method
  The HTTP method to submit the form with. Possible (case insensitive) values:
  post: The POST method; form data sent as the request body.
  get: The GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side-effects.

(mdn)
The HTML input element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

The HTML label element represents a caption for an item in a user interface.

Associating a label with an input element offers some major advantages:

• The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

• You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

• To associate the with an element, you need to give the an id attribute. The then needs a for an attribute whose value is the same as the input's id.

• Alternatively, you can nest the directly inside the , in which case the for and id attributes are not needed because the association is implicit

Buttons

The HTML button element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS.

button type

The default behavior of the button. Possible values are:

• submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a form, or if the attribute is an empty or invalid value.
• reset: The button resets all the controls to their initial values, like input type="reset". (This behavior tends to annoy users.) A button that resets the contents of the form to default values. Not recommended.
• button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

Name

Name of the form control. Submitted with the form as part of a name/value pair. when each item of data is sent it is paired/identified by the name.

Radio Buttons, Checkboxes, & Selects

• A check box allowing single values to be selected/deselected.
• A radio button, allowing a single value to be selected out of multiple choices with the same name value.

The HTML Select element

• represents a control that provides a menu of options:
  

• The above example shows typical select usage.

• It is given an id attribute to enable it to be associated with a label for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server.

• Each menu option is defined by an option element nested inside the select.

• Each option element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on an option element to make it selected by default when the page first loads.

Client-side form validation

• Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.

• Client-side validation is an initial check and an important feature of good user experience; by catching invalid data on the client-side, the user can fix it straight away. If it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data.

• However, client-side validation should not be considered an exhaustive security measure! Your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server. Read Website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.

What is form validation?

Go to any popular site with a registration form, and you will notice that they provide feedback when you don't enter your data in the format they are expecting. You'll get messages such as:

• "This field is required" (You can't leave this field blank).
• "Please enter your phone number in the format xxx-xxxx" (A specific data format is required for it to be considered valid).
• "Please enter a valid email address" (the data you entered is not in the right format).
• "Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number." (A very specific data format is required for your data).

This is called form validation. When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation.

If the information is correctly formatted, the application allows the data to be submitted to the server and (usually) saved in a database; if the information isn't correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again.

We want to make filling out web forms as easy as possible. So why do we insist on validating our forms? There are three main reasons:

• We want to get the right data, in the right format. Our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether.
• We want to protect our users' data. Forcing our users to enter secure passwords makes it easier to protect their account information.
• We want to protect ourselves. There are many ways that malicious users can misuse unprotected forms to damage the application (see Website security).

simple validation

• required. Boolean. A value is required or must be check for the form to be submittable

• minlength password, search, tel, text, url Minimum length (number of characters) of value

• maxlength password, search, tel, text, url Maximum length (number of characters) of value

• pattern (regex) password, text, tel Pattern the value must match to be valid

• URL A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.