CSCI 121 - Lecture 7 - Introduction to Forms

Topics Covered

1. <form> - HTML form.
• An HTML form contains form elements.
• Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.
• action attribute - used for processing a form submission.
• For example:
  

                          <form action="http://www.w3schools.com/html/action_page.php">
                            First name:<br>
                            <input type="text" name="firstname" value="Luke">
                            <br>
                            Last name:<br>
                            <input type="text" name="lastname" value="Skywalker">
                            <br><br>
                            <input type="submit" value="Submit">
                          </form>
                      

2. Form elements - The Form Elements for use within a form are:
• <input> - input element.
• The most important form element is the <input> element.
• The <input> element can be displayed in several ways, depending on the type attribute:
• text - regular text input
• password - sensitive text input, like a password, represented with * characters
• submit - a button which causes the form data to be posted to the URL specified by the action attribute of the form.
• reset - a button that when pressed clears/resets all the form elements within the form.
• radio - a radio button
• checkbox - a checkbox
• button - a button with specified text, not directly linked to the form action, useful for custom processing.
• <select>
• The <select> element defines a drop-down list.
• The <option> elements within the select tags define the list items.
• <textarea>
• The <textarea> element defines a multi-line input field (a text area).
• The rows attribute is used to specify the visible number of lines in the text area.
• The cols attribute specifies the visible width of a text area.
• <button>
• The <button> element defines a clickable button.
• The onclick attribute specifies the javascript to run when the button is clicked.
• The type attribute specifies the type of button:
• "button" - A regular button.
• "submit" - Submit action button.
• "reset" - Reset form elements button.