ITSE 1411 Beginning Web
Form Basics Chapter 10
Discussion
  1. A form organizes objects called form elements or form controls that allows users to input data. The form does not do the processing. The submit button on the form submits the form for further processing either to another web page or to the server. The form itself is the user interface. Server-side processing can include email, writing to a file, or updating a database. The form element has the following attributes:
    AttributeValuePurpose
    action URL or file name/path of server-side processing script Required; indicates where to send the form information or emailed.
    autocomplete on
    off
    HTML5 on attribute; browser will use autocompletion to fill form fields
    off attribute; browser will not use autocompletion to fill form fields.
    id Alphanumeric, no spaces; must be unique on each page. Optional; provides a unique identifier for the form
    method get
    post
    get is default value; causes the form data to be appended to the URL and sent to server or address identified in the action. post is more private because the data is not seen in the URL
    name alphanumeric, no spaces; begins with a letter Optional; names the form to be easily accessed to verify form data before processing.
  2. Form controls are used to gather information entered on a web page. The input element configures several different types of form controls. The input is always accepted as text (even if numerics are used). Common input element attributes are:
    AttributeValuePurpose
    type text Configures the text box.
    name alphanumeric, no spaces, begins with a letter. Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    size numeric Configures the width of the text box. If no size is given, the browser default size is used.
    maxlength numeric Configures the maximum number of characters accepted.
    value text or numeric Displays an initial value in the text box.
    disabled disabled Form control is disabled.
    readonly readonly Form control is for display only.
    autocomplete on
    off
    HTML5 attribute; on attribute is default and uses autocomplete to fill the form element
    off attribute will not use autocomplete
    autofocus autofocus HTML5 attribute; places cursor in the form in the element with autofocus.
    list Datalist element id value HTML5 attribute; associates the form control with a datalist element.
    placeholder text or numeric HTML5 attribute; shows text in a field until the field is focused upon, then hides the text.
    required required HTML5 attribute, browser verifies entry of data before submitting the form.
    accesskey Keyboard character Configures a hot key for the form control
    tabindex numeric Configures the tab order of the form control.
  3. The submit button, when clicked, triggers the action method of the <form> tag and sends each element's name and value (called name=value pair) to the server (or another web page). The reset button, when clicked, resets all values to the initial values. Common attributes for submit and reset buttons are:
    AttributeValueUsage
    type submit
    reset
    submit creates a submit button
    reset creates a reset button
    name alphanumeric, no spaces, begins with a letter Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    value text or numeric Displays an initial value in the text box.
    accesskey Keyboard character Configures a hot key for the form control
    tabindex numeric Configures the tab order of the form control.
  4. The check box allows the user to select one or more of a group of boxes. Common check box attributes are:
    AttributeValuePurpose
    type checkbox Configures the check box.
    name alphanumeric, no spaces, begins with a letter. Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    checked checked Configures the check box to be checked as default when checked.
    value text or numeric Assigns a value to the check box when the check box is checked.
    disabled disabled Form control is disabled.
    autofocus autofocus HTML5 attribute; browser places cursor in the form control and sets focus.
    required required HTML5 attribute, browser verifies entry of data before submitting the form.
    accesskey Keyboard character Configures a hot key for the form control
    tabindex numeric Configures the tab order of the form control.
  5. The radio button allows the user to select one of a group of buttons. Common radio button attributes are:
    AttributeValuePurpose
    type radio Configures the radio button.
    name alphanumeric, no spaces, begins with a letter. Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    checked checked Configures the radio button to be selected as default when displayed.
    value text or numeric Assigns a value to the radio button when the radio button is selected.
    disabled disabled Form control is disabled.
    autofocus autofocus HTML5 attribute; browser places cursor in the form control and sets focus.
    required required HTML5 attribute, browser verifies entry of data before submitting the form.
    accesskey Keyboard character Configures a hot key for the form control
    tabindex numeric Configures the tab order of the form control.
  6. Hidden field is not visible in the browser viewport. The advantage is that the value can be accessed by name or id while not being viewable. Common hidden field attributes are:
    AttributeValuePurpose
    type text Configures the hidden form element.
    name alphanumeric, no spaces, begins with a letter. Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    value text or numeric Displays an initial value in the text box.
    disabled disabled Form control is disabled.
  7. The password box is similar to the text box but displays the information as an asterisk or another character. Common password box attributes are:
    AttributeValuePurpose
    type text Configures the password box.
    name alphanumeric, no spaces, begins with a letter. Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    size numeric Configures the width of the password box. If no size is given, the browser default size is used.
    maxlength numeric Configures the maximum number of characters accepted.
    value text or numeric Displays an initial value in the password box.
    disabled disabled Form control is disabled.
    readonly readonly Form control is for display only.
    autocomplete on
    off
    HTML5 attribute; on attribute is default and uses autocomplete to fill the form element
    off attribute will not use autocomplete
    autofocus autofocus HTML5 attribute; places cursor in the form in the element with autofocus.
    placeholder text or numeric HTML5 attribute; shows asterisks in a field until the field is focused upon, then hides the text.
    required required HTML5 attribute, browser verifies entry of data before submitting the form.
    accesskey Keyboard character Configures a hot key for the form control
    tabindex numeric Configures the tab order of the form control.
  8. Textarea element configures a scrolling text box. Common scrolling text box attributes are:
    AttributeValuePurpose
    name alphanumeric, no spaces, begins with a letter. Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    cols numeric Required; configures the width (by character) of the scrolling text box. If not used, the browser default width is used.
    rows numeric Required; configures the height (by character) of the scrolling text box. If not used, the browser default width is used.
    maxlength numeric Configures the maximum number of characters accepted.
    disabled disabled Form control is disabled.
    readonly readonly Form control is for display only.
    autofocus autofocus HTML5 attribute; browser places cursor in the form control and sets the focus.
    placeholder text or numeric HTML5 attribute; shows asterisks in a field until the field is focused upon, then hides the text.
    required required HTML5 attribute, browser verifies entry of data before submitting the form.
    wrap hard or soft HTML5 attribute; configures line breaks within the information entered.
    accesskey Keyboard character Configures a hot key for the form control
    tabindex numeric Configures the tab order of the form control.
  9. Select element contains a selection list. Common select element attributes are:
    AttributeValueUsage
    name alphanumeric, no spaces, begins with a letter Names the form element. Should be unique and usually matches the id.
    id alphanumeric, no spaces, begins with a letter. Provides a unique identifier for the form element.
    size text or numeric Configures the number of choices the browser will display. If the number of elements is greater than the size, then a scroll bar appears.
    multiple multiple Configures a select list to accept more than one choice.
    disabled disabled Form control is disabled.
    tabindex numeric Configures the tab order of the form control.
  10. The option element contains and configures an option item displayed in the select list form control. Common option element attributes are:
    AttributeValueUsage
    value text or numeric characters Assigns a value to the option; this value can be accessed by client-side and by server-side processing.
    selected selected Configures an option to be initially selected when displayed by a browser.
    disabled disabled Form control is disabled.
  11. The label element has two different methods:
    • The label element is used as a container around both the text description and the form element.
    • The label method uses the "for" attribute to associate the label with a particular HTML form element.
  12. The fieldset element can be used to put a border around a group of form elements.
  13. The legend element provides a text description of a fieldset grouping.
    • Using HTML elements label, fieldset, and legend increases accessibility to a web form because it increases readability.
    • The tabindex attribute used on form control will allow users to use the tab key rather than the mouse to navigate the form.
    • The accesskey attribute can be used to create a hot key to move the cursor immediately to a form control.
  14. Use CSS methods, such as the box model, to apply style to elements in a form.
  15. Server-side scripting is run on a server and is processed before a web page is rendered. JavaScript is a client-side script. We will not cover server-side scripting this semester.
  16. HTML5 text form controls are similar to text boxes except they must be in the format of the type of input. If the browser does not recognize these form controls, the element will display as a text box. These include:
    • E-mail address input form.
    • URL form control.
    • Telephone number form control.
    • Search form control
    • Datalist element displays a text box as well as a selection list of options.
    • The slider input form control accepts a numerical value and configures a slider within a specified range.
    • The spinner input form control accepts a numerical value and provides feedback to the user within a specified range.
  17. HTML5 Date and Time Controls accept date and time-related information.
    AttributeValueUsage
    date a date Names the form element. Should be unique and usually matches the id.
    datetime a date and time (offset from UTC time) Provides a unique identifier for the form element.
    datetime-local a date and time without time zone information Configures the number of choices the browser will display. If the number of elements is greater than the size, then a scroll bar appears.
    time a time without time zone information Configures a select list to accept more than one choice.
    month a year and month Form control is disabled.
    week a year and week Configures the tab order of the form control.
  18. The color-well for control displays an interface that offers a color-picker interface tot he user.