HTML Forms Day 12 - PHINMA University of Pangasinan PDF

PHINMA University of Pangasinan College of Information Technology Education HTML Forms DAY 12 Angelica Fernandez-Vidal, MIT Subject Teacher ITE 308 Web System and Technologies  Lesson Overview This lesson will cover the foundational concepts of HTML forms, which are essenti...

PHINMA University of Pangasinan College of Information Technology Education HTML Forms DAY 12 Angelica Fernandez-Vidal, MIT Subject Teacher ITE 308 Web System and Technologies  Lesson Overview This lesson will cover the foundational concepts of HTML forms, which are essential for creating interactive and user-friendly web applications. Lesson Objectives Understand the Create a functional HTML structure and purpose of Apply HTML Forms in form that captures various the html document. HTML forms in web applications. types of user input. HTML Forms Forms are fundamental components of web applications, serving as the primary interface through which users interact with websites and web services. User Registration Contact Information Login Authentication Data Submission and Order Processing Updates Feedback and Survey Search Functions HTML Forms HTML Forms are required to collect data from the site visitor. The HTML tag is used to create an HTML form. form elements  FORM ATTRIBUTES Attribute Description action Backend script ready to process your passed data. method Method to be used to upload data. target Specify the target window or frame where the result of the script will be displayed. autocomplete Specifies if the browser should autocomplete the form novalidate Specifies that the browser should not validate the form. FORM CONTROLS Text Input Controls Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes Hidden Controls Clickable Buttons Submit and Reset Button TEXT INPUT Text input controls in HTML allow users to input text data. Single-line text input controls tag Password input controls Multi-line text input controls tag  INPUT ATTRIBUTES Attribute Description type Indicates the type of input control name Used to give a name to the control which is sent to the server to be recognized and get the value. value This can be used to provide an initial value inside the control. size Allows to specify the width of the text-input control in terms of characters. maxlength Allows to specify the maximum number of characters a user can enter into the text box. autofocus Specifies that an element should automatically get focus when the page loads  TEXTAREA ATTRIBUTES Attribute Description name Used to give a name to the control which is sent to the server to be recognized and get the value. rows Indicates the number of rows of text area box. cols Indicates the number of columns of text area box GROUPING The element groups related data in a form. The element defines a caption for the element. CHECKBOX CONTROLS Checkbox controls in HTML are input elements that allow users to select one or more options from a set of predefined choices. They are created using the element with the type attribute set to "checkbox".  CHECKBOX ATTRIBUTES Attribute Description type Indicates the type of input control and for checkbox input control it will be set to checkbox. name Used to give a name to the control which is sent to the server to be recognized and get the value. value The value that will be used if the checkbox is selected. checked Set to checked if you want to select it by default. RADIOBUTTON CONTROLS Radio button controls in HTML are input elements that allow users to select one option from predefined choices. They are created using the element with the type attribute set to ”radio".  RADIOBUTTON ATTRIBUTES Attribute Description type Indicates the type of input control and for checkbox input control it will be set to radio. name Used to give a name to the control which is sent to the server to be recognized and get the value. value The value that will be used if the radio box is selected. checked Set to checked if you want to select it by default. SELECT BOX CONTROLS Select box controls in HTML, commonly called dropdown lists or select elements, provide a list of options from which users can choose one or more items. They are created using the element, and each option within the select box is defined using the element. SELECT BOX ATTRIBUTES Attribute Description name Used to give a name to the control which is sent to the server to be recognized and get the value. size This can be used to present a scrolling list box. multiple If set to "multiple" then allows a user to select multiple items from the menu.  OPTION ATTRIBUTES Following is the list of essential attributes of the tag: Attribute Description value The value that will be used if an option in the select box box is selected. selected Specifies that this option should be the initially selected value when the page loads. label An alternative way of labeling options FILE UPLOAD CONTROLS File upload controls in HTML allow users to select files from their local device and upload them to a web server. This is typically done using the element with the type attribute set to "file".  FILE UPLOAD ATTRIBUTES This is also created using the element, but the type attribute is set to file. Attribute Description name Used to give a name to the control which is sent to the server to be recognized and get the value. accept Specifies the types of files that the server accepts. BUTTON CONTROLS Button controls in HTML are used to create clickable buttons that perform actions when the user interacts with them. They are created using the element or the element with the type set to "button", "submit", or "reset".  BUTTON ATTRIBUTES The type attribute can take the following values: Type Description submit This creates a button that automatically submits a form. reset This creates a button that automatically resets form controls to their initial values. button This creates a button that is used to trigger a client-side script when the user clicks that button. EXIT ASSESSMENT ( 3 – 2 – 1) ✓✓Three Threethingsthings you learned: you learned: ✓ Two things that you’d like to learn more about: ✓ One question you still have:  PHINMA University of Pangasinan College of Information Technology Education Thank You End of Presentation. “Whatever you do, work at it with all your heart, as working for the Lord, not for human masters. “ – Colossians 3:23