Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

Lesson 1: Understanding forms CHAPTER 7 317


multiple selections. The multiple attribute is a Boolean attribute. You can change the
<select> element from a drop-down list to a list by setting the size attribute to the
quantity of items that should be displayed as a list. If the size is smaller than the quan-
tity of items in the list, the list displays a scroll bar. The <option> element has a selected
attribute to indicate that the option is selected. The selected attribute is a Boolean
attribute. You can use jQuery to locate all selected <option> elements by using the
following selector.
$('option:selected')
■■<button> A clickable button that can have HTML content, such as an <img> ele-
ment, and can be configured as a submit button by using the type attribute, which can
be set to button (default), reset, or submit.
■■<input type=’button’> A clickable button that displays a text prompt.
■■<input type=’checkbox’> A check box. In addition to having a value attribute, the
check box has a checked attribute that is readable and settable. The checked attribute
is a Boolean attribute. You can use jQuery to locate all selected check boxes by using
the following selector.
$('input[type=checkbox]:checked')
■■<input type=’color’> A color picker.
■■<input type=’date’> A date-only control (no time).
■■<input type=’datetime’> A date and time control based on the UTC time zone.
■■<input type=’datetime-local’> A date and time control (no time zone).
■■<input type=’email’> An email address field.
■■<input type=’file’> A file-select field and a Browse button for uploading files.
■■<input type=’hidden’> A hidden input field. Use the hidden input field when you
want to send data that is calculated from JavaScript to the server. The JavaScript code
can get and set the value as needed. Never store secrets in this element because this
element is intended to be hidden and not intended to be secure. It’s very easy to see
this element by viewing the webpage source.
■■<input type=’image’> An image submit button.
■■<input type=’month’> A month and year control.
■■<input type=’number’> A numeric field.
■■<input type=’password’> A password field in which the characters are masked.
■■<input type=’radio’> An option button. In addition to having a value attribute, the
option button has a checked attribute that is readable and settable. The checked attri-
bute is a Boolean attribute. You can use jQuery to locate all selected option buttons by
using the following selector.
$('input[type=radio]:checked')
Free download pdf