Forms Revisited

CSCI-UA.0480-008

Form Elements

What form elements do we know / have we used? →

  • text (<input type="text" name="…">)
  • a submit button (<input type="submit" name="…">)


What are some other form elements that you've seen for collecting data? →

  • dropdowns
  • multi-selects
  • textboxes
  • radio buttons
  • checkboxes

And Others…

Some newer ones…

  • email
  • url
  • number
  • range
  • date

You Can't See Me!

There's also a hidden input:

  • a form element that's not visible in the user interface
  • but it still sends its value along with the other input elements
  • (when a form is submitted)

All Together

  • text
  • email
  • url
  • number
  • radio buttons
  • checkboxes
  • range
  • date
  • submit buttons
  • dropdowns
  • multi-selects
  • textboxes
  • hidden

About Form Markup

Of course, all of these elements have to be nested within a parent <form> element.

And…. if you want to be able to submit a form (of course you do), you'll probably want a submit button:


<form method="POST" action="">
<!-- other form element placed within form tags-->
<input type="submit">
</form>

About Form Markup Continued

Each of these form elements have different markup:

  • the majority of them are <input>, and vary only by having a different type attribute
  • there are others that use entirely different form elements, such as <select> or <textarea>

About Form Markup Continued

But there are some element attributes that are common to all of them →:

  • name
    • the name of the form data that you're passing over
    • the property name in the req.body or req.query objects
  • value
    • can be set by the actual value of the form field
    • or set explicitly (can be a default value) in the element's attributes…
    • it's the value associated with the form element's name
    • the value contained in the property name in the req.body or req.query objects

Text, Email, URL

Text, email and url are, as their names imply, input fields for text, emails and urls. They're all <input> elements. They vary by type:


<label>Text</label><input type="text" name="textExample">
<label>Email</label><input type="email" name="emailExample">
<label>URL</label><input type="url" name="urlExample">
  • they all look like boxes of text
  • they show up as you'd expect on the server side, the name of the element and its value map directly to a property and value in Express →
  • so… what do you think the difference is between these elements? →
  • some clients have validation →

Range and Number

Range and number represent a numeric value, and again, they're both <input> elements. They have a type of range and number. However, instead of regular text entry…

  • number represents a spin box
  • range represents a slider


Here's some markup:


<label>Number</label><input type="number" min="1" max="10" step="1" name="numberExample">
<label>Range</label><input  min="1" max="10" step="1" type="range" name="rangeExample">

Range and Number Continued

Did you see any extra attributes there? →

The following attributes are optional:

  • min - the lower bound of the form element
  • max - the upper bound of the form element
  • step - the interval between values (the increment/decrement from one value to the next)

Radio Buttons

Radio buttons allow you to choose only one value from a set of values. They're <input> elements with a type of radio.


<label>Radio 1</label><input type="radio" name="radioExample" value="1">
<label>Radio 2</label><input type="radio" name="radioExample" value="2">
<label>Radio 3</label><input type="radio" name="radioExample" value="3">

What's peculiar about the way they're named and the values that they're given? What value do you think is sent over to the server? →

  • all radio buttons within a group of radio buttons should have the same name
  • you can use the checked attribute to have a default radio button selected
  • each radio button has its own value
  • the value of the button that's selected is what's sent over to the server

Check Boxes

Check boxes allow you to choose multiple values from a set of values. They're <input> elements with a type of checkbox.


<label>Checkbox 1</label>
<input type="checkbox" name="checkboxExample" value="1">
<label>Checkbox 2</label>
<input type="checkbox" name="checkboxExample" value="2">
<label>Checkbox 3</label>
<input type="checkbox" name="checkboxExample" value="3">
  • check boxes within a group should have the same name
  • to default to checked, add a checked attribute to the tag
  • each checkbox in a group of check boxes has its own value
  • all values of the items checked are sent to the server (how do you think they're represented? →)
  • …as an array! (or as a single value if only one item checked)
  • if the frst two were checked, req.body.checkboxExample → [1, 2]

Date

Date shows up as a date picker in your browser. It is an <input> element with a type of date


<label>Date</label><input type="date" name="dateExample">
  • sent over to the server in yyyy-mm-dd format
  • other date and time element types include datetime, week, month, etc.

Dropdowns represent a form element that lets you pick a single value from a set of values (Similar to radio buttons). However, the markup for dropdowns uses a single <select> element (with the name attribute), and <option> elements (with the value) nested within it:


<select name="selectExample">
<option value="Option 1">Option 1</option>
<option value="Option 2" selected>Option 2</option>
<option value="Option 3">Option 3</option>
</select>
  • single value shows up on server side
  • you can use selected in option element to default to that option
  • use the attribute, multiple, on the select element…
    • to allow multiple values to be selected
    • …if multiple values, interpreted as an Array on server side

Textbox/Textareas

A larger version of text input!


<textarea name="textareaExample"></textarea>

(not much to see here)

Hidden Input

This input will send along the data that's in the value attribute when the form is submitted. It's not visible in the user interface.


<input type="hidden" name="hiddenExample" value="someValue>

Particularly useful if you want a pre-set piece of data to be submitted along with the rest of your form (perhaps the id of an associated resource).

For a Demo

In a router…


router.get('/forms', function(req, res) {
	res.render('forms', { title: 'Express' });
});

router.post('/forms', function(req, res) {
	console.log('=====\n', req.body, '\n=====');
	res.redirect('/forms');
});

For a Demo Continued

In forms.hbs: