Lecture 3: HTML Forms for User Input and Comprehensive CSS Box Model

This lecture provides a detailed look at gathering user input using HTML forms and a fundamental explanation of the CSS Box Model, which dictates element spacing and layout.

1. HTML Forms and Input Elements

HTML forms are used to collect data from the user.

• <form> Element: The container for all form controls.
  • action Attribute: Specifies the URL/file (e.g., /action_page.php) where the submitted form data is sent for processing.
  • target Attribute: Specifies where to display the response after submission (_self for current window, _blank for a new tab/window).
• <input> Element: The primary form element, configured by the type attribute:
  • type="text": Single-line text input (used for usernames, first/last names).
  • type="radio": Selects one option from a limited set (requires the same name attribute to group them).
  • type="checkbox": Selects zero or more options.
  • type="submit": Creates a button to submit the form data.
• The name Attribute (Crucial): Every input field must have a name attribute for its value to be sent with the form submission.
• The <label> Element: Defines a label for a form control. Its for attribute must match the id attribute of the associated <input> element to link them for accessibility and improved usability.
• Other Form Elements:
  • <select> / <option>: Creates a drop-down list.
  • <textarea>: Creates a multi-line text input area.

2. The CSS Box Model (Very Important)

The Box Model is a conceptual box that wraps around every HTML element. It dictates the total space an element occupies and controls layout. It consists of four main parts, from inside to outside:

1. Content: The actual text, image, or media.
2. Padding: Space inside the border, clearing the area around the content. It is controlled by padding-top, padding-right, padding-bottom, padding-left, or the padding shorthand.
3. Border: A line surrounding the padding and content. Controlled by the border property (e.g., border: 2px solid black;).
4. Margin: Space outside the border, clearing the area around the element. Controlled by margin-top, margin-right, margin-bottom, margin-left, or the margin shorthand.

3. Box Model Calculation

By default, the width and height properties only set the dimensions of the content area.

• Total Width = width + (Left Padding + Right Padding) + (Left Border + Right Border) + (Left Margin + Right Margin)
• Total Height = height + (Top Padding + Bottom Padding) + (Top Border + Bottom Border) + (Top Margin + Bottom Margin)

4. Styling Example (Question 6 Example)

To style a <div> with a paragraph inside using all three Box Model components:

• Background Color: background-color: lightblue;
• Padding: padding: 20px; (Sets 20px of space inside the border).
• Border: border: 3px solid #333; (A 3-pixel solid dark gray border).